改訂新版 これからはじめる React 実践入門

React/Next.js による Web アプリケーション開発で役立つ力が身につく!

最新 React 19 以降 / Next.js 15 以降に対応!
たくさんのサンプルを動かしながら、React の機能を基礎からしっかり、さらにモダン JavaScript、TypeScript、Next.js による本格的なアプリ開発まで、この 1 冊で総合的に学べます。
丁寧でわかりやすく、開発に必要な応用力が身につけられる、必読入門書の改訂版です。

『改訂新版 これからはじめる React 実践入門』 (山田 祥寛 著、SB クリエイティブ、2025 年 9 月刊) は、React 19 以降と Next.js 15 以降に対応した、React によるアプリ開発の入門書の改訂版です。副題は「コンポーネントの基本から Next.js によるアプリ開発まで」です。版元の紹介文は、たくさんのサンプルを動かしながら React の機能を基礎から学び、モダン JavaScript、TypeScript、Next.js による本格的なアプリ開発までを 1 冊で総合的に扱う本として案内しています。

導入編、基本編、応用編に分かれた全 11 章の構成

目次は 3 つの編に分かれています。導入編は Chapter 1「イントロダクション」、Chapter 2「React の基本」、Chapter 3「コンポーネント開発 (基本)」の 3 章で、Chapter 1 では Vite、Node.js、Visual Studio Code による開発環境と、変数の宣言、分割代入、モジュール、非同期処理と fetch メソッドといったモダン JavaScript の基本を扱います。基本編は Chapter 4「コンポーネント開発 (フォーム)」、Chapter 5「コンポーネント開発 (応用)」、Chapter 6「React ライブラリの活用」、Chapter 7「フック (基本)」、Chapter 8「フック (応用)」の 5 章です。応用編は Chapter 9「テスト」、Chapter 10「TypeScript の活用」、Chapter 11「Next.js の活用」の 3 章です。

React は、画面をコンポーネントという部品に分け、親から受け取る Props と部品の中で持つ State から表示を組み立てる UI ライブラリです。State が変わるとコンポーネントが描画し直され、React が前回との差分だけを実際の画面に反映します。関数コンポーネントで State や副作用を扱う仕組みが フック で、useEffect、useMemo、useCallback はその関数です。Jotai は ステート管理 のライブラリです。

フォーム、UI ライブラリ、フックを扱う基本編

Chapter 4 は、フォーム操作の基本に続いて、Immer による構造化データの更新と、React Hook Form と Yup による入力の検証を扱います。Chapter 5 は、Suspense や Profiler などの組み込みコンポーネント、CSS Modules、Emotion、Motion によるスタイルとアニメーション、ポータルと Error Boundary を取り上げます。Chapter 6 は MUI、Storybook、SWR の 3 つのライブラリの活用です。Chapter 7 と Chapter 8 は、useEffect、useRef、useReducer、use の各関数とステート管理ライブラリの Jotai、memo、useMemo、useCallback によるメモ化、useTransition と useDeferredValue、useActionState、useOptimistic、useFormStatus、カスタムフックの自作を扱います。目次では、title / meta / link / script コンポーネントなどを扱う節と、useActionState などによるデータ更新を扱う節に「［19］」の印が付いています。

テスト、TypeScript、Next.js と Vercel を扱う応用編

Chapter 9 は、Vitest による単体テストと、非同期通信のモック化に使う MSW、E2E テストを扱います。Chapter 10 は、TypeScript の型アノテーションとデータ型から、Props、State、コンテキスト、Reducer、イベントハンドラー、fetch データへの型定義までです。Chapter 11 は、Next.js の基本と App Router のルートパラメーターを確かめたあと、応用アプリ「Reading Recorder」を作り、Prisma の準備や Google ブックス経由での書籍検索などの実装を読み解き、GitHub リポジトリと PostgreSQL データベースを用意して Vercel へデプロイするところまで進みます。このほか、ESLint、アプリ全体の例外処理、useSyncExternalStore フックなどを扱うコラムがあります。

Next.js は、React の上にルーティングとサーバー側での描画を加えたフレームワークです。App Router では app ディレクトリの中のフォルダー構成がそのまま URL の階層になり、ページやレイアウトをファイルの配置で定義します。

JavaScript と TypeScript の本の選び方は JavaScript / TypeScript 本ガイド にまとめています。本書は、開発環境とモダン JavaScript の基本から、コンポーネント、フォーム、ライブラリ、フック、テスト、TypeScript、Next.js によるアプリ開発とデプロイまでを全 11 章に収めています。