目次

• 導入編
• 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　補足：関数コンポーネントの型定義
• Chapter 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フック

正誤表

FAQ

現在、FAQはありません。

ダウンロード

お問い合わせ

書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。

Powered by メールフォーム 『オレンジフォーム』