こんにちは。今日は表題の本を読み、学んだことや感想についてまとめようと思います。
目次
- この本について
- Chapter1 React を始める前に知っておきたいモダンJavaScript の基礎
- Chapter2 モダンJavaScript の機能に触れる
- Chapter3 JavaScript でのDOM 操作
- Chapter4 React の基本
- Chapter5 React とCSS
- Chapter6 再レンダリングの仕組みと最適化
- Chapter7 グローバルなState 管理
- Chapter8 React とTypeScript
- Chapter9 カスタムフック
この本について
- この本はCL All Handsにてお知り合いになった創さんからご紹介いただいた本です
Chapter1 React を始める前に知っておきたいモダンJavaScript の基礎
- JavaScriptは勉強する価値があるのかという導入から、Reactは宣言的でありレンダリングコストを抑えていること、仮想DOMやパッケージマネージャなど各用語について軽く触れつつ、ECMAScriptを用いてJavaScriptの歴史を遡る章でした。今振り返ってみると、当時は0からのスタートだったので仮想DOMなどの説明で頭に？が大量に浮かんだ覚えがあります
- 学んだこと：各用語とReactの優れている点について学んだ
- キーワード「DOM、仮想DOM」「パッケージマネージャ」「モジュールバンドラ」「トランスパイラ」「SPA」
Chapter2 モダンJavaScript の機能に触れる
- プログラミングの一歩目である変数宣言から始まりました。各説明の後に短い例文が載っているため、理解が捗りました。この本に一貫していえることなのですが、教科書のような語り口ではなく、フォーマルでありつつ砕けた文体となっているためすらすらと読みやすいです。アロー関数の記法一つ一つに例文があり、引数の括弧を省略できるということや、条件下において波括弧とreturnを省略できることが数ページにわたって解説されていました。オブジェクトの分割代入やデフォルト値の設定スプレッド構文など、ベクトルが異なるJavaScriptの書き方を学びました。実際にいつ使うのか、については触れておらず、こういう書き方でこういうことができる、という内容だったため頭がパンクしそうになりました。reactを使うときに基本となってくる動作になってくるため、章を終わらせたときに「深くは思い出せないけど、この単語は一度やったな」ということができるため重要だと思いました
- 学んだこと：JavaScript(react)で使用する、基本的な動作の書き方について学んだ
- キーワード「let, const」「アロー関数」「分割代入」「スプレッド構文」「map, filter, 三項演算子」
Chapter3 JavaScript でのDOM 操作
- この章では、Reactに入る前に手続き的にDOMを操作して画面に表示させようということを行いました。今までは代入だったりmapなどだったので、ここからコードを画面に表示させることになりました。内容としてはDOMを作成・削除、htmlタグの生成を行い、最後にメモアプリを実装するというものでした。createElementやgetElementByClassNameなどを用いました。コードでがんばってタグを生成して、その通りにdivとかが表示されるのを見るのは面白かったですが、いちいち長いメソッドを書く必要があって面倒くさかったです。
- 学んだこと：手続き的なDOM操作は面倒くさいこと、index.htmlのscript srcにJavaScriptを渡せることを知らなかったので感動しました。
- キーワード：「DOMアクセス」
Chapter4 React の基本
- ついにこの章からcreate-react-appを用いて実際の画面とコードを連動させます。h1タグやpタグを用いて画面に文字を表示させ、フラグメントで囲むことや波括弧でjsを記述できるといったjsxのルールやコンポーネントについて学びました。h1タグにスタイルを渡せることを利用して、スタイルを別で定義し、それをpropsで取得する実践を積みました。useState,useEffectの実装も行い、シンプルな使い方を体感しました。関数型更新についてはコラムで触れていて、レンダーやコミットの話は出てこず、シンプルに理解できました。
- 学んだこと：return内でHTMLライクなコードを記述することで画面に表示できること。関数の引数のような形で、コンポーネントがpropsを受け取り、それを画面表示に利用できること。また基本的なフック二種の仕様について学べました。
- キーワード：「JSX」「コンポーネント」「props」「useState」「useEffect」
Chapter5 React と CSS
- Chapter4で実装したボタンなどを用いて、cssを記述することでいい感じのUIにする章です。styled-components,Emotion,Tailwind CSSなどのCSSの割り当て方について学びました。
- 学んだこと：CSSの当て方
- キーワード：「CSS」
Chapter6 再レンダリングの仕組みと最適化
- ここからはReactらしい再レンダリングについて触れていきます。再レンダリングが走る条件から始まり、console.logを使用しいつ再レンダリングされたか確認しました。その後、最適化するためにmemo,useMemo,useCallbackを使用して再レンダリングが起きてほしくない場所は起きないようにする方法を体感しました。
- 学んだこと：再レンダリングが起きるのは コンポーネントのstateが更新されたとき コンポーネントのPropsが変更されたとき 再レンダリングされたコンポーネント配下のコンポーネントすべて の3パターンであることを学んだ。また、不要な再レンダリングを防ぐためにコンポーネントをメモ化するmemo,関数(action)をメモ化するuseCallback,変数をメモ化するuseMemoを学んだ。
- キーワード：「メモ化」「memo」「useCallback」「useMemo」
Chapter7 グローバルなstate管理
- あるstateを他のコンポーネントから参照したいときにpropsのバケツリレーをするとコードが煩雑になるという問題の説明から始まります。実際に2層のバケツリレーを行うコードを書き、グローバルなstate管理について学びます。Contextでのグローバルstateの基本的な流れをお手本のコードと一緒に記述していき、propsの受け渡しをせずにstateを利用する流れを体感しました。
- 学んだこと：あるstateを他のコンポーネントから参照する際、propsの受け渡しではなくcontextという方法を用いて参照/管理できること。createContextで器を作成する＝＞Providerでコンポーネントを囲む＝＞参照したいコンポーネントでuseContextを使用する3つのステップを学んだ。
- キーワード：「バケツリレー」「Propsのバケツリレー」「Context」
Chapter8 React と TypeScript
- この章ではTypeScriptについて学びます。型指定の仕方、複合型、ジェネリクス、tsconfigについて触れていきます。概念の紹介の後は実際のコードを用いた解説があり、型推論が効くとどういうときにありがたいかなどを学ぶことができます。また、FCを使用することでコンポーネントの型定義（JSXを返却していないとエラー）ができることや省略可能プロパティには ? をつけること、プロパティで ? を使用した際は、実装時にも ? をつけること（オプショナルチェイニング）にも触れました。
- 学んだこと：型定義によって複数人で開発するときの保守性が向上することや、型定義の仕方を学びました。型定義によりPropsの打ち間違いや過不足を検知できたり、打ち間違いによるエラーを防げるためTypeScriptが使用される理由がわかりました。ジェネリクスが最初は分からなかったのですが、useStateを使用した際に型定義する方法は以前使用したことがあったため、それを思い出したときに腹落ち出来ました。
- キーワード：「TypeScript」「オプショナルチェイニング」「型推論」「複合型」「ジェネリクス」
Chapter9 カスタムフック
- APIを実行するコード例をフックとして切り出すことで、ファイルの責務（ロジックと見た目）を分けることができるという章です。また、カスタムフック化することで、ロジックを再利用できるという章でした。
- 学んだこと：コンポーネント内にすべての処理をべた書きするのではなく、ロジックと見た目をわけることでわかりやすいコードを書くことができる。
- キーワード：「カスタムフック」「ロジックの再利用」
感想
- 知識0からのスタートでしたが、JavaScriptの基本である分割代入やスプレッド構文から学ぶことができ、Reactのレンダリングも体感することができました。基礎から実践まで体系的に学べて理解が深まった一方で、最初は難解な概念や書き方に戸惑う場面も多かったです。しかし、章を追うごとに知識がつながっていき、Reactの仕組みや設計思想の理解が進み、楽しかったです。特に、コードの再利用性や最適化はReact特有の知識だと感じたので、今後も知識習得に励みたいと思います。