ISBN 9784815619480
これからはじめるReact実践入門 : コンポーネントの基本からNext.jsによるアプリ開発まで
概要
Reactをコンポーネント基礎からNext.js実践まで体系的に学ぶ
想定読者
JavaScriptの基礎は身についており、これからReactを仕事で本格的に使いたい方。状態管理・ルーティング・テスト・Next.js(App Router)まで含めて、Reactのエコシステムを一冊で体系立てて学びたい方に向いています。
こんな人には向いていない
- プログラミングそのものが初めての方(モダンJavaScriptの基本は復習程度の扱いのため、変数・関数・配列操作といった土台は別途必要です)
- すでにReactを実務で運用していて、特定の最新機能や高度なパフォーマンス設計だけを深掘りしたい方(本書は網羅的な入門〜実践書のため、該当箇所以外は冗長に感じられます)
- 短時間で要点だけをつまみ食いしたい方(約650ページとボリュームがあり、通読を前提とした構成です)
読了後にできるようになること
- Props / State / イベント処理といったコンポーネントの中核概念を、サンプルを動かしながら理解できる
- 副作用フック・useRef・useReducer・useContext・useMemo / useCallback などフックを目的別に使い分けられるようになる
- React Hook Formによるフォーム検証、MUI・Storybook・React Queryといった定番ライブラリの組み合わせ方が分かる
- Recoilを使った状態管理とReact Routerによるルーティングの基本を実装できる
- Jestによる単体テストとE2Eテストの書き方を押さえられる
- TypeScriptをReactに導入し、Next.js(App Router)で実アプリを作ってVercelへデプロイするまでを通しで経験できる
本書のキー概念(章解説)
- 第 1 章 イントロダクション — ReactとJavaScriptの関係、開発・実行環境、モダンJavaScriptの基本を整理する導入
- 第 2 章 Reactの基本 — はじめてのReactとJSXの基本。サンプルアプリの中身を読み解く
- 第 3 章 コンポーネント開発(基本) — Props / Stateの中核概念、条件分岐・繰り返し、イベント処理という土台
- 第 4 章 コンポーネント開発(フォーム) — フォーム操作と構造化データの更新、React Hook Formによる検証
- 第 5 章 コンポーネント開発(応用) — 組み込みコンポーネントとスタイル定義などの実践トピック
- 第 6 章 Reactライブラリの活用 — MUI・Storybook・React Queryなど定番ライブラリの組み合わせ
- 第 7 章 フックの活用 — 副作用フック・useRef・useReducer・useContext・Recoil・メモ化・useTransition・自作フックまで網羅する中核章
- 第 8 章 ルーティング — React Routerの基本と情報の受け渡し、各種テクニック
- 第 9 章 テスト — 単体テストとE2Eテストの基礎
- 第 10 章 TypeScriptの活用 — TypeScriptの基本とReactアプリへの導入
- 第 11 章 Next.jsの活用 — Next.jsの基本、App Router、応用アプリ「Reading Recorder」の作成とVercelデプロイまで
ハイライト
- たくさんのサンプルを動かしながら、Reactの機能を基礎からしっかり、さらにモダンJavaScript、TypeScript、Next.jsによる本格的なアプリ開発まで、この1冊で総合的に学べます。(本書のスコープ(基礎から本格アプリ開発まで一冊で完結する)が最も端的に表れている箇所)
- とことん丁寧でわかりやすく、開発に必要な応用力が身につけられる、必読の入門書です。最新 React 18以降／Next.js 13以降に対応(対応バージョンと、入門書でありながら応用力までを射程に入れている点を示す箇所)
編集メモ
著者は技術書執筆の実績が豊富で、約650ページにわたりReactの基礎からNext.js(App Router)までを体系的にカバーする実務向け入門書。特定Topicのデファクトと断定できる外部シグナル件数は本データ内に未取得のため practical と判定。
読む前に押さえておきたいこと
- 変数・関数・配列/オブジェクト操作・分割代入など、モダンJavaScript(ES2015以降)の基本構文
- HTML / CSSの基礎(コンポーネントのマークアップとスタイル定義を読むため)
- npm / Node.jsを用いた開発環境のセットアップに抵抗がないこと
学習のコツ
- 全11章のうちChapter 3〜7(コンポーネントとフック)が本書の背骨です。ここを手を動かして固めてから、6章のライブラリ群や8章以降に進むと定着しやすくなります。
- Chapter 11の応用アプリ「Reading Recorder」は学んだ要素の統合演習です。先に通読してから戻り、各機能がどの章の知識に対応するかを確認すると理解が深まります。
- TypeScript(Chapter 10)は後半に置かれているため、まずはJavaScriptで概念を掴み、二周目でTypeScript前提に読み替えると無理なく移行できます。
出版社による内容紹介
たくさんのサンプルを動かしながら、Reactの機能を基礎からしっかり、さらにモダンJavaScript、TypeScript、Next.jsによる本格的なアプリ開発まで、この1冊で総合的に学べます。 とことん丁寧でわかりやすく、開発に必要な応用力が身につけられる、必読の入門書です。 最新 React 18以降／Next.js 13以降に対応 Chapter 1 イントロダクション 1-1 ReactとJavaScript 1-2 Reactアプリを開発／実行するための基本環境 1-3 モダンJavaScriptの基本 Chapter 2 Reactの基本 2-1 はじめてのReact 2-2 サンプルアプリの内容を確認する 2-3 JSXの基本 Chapter 3 コンポーネント開発（基本） 3-1 コンポーネントを支える基本概念 - PropsとState 3-2 条件分岐と繰り返し処理 3-3 Props／Stateの理解を深める 3-4 より高度なイベント処理 Chapter 4 コンポーネント開発（フォーム） 4-1 フォーム操作の基本 4-2 Stateにおける構造化データの更新 4-3 検証機能の実装 - React Hook Form Chapter 5 コンポーネント開発（応用） 5-1 組み込みコンポーネント 5-2 コンポーネント開発でのスタイル定義 5-3 コンポーネントのその他の話題 Chapter 6 Reactライブラリの活用 6-1 典型的なUIを実装する - MUI 6-2 コンポーネントの見た目／動作をカタログ表示する - Storybook 6-3 外部サービスからデータを取得する - React Query Chapter 7 フックの活用 7-1 コンポーネント描画／破棄時に処理を実行する - 副作用フック 7-2 さまざまな値への参照を準備する - useRef関数 7-3 状態と処理とをまとめて管理する - useReducer関数 7-4 コンポーネントの複数階層で値を受け渡しする - useContext関数 7-5 ステート管理ライブラリ「Recoil」 7-6 関数、またはその結果をメモ化する - memo／useMemo／useCallback関数 7-7 優先順位の低いState更新を区別する - useTransition関数 7-8 フックの自作 Chapter 8 ルーティング 8-1 React Routerの基本 8-2 ルーター対応リンクの設置 8-3 ルーター経由で情報を受け渡しする手法 8-4 Routeコンポーネントの属性 8-5 ルーティングに関わるその他のテクニック Chapter 9 テスト 9-1 単体テスト 9-2 E2Eテスト Chapter 10 TypeScriptの活用 10-1 TypeScriptの基本 10-2 ReactアプリへのTypeScriptの導入 Chapter 11 Next.jsの活用 11-1 Next.jsの基本 11-2 App Routerの基本を理解する 11-3 応用アプリ「Reading Recorder」を作成する 11-4 アプリの実装を読み解く 11-5 Vercelへのデプロイ
この本がどの学習段階で役立つかは、 関連する ロードマップ から確認できます。