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

たくさんのサンプルを動かしながら、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 へのデプロイ

『これからはじめる React 実践入門』 (山田 祥寛 著、SB クリエイティブ、2023 年 9 月刊) は、多くのサンプルを動かしながら React の機能を基礎から学び、モダン JavaScript、TypeScript、Next.js による本格的なアプリ開発までを一冊で通す入門書です。副題は「コンポーネントの基本から Next.js によるアプリ開発まで」で、版元は React 18 以降と Next.js 13 以降への対応を案内し、「これからはじめる人はもちろん、知識を深めたい方にもお勧めの、入門書の決定版です」と紹介しています。React でコンポーネントを組み立てる基本から、ルーティング、テスト、型の導入、Next.js でのアプリ公開までを順に一通り経験したい人に向いた一冊です。

全 11 章の構成、JSX から App Router のアプリ開発まで

目次は Chapter 1 から Chapter 11 までの全 11 章です。Chapter 1 のイントロダクションで React と JavaScript の関係、開発と実行の基本環境、モダン JavaScript の基本を押さえ、Chapter 2 で JSX の基本までを扱います。Chapter 3 から Chapter 5 はコンポーネント開発を基本、フォーム、応用の 3 段に分け、Props と State、条件分岐と繰り返し処理、イベント処理、React Hook Form による検証機能の実装、スタイル定義などを順に取り上げます。Chapter 6 は MUI、Storybook、React Query というライブラリの活用、Chapter 7 は副作用フック、useRef、useReducer、useContext、ステート管理ライブラリの Recoil、memo と useMemo と useCallback、useTransition、フックの自作までを扱うフックの章です。後半は Chapter 8 の React Router によるルーティング、Chapter 9 の単体テストと E2E テスト、Chapter 10 の TypeScript の活用と続き、Chapter 11 で Next.js の基本と App Router を学んだうえで、応用アプリ「Reading Recorder」を作成し、Vercel へのデプロイまで進みます。版元の紹介では、Recoil やサーバーアクションにも触れると説明されています。

宣言的な UI と状態の置き場所、React 学習の要所

React の考え方の中心は、画面をある状態のときにどう見えるかの宣言として書き、状態が変わったら描画し直すという宣言的な UI です。手続き的に DOM を書き換える書き方から移ってきた人がつまずきやすいのは、どの値を状態として持つか、その状態をどのコンポーネントに置くかという設計の判断です。状態を上の階層に置けば多くの部品で共有できますが、受け渡しの経路が長くなり、変更のたびに描画し直す範囲も広がります。React は 変更のあった部分だけを画面へ反映する仕組み を内部に持っていますが、それでも不要な再描画や副作用の重複は、状態の置き方と依存関係の書き方で生じます。画面の数が増えたアプリでは、アプリ全体で共有する状態の扱い をどう分けるかが保守のしやすさを左右し、ライブラリの選択もこの判断の延長にあります。

2023 年刊の版の前提と、2025 年刊の改訂新版

本書が前提にしているのは React 18 以降と Next.js 13 以降です。同じ版元からは、React 19 以降と Next.js 15 以降に対応した『改訂新版 これからはじめる React 実践入門』が 2025 年 9 月 12 日に発売されています。また Recoil の GitHub リポジトリは 2025 年 1 月 1 日に所有者によってアーカイブされ、読み取り専用になっています。本書で Recoil を扱う節は、新しいプロジェクトで採用する前に保守の状況を確かめる前提で読むのが安全です。読み始めるには JavaScript の基本文法に一度触れておくと進めやすく、型の付け方まで含めて土台を固めたい場合は JavaScript と TypeScript の本の選び方 から補う方法もあります。

React 19 以降や Next.js 15 以降の環境で新しく学び始める人は、手元の環境との差が小さい改訂新版を選ぶほうが回り道を減らせます。一方で、React 18 と Next.js 13 の時期に作られたアプリを引き継いで保守する人や、すでに本書を手元に持っている人にとっては、コンポーネントの基本からフォーム、ライブラリ、ルーティング、テスト、型の導入、Next.js での公開までを一つの流れで確かめられる本書は、開発の全体像を通して押さえるための確かな一冊です。