山田祥寛/著
SBクリエイティブ株式会社/発行
定価 4,400円
B5変版・ 668ページ・ 2色
ISBN 978-4-8156-1948-0
発刊日： 2023年9月28日

導入編

Chapter 1 イントロダクション

1-1 React と JavaScript
　1-1-1 JavaScript の歴史
　1-1-2 jQuery から新世代のライブラリへ
　1-1-3 主な JavaScript フレームワーク
　1-1-4 React の特徴
1-2 React アプリを開発／実行するための基本環境
　1-2-1 Create React App とは
　1-2-2 Node.js のインストール
　1-2-3 Visual Studio Code のインストール
1-3 モダン JavaScript の基本
　1-3-1 変数の宣言
　1-3-2 主なリテラル表現
　1-3-3 分割代入
　1-3-4 引数の既定値構文、可変長引数など
　1-3-5 Optional Chaining 演算子（?.）
　1-3-6 モジュール

Chapter 2 React の基本

2-1 はじめての React
　2-1-1 React アプリの作成
　2-1-2 補足：Npm Scripts
2-2 サンプルアプリの内容を確認する
　2-2-1 メインページの準備 - index.html
　2-2-2 アプリを起動するためのエントリーポイント - index.js
　2-2-3 補足：Strict モード
　2-2-4 ページを構成する UI 部品 - App.js
　2-2-5 補足：アプリを再描画する
　2-2-6 関数コンポーネントとクラスコンポーネント
2-3 JSX の基本
　2-3-1 JSX のルール
　2-3-2 JSX に JavaScript 式を埋め込む - {…} 構文
　2-3-3 {…} 構文で属性値を設定する
　2-3-4 スタイルシートを設定する - style 属性
　2-3-5 JSX 式の実体を理解する

Chapter 3 コンポーネント開発（基本）

3-1 コンポーネントを支える基本概念 - Props と State
　3-1-1 Props ／ State とは？
　3-1-2 Props の基本
　3-1-3 イベント処理の基本
　3-1-4 State の基本
　3-1-5 React Developer Tools の導入
3-2 条件分岐と繰り返し処理
　3-2-1 配列をリスト化する - 繰り返し処理
　3-2-2 式の真偽に応じて表示を切り替える - 条件分岐
　3-2-3 補足：スタイルを選択的に適用する
3-3 Props ／ State の理解を深める
　3-3-1 コンポーネント配下のコンテンツをテンプレートに反映させる
　3-3-2 複数の children を引き渡す
　3-3-3 children に対してパラメーターを引き渡す
　3-3-4 プロパティ型の検証（PropTypes）
　3-3-5 State 値更新のための 2 つの構文
　3-3-6 子コンポーネントから親コンポーネントへの情報伝達
3-4 より高度なイベント処理
　3-4-1 React で利用できるイベント
　3-4-2 イベントオブジェクト
　3-4-3 イベントの伝播を抑制する
　3-4-4 イベントハンドラーのオプションを設定する

基本編

Chapter 4 コンポーネント開発（フォーム）

4-1 フォーム操作の基本
　4-1-1 フォーム管理の基本
　4-1-2 注意：change イベントの発生タイミング
　4-1-3 非制御コンポーネントによるフォーム管理
　4-1-4 入力要素に応じたフォームの実装例
4-2 State における構造化データの更新
　4-2-1 スプレッド構文の意味
　4-2-2 Immer ライブラリによる改善
　4-2-3 配列の更新
4-3 検証機能の実装 - React Hook Form
　4-3-1 React Hook Form の基本
　4-3-2 独自の検証ルールを実装する
　4-3-3 フォームの状態に応じて表示を制御する
　4-3-4 検証ライブラリと連携する
　4-3-5 Yup で独自の検証ルールを実装する
　4-3-6 Yup で入力値を変換する
　4-3-7 Yup のエラーメッセージを日本語化する

Chapter 5 コンポーネント開発（応用）

5-1 組み込みコンポーネント
　5-1-1 コンポーネントの描画待ちを検知する - Suspense コンポーネント（1）
　5-1-2 非同期処理の終了を待ち受ける - Suspense コンポーネント（2）
　5-1-3 コンポーネントの描画時間を計測する - Profiler コンポーネント
5-2 コンポーネント開発でのスタイル定義
　5-2-1 JSX 式にスタイルシートを埋め込む - Styled JSX
　5-2-2 標準タグを拡張してスタイル付きタグを定義する - Styled Components
　5-2-3 複数の記法に対応した CSS-in-JS ライブラリ - Emotion
5-3 コンポーネントのその他の話題
　5-3-1 コンポーネント配下のコンテンツを任意の領域に描画する
　5-3-2 コンポーネントで発生したエラーを処理する - Error Boundary

Chapter 6 React ライブラリの活用

6-1 典型的な UI を実装する - MUI
　6-1-1 MUI の主なコンポーネント
　6-1-2 MUI の基本
　6-1-3 ドロワーメニューを実装する
　6-1-4 ページ内の配置を調整するレイアウト機能を活用する - グリッド
　6-1-5 MUI のスタイルをカスタマイズする - テーマ
　6-1-6 ライト／ダークモードに応じてテーマを切り替える
　6-1-7 React Hook Form ＋ MUI を連携する
6-2 コンポーネントの見た目／動作をカタログ表示する - Storybook
　6-2-1 Storybook のインストール
　6-2-2 ストーリーの確認
　6-2-3 ［Controls］タブの制御
　6-2-4 ［Actions］タブの制御
　6-2-5 ［Interactions］タブの制御
　6-2-6 ストーリーの表示をカスタマイズする
　6-2-7 Storybook にドキュメントを追加する
6-3 外部サービスからデータを取得する - React Query
　6-3-1 React Query を利用しない例
　6-3-2 React Query を利用した例
　6-3-3 Suspense ／ Error Boundary との連携

Chapter 7 フックの活用

7-1 コンポーネント描画／破棄時に処理を実行する - 副作用フック
　7-1-1 useEffect 関数の基本
　7-1-2 引数 deps の意味
　7-1-3 例：副作用フックを利用したタイマーの準備
　7-1-4 描画時に同期的に処理を実行する
7-2 さまざまな値への参照を準備する - useRef 関数
　7-2-1 関数コンポーネントで「インスタンス変数」を定義する
　7-2-2 Ref をコンポーネント配下の要素にフォワードする
　7-2-3 関数コンポーネント配下のメソッドを参照する
　7-2-4 コールバック関数を ref 属性に引き渡す - コールバック Ref
7-3 状態と処理とをまとめて管理する - useReducer 関数
　7-3-1 useState フックの問題点
　7-3-2 useReducer に関わるキーワード
　7-3-3 useReducer フックの基本
　7-3-4 Reducer を複数の Action 型に対応する
　7-3-5 State の初期値を生成する場合の注意点
7-4 コンポーネントの複数階層で値を受け渡しする - useContext 関数
　7-4-1 コンテキストの基本
　7-4-2 例：コンテキストを利用してテーマ切り替えを実装する
7-5 ステート管理ライブラリ「Recoil」
　7-5-1 Recoil とは？
　7-5-2 Recoil の基本
　7-5-3 Todo リストを Recoil アプリに対応する
　7-5-4 Todo リストを改良する
7-6 関数、またはその結果をメモ化する - memo ／ useMemo ／
　　　　useCallback 関数
　7-6-1 メモ化のためのサンプル
　7-6-2 関数の結果をメモ化する - useMemo 関数
　7-6-3 コンポーネントの再描画を抑制する - memo 関数
　7-6-4 関数定義そのものをキャッシュする - useCallback 関数
7-7 優先順位の低い State 更新を区別する - useTransition 関数
　7-7-1 複数の State に応じてページを制御する例
　7-7-2 useTransition 関数による描画の優先順位付け
　7-7-3 トランジションの状態に応じて処理を振り分ける
　7-7-4 特定の値の「遅延バージョン」を生成する - useDeferredValue 関数
7-8 フックの自作
　7-8-1 カスタムフックの定義
　7-8-2 カスタムフックの利用

応用編

Chapter 8 ルーティング

8-1 React Router の基本
　8-1-1 ルーティングテーブルの定義
　8-1-2 補足：ルーターの動作オプション
　8-1-3 ルート定義をタグ形式で表現する
8-2 ルーター対応リンクの設置
　8-2-1 リンク設置の基本
　8-2-2 ナビゲーションメニューに特化した >NavLink< 要素
　8-2-3 要素で利用できる主な属性
　8-2-4 補足：プログラムからのページ移動
8-3 ルーター経由で情報を受け渡しする手法
　8-3-1 パスの一部をパラメーターとして引き渡す - ルートパラメーター
　8-3-2 ルートパラメーターのさまざまな表現
　8-3-3 クエリ情報を取得する
　8-3-4 個々のリンクから任意の情報を引き渡す - state 属性
　8-3-5 親ルートから子ルートに値を受け渡す - Outlet Context
　8-3-6 ルート固有の情報を取得する - handle 属性
8-4 Route コンポーネントの属性
　8-4-1 ルート描画時の例外を捕捉する - errorElement 属性
　8-4-2 コンポーネントで利用するデータを準備する - loader 属性
　8-4-3 ルートで発生したアクションを処理する - action 属性
　8-4-4 コンポーネントを遅延ロードする - lazy 属性
8-5 ルーティングに関わるその他のテクニック
　8-5-1 現在のページへのリンクを解除する
　8-5-2 スクロール位置を復元する - <ScrollRestoration> 要素

Chapter 9 テスト

9-1 単体テスト
　9-1-1 Jest の基本
　9-1-2 コンポーネントのテスト
　9-1-3 イベントを伴うテスト
　9-1-4 子コンポーネントのモック化
　9-1-5 タイマーを伴うテスト
　9-1-6 非同期通信を伴うテスト
　9-1-7 非同期通信をモック化する - msw
　9-1-8 コンテキストを伴うテスト
9-2 E2E テスト
　9-2-1 E2E テストの準備
　9-2-2 E2E テストの作成

Chapter 10 TypeScript の活用

10-1 TypeScript の基本
　10-1-1 型アノテーションの基本
　10-1-2 TypeScript のデータ型
　10-1-3 TypeScript 固有の特殊な型
　10-1-4 複数の型を組み合わせる「複合型」
10-2 React アプリへの TypeScript の導入
　10-2-1 TypeScript テンプレートの有効化
　10-2-2 Props での型定義
　10-2-3 State ／コンテキスト／ Reducer の型情報
　10-2-4 fetch データへの型定義
　10-2-5 補足：関数コンポーネントの型定義

11 Next.js の活用

11-1 Next.js の基本
　11-1-1 Next.js とは？
　11-1-2 Next.js アプリを作成する
11-2 App Router の基本を理解する
　11-2-1 2 種類のルーター
　11-2-2 App Router とは？
　11-2-3 プロジェクト既定のサンプルを確認する
　11-2-4 App Router のルートパラメーター
11-3 応用アプリ「Reading Recorder」を作成する
　11-3-1 アプリの構造を概観する
　11-3-2 利用するサービス／ライブラリ
　11-3-3 Prisma の準備
11-4 アプリの実装を読み解く
　11-4-1 ルートレイアウト（共通メニュー）
　11-4-2 書籍情報の表示
　11-4-3 レビュー情報の一覧表示
　11-4-4 Google ブックス経由での書籍検索
　11-4-5 レビュー登録フォーム
11-5 Vercel へのデプロイ
　11-5-1 GitHub リポジトリの準備
　11-5-2 Vercel 側の準備
　11-5-3 PostgreSQL データベースを準備する
　11-5-4 本番環境での動作を確認する

Column 識別子の記法

React をより深く学ぶための参考書籍
長いコードを VSCode 上で折り畳むには？
React Router アプリを本番環境に移行する場合
npm のサブコマンド
外部ストアからのデータを購読する useSyncExternalStore フック