書籍詳細（これからはじめるReact実践入門）

これからはじめるReact実践入門 書影

ISBN: 978-4-8156-1948-0

これからはじめるReact実践入門

react javascript typescript next.js
サポート終了
著者山田祥寛
出版社SBクリエイティブ
価格4,000円（税別）
判型B5変判・2色
ページ数668ページ
発売日2023年9月28日
シリーズ これからはじめる実践入門
対象レベル中級
Amazonで購入
B!

改訂版が刊行されています。詳細はこちらをご覧ください。

React/Next.jsによるWebアプリ開発で役立つ応用力が身につく！

サンプルを動かしながら、Reactの機能を基礎からしっかり。モダンJavaScript、TypeScript、Next.jsによる本格的なアプリ開発まで、この1冊で総合的に学べます。
とことん丁寧で、開発に必要な応用力が身につけられる、必読の入門書です。
最新 React 18以降／Next.js 13以降に対応
これからはじめるReact実践入門 ロゴ

更新履歴

  • FAQ情報：2024年12月7日 更新
  • 正誤訂正：2024年3月1日 更新

目次

  • 導入編
  • 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 フック

正誤表

該当頁 該当箇所 修正刷
訂正箇所 訂正事項 更新日
p.103 リスト 3-2-8　ForFilter.js 4行目 3刷
const lowPrice = books.filter(book => book.price < 3500); const lowPrice = books.filter(src => book.price < 3500); 2023/12/28
p.143 3-4-2 イベントオブジェクト - 例: キーイベントでのキーを識別する 1行目 3刷
keypressword keypress 2024/03/01
p.150 リスト 3-4-19 再掲 1行目 3刷
<div id="parent" onClickCapture={handleParentClick}> <div id="parent" onClickCapture={handleParent}> 2024/03/01
p.155 リスト 3-4-27　EventPassive.js 下から5行目 3刷
return (
<div ref="divRef" ...		 return (
<div ref={divRef} ...		 2023/12/25
p.211 リスト 4-3-10 ファイル名 3刷
FormYum.js FormYup.js 2024/03/01
p.347 リスト 7-1-6 HookEffect.js 7行目 3刷
if (Date.now() - start > 1000) { break; } if (Date.now() - start > delay) { break; } 2024/03/01
p.430 リスト 8-3-1 routesParam.js 9行目 3刷
<Route element={<RouteParam />} /> <Route element={<RouteParam />}> 2024/03/01
p.449 図 メタ情報の展開 下の表 3刷
React, {keywd} React, {keywords} 2024/03/01
p.512 表：req オブジェクトの主なメンバー 1行目 3刷
url　　URL ※3行目と重複のため削除 2024/03/01
p.540 上から3行目 3刷
変数 msg は文字列、または undefined を認めることになります。 変数 msg は文字列、または null を認めることになります。 2024/01/12
p.540 図：ジェネリクス 右端の矢印の先（下から2か所） 3刷
数値配列
Array<string>

true/false 配列
Array<string>		 数値配列
Array<number>

true/false 配列
Array<boolean>		 2024/01/12
p.608 リスト 11-4-8 src/app/books/[[...keyword]]/layout.js 下から10行目 3刷
forcus:bg-white focus:bg-white 2024/03/01
p.615 リスト 11-4-13 src/components/FormEdit.js 10行目 3刷
forcus:bg-white focus:bg-white 2024/03/01

FAQ

本書刊行後にリリースされたReact Routerのバージョン7でjson関数が廃止されています。
https://reactrouter.com/start/changelog#removed-apis />
本書では、React Router 6.xをご使用ください。

更新日: 2024.12.07

お問い合わせ

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

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