今週は「りあクト」を読みました。
https://oukayuka.booth.pm/items/1312652
TypeScript/ React/ Reduxを使ったフロントの開発を完全に理解したい！と意気込んでいると、会社の人にこの本をオススメされて購入しました。
ちなみに第３版がもうすぐ出るみたいなので、もうしばらく待ってから購入した方がいいそうです。
なぜこの本がわかりやすいのか
まず、なぜこの本がわかりやすいのかというとReact、Redux、TypeScriptの3つを学ぶ際に必要な事項が、順を追って書かれているからです。
いきなりReactの勉強から初めてしまうと、まずJavaScriptでつまずいてしまうことが多いですが、本書では、おすすめのエディタ・最新のJavaScriptの解説や、関数型プログラミング、Reactの思想についてから説明が始められているので大変わかりやすいです。
この本に書いていないこと
２版ではCSSやテストについては触れられていません。
上記の内容は、続編になります。
https://oukayuka.booth.pm/items/1312815
第1章 こんにちはReact
- VSCodeを使う
おすすめ拡張リスト便利です。
- ReactとTypeScriptで「Hello World」
初めて書く人が迷いやすい、コードの処理の順番も触れられています。
第2章 ナウでモダンなJavaScript
最新のJavaScriptについて解説されています。
これらも、私も躓いて先輩に教えていただいたことばかりでした。
- varとletとconst
- アロー関数の書き方
- クラス構文について
- 分割代入
- JSの非同期処理について
第3章 関数型プログラミングでいこう
JavaScript自体はプロトタイプベースのオブジェクト指向言語ですが、Reactは関数型プログラミングの考え方を求められます。本書では、そのことも触れられています。
これらについては、やめ太郎さんの記事も面白くてわかりやすいです。
- 関数型プログラミングとは
同じ入力に対して同じ作用と同じ出力が保証されていること。
- 無名関数
- 高階関数
高階関数を書いたら、中級者になれた気がした。 - Qiita
- クロージャ
4歳娘「パパ、そんなときはクロージャが役に立つんじゃない？」 - Qiita
- ジェネレータ
- カリー化
第4章 型のあるTypeScriptは強い味方
TypeScriptの超必要最小限の話が書かれていました。
- TypeScriptの概要
- 型の種類
- 型の合成（交差型/ 共用体型）
ジェネリクスもよく使われるので、こちらの記事で補いました。
第5章 拡張記法 JSX
Reactを使うとなるとJSXは当たり前のように使うので、JSXがなんなのかあんまり深く考えたことなかったです。本書では説明があります。
- JSXとは？
- JSXの文法
+αで公式ドキュメントも読むといいと思いました。
第6章 LintとPrettierでコードをクリーンに
LintとPrettierなどの静的コード解析ツールについても説明があります。
1から調べて設定するのかなり大変なので、解説していただけるのは本当にありがたいです。本書をヒントに、なんとかeslintとprettierを入れることができました。
原因を突き詰める気力はもうなかったのですが、サンプルコードが全然動かなくて3時間くらい苦戦しました...。バージョンが違ったのかな...。
第7章 何はなくともコンポーネント
- Reactの思想
- Propsについて
- Stateについて
- ライフサイクルについて
- 関数コンポーネントについて
- Presentational ComponentとContainer Componentについて
ここでちょっとrender PropsやHOCにも触れます。
最初からこうやって順番に勉強できてたらどれほどよかったか...。
第8章 Hooksで関数コンポーネントを強化する
Hooksは、classコンポーネントでしかできなかったことができるようになるReactの新機能です。
Hooksを理解するにはこれまでの歴史を理解する必要があり、HOC→render Props→Hooksの順番で勉強するとわかりやすいです。本書はそういった構成になってます。
State Hook、Effect Hook、Custom Hookと、よく使うHooks APIについて解説されています。
第9章 ルーティングでURLを制御する
SPAのルーティングってどうなってるんだろう...という疑問が解消された章です。ちなみに最近、エラーページどうやって実装しようかな...と悩み中です。
この章ではReact-Routerに関する説明が書いてあるのですが、バージョン5からHooksにも対応したみたいですね。りあクトもこの章が残っていたらきっと、３版でアップデートされていると思うので楽しみです。
第10章 Reduxでアプリの状態を管理する
- Fluxについて
- Reduxについて
最初Reduxでアプリケーションを作ってみたとき、「たったこれだけ表示するのにどうしてこんなに書かないといけないんだろう...」って思ってたんですけど、この本や公式ドキュメントで原理原則を読んでからはなんとなくReduxを使うメリットがわかるようになりました。
第11章 Reduxで非同期処理を扱う
Reactで非同期処理を行うよりReduxのミドルウェアを使った方がいい理由や、Redux ThunkとRedux-Sagaについて説明があります。
まとめ
GWはフロント開発を極めるためこの本を読み返したのですが、無事改めて広く浅く復習することができました。たったの200ページにここまでわかりやすく実際の開発に応用できる情報が載ってるなんて、筆者の方は天才だと思います！
もうすぐ新しい版が出るとのことなので、ぜひ購入したいと思います。
３版が出るまで、以下のUdemyを楽しみたいと思います。
Learn Typescript with React to Build Real-World Reactive Projects
