山田祥寛/著
SBクリエイティブ株式会社/発行
定価 4,455円
B5変版・ 688ページ・ 2色
ISBN 978-4-8156-3594-7
発刊日： 2025年9月12日

導入編

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　Viteとは？
　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　モジュール
　1-3-7　非同期処理とfetchメソッド

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　アプリを起動するためのエントリーポイント - main.jsx
　2-2-3　補足：Strictモード
　2-2-4　ページを構成するUI部品 - App.jsx
　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-2-4　補足：スタイルを選択的に適用する
3-3　Props／Stateの理解を深める
　3-3-1　コンポーネント配下のコンテンツをテンプレートに反映させる
　3-3-2　複数のchildrenを引き渡す
　3-3-3　childrenに対してパラメーターを引き渡す
　3-3-4　State値更新のための2つの構文
　3-3-5　子コンポーネントから親コンポーネントへの情報伝達
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　Uncontrolled Inputによるフォーム管理
　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　コンポーネント単位のスタイルを定義する - CSS Modules
　5-2-2　コンポーネント内部でスタイルを管理する - Emotion
　5-2-3　アニメーション機能を実装する - Motion
5-3　コンポーネントのその他の話題
　5-3-1　コンポーネント配下のコンテンツを任意の領域に描画する - ポータル
　5-3-2　コンポーネントで発生したエラーを処理する - Error Boundary
　5-3-3　リソース／メタデータを操作する - title／meta／link／scriptコンポーネントなど［19］

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　外部サービスからデータを取得する - SWR
　6-3-1　SWRを利用しない例
　6-3-2　SWRを利用した例
　6-3-3　Suspense／Error Boundaryとの連携
　6-3-4　補足：パフォーマンス上のポイント

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　コンポーネントの複数階層で値を受け渡しする - use関数
　7-4-1　コンテキストの基本
　7-4-2　例：コンテキストを利用してテーマ切り替えを実装する
　7-4-3　補足：use関数でPromiseの結果を取得する
7-5　ステート管理ライブラリ「Jotai」
　7-5-1　Jotaiとは？
　7-5-2　状態を管理する「Atom」
　7-5-3　既存のAtomの演算／加工結果を返す - 派生Atom（ゲッター）
　7-5-4　既存のAtomへの更新コードを定義する - 派生Atom（セッター）
　7-5-5　Atom値の有効範囲を制限する- Store／Provider

Chapter 8　フック（応用）

8-1　関数、またはその結果をメモ化する - memo／useMemo／useCallback関数
　8-1-1　メモ化のためのサンプル
　8-1-2　関数の結果をメモ化する - useMemo関数
　8-1-3　コンポーネントの再描画を抑制する - memo関数
　8-1-4　関数定義そのものをキャッシュする - useCallback関数
8-2　優先順位の低いState更新を区別する - useTransition関数
　8-2-1　複数のStateに応じてページを制御する例
　8-2-2　useTransition関数による描画の優先順位付け
　8-2-3　トランジションの状態に応じて処理を振り分ける
　8-2-4　特定の値の「遅延バージョン」を生成する - useDeferredValue関数
8-3　アクションでデータ更新を簡単化する - useActionState／useOptimistic／useFormStatus関数［19］
　8-3-1　従来型のデータ更新
　8-3-2　useActionState関数によるデータ更新
　8-3-3　楽観的更新を実装する - useOptimistic関数
　8-3-4　フォームの状態を監視する - useFormStatus関数
8-4　フックの自作
　8-4-1　カスタムフックの定義
　8-4-2　カスタムフックの利用

応用編

Chapter 9　テスト

9-1　単体テスト
　9-1-1　Vitestの基本
　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　イベントハンドラーへの型定義
　10-2-5　fetchデータへの型定義
　10-2-6　補足：関数コンポーネントの型定義

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

識別子の記法
長いコードをVSCode上で折り畳むには？
Reactをより深く学ぶための参考書籍／記事
npmのサブコマンド
React期待の将来機能
コードの「べからず」を検出する - ESLint
アプリ全体の例外処理
外部ストアからのデータを購読するuseSyncExternalStoreフック