従来、JavaScriptで画面の要素を変更する場合は、DOMを直接指定して書き換えるような処理をしてきました。以下は、プレーンなJavaScriptやjQueryを用いて画面に要素を追加する…
このようなコードは手続き的で分かりやすい反面、レンダリング(画面の表示速度)に問題が生じやすかったり、プログラムコードが肥大化してくるとどこで何をしているか分からなくなるというつらさがありました。
■chapter1 まとめ
・モダンJavaScriptには習得する価値がある
・React等のモダンJavaScriptフレームワーク/ライブラリでは仮想DOMという技術が用いられている
・パッケージマネージャー(npm/yarn)を使って開発効率アップ
・ECMAScriptはJavaScriptの標準仕様。年に1回更新されている
・モジュールバンドラーは開発時に分けていたファイルを1つにまとめてくれる
・トランスパイラはJavaScriptを色々なブラウザで動く記法に変換してくれる
・SPAでは1つのhtmlファイルをJavaScriptを使用してDOMを書き換えていく。ユーザー体験が向上できる
■chapter2 まとめ
・const、letでの変数宣言を積極的に使用する
・テンプレート文字列は文字列内でのJavaScript展開を楽にする
・アロー関数には記法を含む様々な特徴がある
・分割代入でオブジェクトや配列から値を抽出できる
・引数や分割代入時にデフォルトの値を設定できる
・スプレッド構文を用いて配列やオブジェクトをまとめたりコピーしたりできる
・オブジェクトのプロパティ名と設定する変数名が同一の場合には、省略記法が使える
・for文を使わなくてもmap関数やfilter関数で配列のループ処理ができる
・三項演算子で分岐を短く書ける
・論理演算子の&&と||の正しい意味を理解し使えるようになろう
■chapter3 まとめ
・従来のフロントエンド開発を知ることで、よりReactが習得しやすくなる
・プレーンなJavaScriptやjQueryでは「この要素を」「こう操作する」というように手続き的にDOM操作を行う
・HTMLのidやclass、DOMの階層構造等とJavaScriptのコードが密接に関係しており複雑になりやすく保守が難しかった
■chapter 4 まとめ
・React(JSX)のルール
・return以降は1つのタグで囲もう
・イベントやスタイルはキャメルケースになる
・return 以降に JavaScript を書く時は｛｝を使おう
・関数で「コンポーネント」を作って組み合わせて画面を作ろう
・コンポーネントに渡す引数のような値をPropsと呼ぶ
・コンポーネントが持つ様々な状態をStateと呼ぶ
・再レンダリングするとコンポーネント頭から再度コードが動く
・まずは2つのReact Hooksを覚えよう
•useState
•useEffect
・exportの2種類の違いを把握しよう
■Next.js
・今最も人気で勢いのあるフロントエンドのフレームワーク
・Vercel社は世界のフロントエンドを牽引
■chapter5 まとめ
・CSSのあてかたはプロジェクトやチームによって様々なので選択肢を持っておこう
・CSSファイルを分離するならCSS Modulesを使おう
・CSS-in-JSでいくならstyled componentsかEmotionの採用事例が多い
・Tailwind CSSをはじめとするユーティリティファーストなCSSフレームワークの人気が出てきている
■Core Web Vitals
・LCP(Largest Contentful Paint)→サイト表示の速さ
・FID(First Input Delay)→ユーザーアクションへの反応の速さ
・CLS(Cumulative Layout Shift)→レイアウトずれが起きないか
■chapter6 まとめ
・再レンダリングが起きるのは以下の3パターン
・Stateが更新されたコンポーネント
・Propsが変更されたコンポーネント
・再レンダリングされたコンポーネント配下のコンポーネント全て
・メモ化とは処理結果を保持して処理を高速化する技術
・コンポーネントのメモ化はmemo
・関数のメモ化はuseCallback
・変数のメモ化はuseMemo
■Apollo Client
・GraphQLAPIをクライアント側で効率良く操作するためのライブラリ
■chapter7 まとめ
・下層のコンポーネントで使うために本来不要なPropsを受け渡していくことをバケツリレーと呼ぶ
・Propsのパケツリレーが増えるとコードが複雑化したり、再利用しづらいコンポーネントとなったり、不要な再レンダリングが増えてしまうというデメリットがある
・Reactが提供しているContextを使うことでグローバルな値を管理できる
・Contextは以下のステップで扱う
1.React.createContextでContextの器を作成
2.Provider で囲む
3.コンポーネントでReact.useContextを使う
・1つのContextに入れている値が何か更新されるとそのContextを参照している全てのコンポーネントは再レンダリングされる
・レンダリングを最適化したい場合はContextに入れるデータを適切に分割し、Providerを複数作成する
・Redux、Recoil、Apollo Client等のライブラリを使うことでグローバルStateを管理することも可能
・グローバルState管理ライブラリとしては、Reactと同じくFacebookが開発しているRecoilの採用が今後増えそう
■chapter8 まとめ
・型安全な開発をすることはこれからの開発には必須
・tsconfig.jsonにプロジェクトに合わせた設定を行うことでルールをカスタマイズできる
・型を定義することで打ち間違いによるエラーを防げる
・型を定義することで Propsの打ち間違い、過不足を検知できる
・型定義はexportすることで他ファイルでも参照できるので一元管理すると良い
・コンポーネントにも型を付与する(FC、VFC)
・「?」を使いこなす
・外部ライブラリの型定義はパターンに合わせて対応する
■chapter9 まとめ
・React標準のHooksだけではなく、自作のHooksを作ることができる
・use～の名称で作成する自作のHooksを総称してカスタムフックと呼ぶ
・カスタムフック化することでロジックとView(見た目)を分離できる
・カスタムフック化することでロジックの再利用が可能になる
・カスタムフック化することで変更時の対応箇所を局所化できる
