React — 入門から Next.js · TypeScript · フルスタックまで 本の表紙
本

React — 入門から Next.js · TypeScript · フルスタックまで

React 19 + App Router + TypeScript 優先、一冊で完結するReact

連載中 35章最終更新: 2026年5月19日
第1章から始める →

1 〜 34章 + 付録 A までの35章すべてをサイト上でそのまま読めます。どの章から始めても構いませんし、下の「おすすめ開始点」で自分の背景に合う出発点をご案内します。

この本が扱うこと #

  1. 2026年時点の React 標準 — function component と hooks のみ。クラスコンポーネント・componentDidMount・Redux-only・Pages Router は本文に登場しません。App Router と Server Components を基本モデルにします。
  2. TypeScript 優先 — すべての例コードに型を併記します。props・フック・イベント・フォーム・API レスポンスの型付けを最初から扱います。
  3. 入門からフルスタックまで途切れないカーブ — JSX から Server Actions・認証・デプロイ・観測性まで、同じトーンで続きます。
  4. 運用を避けない — テスト・パフォーマンス・認証・デプロイ・観測性のように「実際の現場で必要になる」領域を、入門書の最後で扱います。
  5. 最後に一つのフルスタックアプリにまとめる — 6部キャップストーンで、1 〜 33章のすべての道具が一つの Todo アプリの中でどうかみ合うかを13ステップで示します。

この本が扱わないこと #

  • React Native・Remix・TanStack Start のような他のメタフレームワーク — 別の本で扱います。
  • デザインシステム・アニメーション・WebGL のようなドメイン応用 — 別の本で扱います。
  • クラスコンポーネント・componentDidMount・Redux Saga・Pages Router のような旧スタイル — 旧React 基礎講座15編がそのまま残っています。旧コードベースから移ってくる方は 付録 A を最初に読んでください。
  • 全ライブラリの網羅 — 本文は一つの答えを断定します。代替の比較は付録または別記事で扱います。

こんな方におすすめです #

  • React を初めて学ぶ方 — 「App Router・Server Components・React 19 が無い」既存の入門書に物足りなさを感じている入門者。最初からモダンスタックで始めます。
  • 旧 React(Pages Router・クラスコンポーネント・Redux-only)は知っているが、最新の流れにはまだ慣れていない方 — 2019 〜 2022 年に学んで止まっていた方。付録 A の旧 React マイグレーションガイドが出発点になります。
  • 他のフレームワーク(Vue・Angular・Svelte)から React に移ってくる方 — 入門部を素早く飛ばし、3 〜 6部で核心を吸収できます。TypeScript 優先なので入り口の負担が少なめです。
  • サイドプロジェクト・一人フルスタック開発者 — バックエンド・フロントエンドの分業なしに一人がフルスタックを担う方。RSC + Server Actions モデルが最大の価値を発揮します。

次のような方には本書が合わないかもしれません。

  • すでに React 19 + App Router で本番運用中の方 — 本文は入門 〜 中上級です。すでに手に馴染んでいる方は、付録 A のマイグレーション整理くらいを参考資料に使えます。
  • 2026 時点で旧スタイルを維持する必要があるコードベースの担当者 — Pages Router・クラスコンポーネントをしばらく維持する環境であれば、旧講座シリーズの方が合います。

本書の構成 — 6部35章を一目で #

全体の分量は本文 1 〜 34章 + 付録 A 1章の計35章です。各部の終わりで「手に残るもの」を一行にまとめています。

  • 1部 React はじめに(9章) — JSX・コンポーネント・props・state・イベント・フォーム。小さなインタラクティブページを自力で作れます。
  • 2部 エフェクト・状態・ルーティング(6章) — useEffect・状態のリフトアップ・Context・カスタムフック・パフォーマンス最適化・ルーティング。複数ページアプリへ拡張します。
  • 3部 TypeScript と一緒に(6章) — props・フック・イベント・フォーム・Context・fetch レスポンスの型付け。すべてのコードに型を添える感覚が自然に身につきます。
  • 4部 モダン Next.js(7章) — Why Server Components・App Router・Server vs Client・データフェッチとキャッシュ・Suspense・Server Actions・React 19 新機能。フルスタック React の標準モデルを身につけます。
  • 5部 運用・テスト・デプロイ(5章) — Vitest・Playwright・パフォーマンスと Web Vitals・認証とセッション・デプロイと観測性。リリース前後に必要な道具を一度に身につけます。
  • 6部 総合実習(1章) — フルスタック Todo アプリのキャップストーン。1 〜 33章のすべての道具が13ステップの PR 単位で一つのサービスの中でかみ合います。
  • 付録 A(1章) — 旧 React コードのマイグレーション。Class → function + hooks、Pages → App Router、Redux-only → RSC + Server Actions、fetch-on-mount → RSC fetch、PropTypes → TS、そして大規模コードベース用の6段階段階手順。

学習パス — どこから始めるか #

背景によっておすすめの開始点が変わります。

  • React を初めて学ぶ方 — 1章から順に。1 〜 2部で小さなアプリを身につけたあと、3部の TypeScript で同じコードを型と一緒に書き直します。4 〜 5部では運用環境まで扱い、6部キャップストーンで最終目標を完成させます。
  • 旧 React を知っている方 — 付録 A を先に読むと、これまで使ってきた旧コードのスタイルが本文とどう繋がるかを一目で確認できます。そのあと4 〜 6部(App Router・RSC・Server Actions・キャップストーン)を読むと、最大の価値を得られます。1 〜 3部は素早く復習する形で構いません。
  • 他フレームワーク出身 — 1部(JSX・コンポーネントモデル)は1時間ほどで軽く目を通し、3部(TypeScript)を経て4部(Next.js + RSC)に直行してください。5 〜 6部で実戦の道具に出会えば、いま使っているフレームワークの対応概念と比較しやすいです。

平均的な所要時間の目安は次のとおりです(コードを手で書き写す前提)。

領域時間
1 〜 2部(入門 〜 ルーティング)約 20 〜 25 時間
3部(TypeScript)約 8 〜 10 時間
4部(App Router + RSC)約 12 〜 15 時間
5部(運用ツール)約 8 〜 10 時間
6部キャップストーン約 10 〜 15 時間(自分で PR 単位で進める場合)
付録 A約 3 〜 4 時間(参考 + 手を動かして)
合計約 60 〜 80 時間

1日2時間なら1ヶ月、週末に集中して2ヶ月で1サイクル可能です。キャップストーンを PR 単位でもっとゆっくり進める方も多いです。

おすすめ開始点 — どこから始めるか #

35章すべて自由に読めますが、「どこから始めればよいか」迷う方のために3つの開始点をおすすめします。

  • 1章 React とは何か、なぜ作られたか — 本書の出発点。React とは何か、2026 時点でなぜ依然としてフロントエンドの標準として残っているのかを整理します。入門者の方が最初に開く章です。
  • 28章 React 19 新機能まとめ — Actions・useActionState・useOptimistic・use()・ref-as-prop・<form action> のような React 19 の核心変更を1ページにまとめた章です。モダンの流れが気になる方にもっとも直接的な章です。
  • 付録 A 旧 React コードマイグレーション — Class → function、Pages → App Router、Redux-only → RSC + Server Actions、fetch-on-mount → RSC fetch、PropTypes → TS。旧 React ユーザー が本書から最大の価値を得る章です。

この3章は各々の開始点の役割を担います。気になる章から自由に開いてみてください。

本書の元になったシリーズ #

本書は次のシリーズ32編をベースに、新規8章と全面改訂を加えて再構成した本です。下のシリーズは今もサイト上に無料で残っています。

  • React 基礎講座15編 — 2019 〜 2022 時代の入門シリーズ。クラスコンポーネントと Pages Router をそのまま保存しています。本書の1 〜 2部と流れは似ていますが、旧スタイルを扱う視点の差は明確です。
  • TypeScript + React 実戦6編 — 3部のコンパイル元。本書では同じトピックを React 19 と付録 A のマイグレーションヒントと一緒に書き直します。
  • モダン React + Next.js 6編 — 4部のコンパイル元。App Router・Server Components・Server Actions の最初の整理。
  • React で Todo アプリを作る5編 — 6部キャップストーンのモチーフ。単純なクライアント Todo がフルスタック Todo にどう変形するかを本書で比較できます。

本書は上のシリーズを入門から実戦まで繋がるよう再構成し、テスト・パフォーマンス・認証・デプロイ・フルスタックキャップストーンの章を追加して一冊にまとめました。核心は 30%以上の新規/改訂 + フルスタックキャップストーン です。

本書の運営について #

本書はサイトの広告(AdSense)と読者の応援によって運営されています。決済・購入手続きは設けておらず、35章の本文はサイト上でそのままお読みいただけます。

本書のどこかが役に立ったと感じたら、Ko-fi で応援いただけると嬉しいです。応援は次の minor 改訂と後続の本を執筆する時間につながります。

❤️ Ko-fi で応援する($1〜)

よくある質問 #

学習環境として何が必要ですか #

Node.js 20 以上、pnpm(または npm / yarn)、そしてコードエディタが一つあれば十分です。4 〜 5部の DB・認証・デプロイ章では無料枠内で使えるサービス(Turso または Cloudflare D1、GitHub OAuth、Vercel、Sentry、PostHog)のみ使用します。決済が発生する段階は本文中にありません。

本書のコードはどこで受け取れますか #

各章の例コードは本文中のコードブロックに直接書かれているので、手で書き写す学習方式を推奨します。6部キャップストーンの13ステップ完成版は GitHub リポジトリで別途提供予定です。準備ができたら本書紹介ページにリンクを追加します。

React 19 / Next.js 15 の次バージョンが出たら本書は廃棄されますか #

核心モデル(function + hooks、App Router、RSC + Server Actions、TypeScript first)は少なくとも次の2 〜 3メジャーバージョンの間そのまま維持される見通しです。変更された API が累積したら本書の minor 改訂(例:v1.1)で反映し、メジャーバージョン(例:React 20)リリース時点では v2 本のラインを別途始められます。

韓国語以外の言語でも読めますか #

ko が1次です。ja・en の整合は別マイルストンで計画されています。3言語すべて同じ本の構成(35章)を維持します。

本書の1章がサイトの1記事と70%以上同じではありませんか #

一部の章はコンパイル元シリーズ記事とトピックが同じです。ただし本書の章は (1) 本書の流れに合わせて再記述、(2) React 19 + App Router + TypeScript 基準で統一、(3) 本書内の他章と cross-link、(4) 演習問題と一行まとめを追加して書き直しているので、同じトピックでも結果物は別資料に近いです。重複の大きい章は SEO 衝突がないよう canonical 処理で分離します。

フィードバック・応援はどう送ればよいですか #

フィードバックは ブログのコメントまたはメール で歓迎します。章ごとの誤字・改善提案・コード誤りの報告は次の minor 改訂に素早く反映されます。応援は Ko-fi チャネルを設けており、$1 から自由にお寄せいただけます。

次のステップ #

本書の ko 35章はすべて公開済みです。今後の更新は次のように進めます。

  1. v1 本文の安定化 — リリース後4 〜 8週間、読者フィードバックを受け取り、誤字・コード誤り・不十分な説明を minor 改訂(v1.x)で反映します。
  2. 6部キャップストーン GitHub リポジトリ — 13ステップ完成版を別リポジトリに整理し、本書紹介ページにリンクを追加します。
  3. ja・en 整合 — 同じ35章構成で翻訳します。ko リリース後、別マイルストンで進めます。
  4. React・Next.js のメジャーバージョンリリース対応 — minor 改訂を累積したあと、v2 本のラインを開始する時点を決めます。

新章・メジャー改訂の通知は RSS フィードで受け取れます。

目次

1部 React はじめに 9 章

JSX・コンポーネント・State・イベント・フォーム。入門者が手に覚えさせるべき9つのトピック。

  1. 1. React とは何か React が何であり、なぜ作られたのかを整理し、2026 時点でなぜ依然として(そしてどのように)フロントエンドの標準として残っているのかをまとめます。本書の出発点です。
  2. 2. 開発環境の設定(Node.js + Vite) Node.js と pnpm をインストールし、Vite で最初の React プロジェクトを作って dev server を立ち上げます。本書のすべての例コードはこの環境の上で動作します。
  3. 3. JSX の本質 JSX とは何で、どのように JavaScript の関数呼び出しに変換されるのか、そして式・属性・子ノードのルールを一気に扱います。
  4. 4. コンポーネントと props 関数コンポーネントを作り、props でデータを流す基本パターンを見ていきます。17 章で TypeScript によって固めるインターフェースの土台です。
  5. 5. State と useState React が再描画する単位としての state。useState の正確なモデルと関数型更新、オブジェクト state の更新パターンを見ていきます。
  6. 6. イベントハンドリング React の合成イベントシステムとイベントハンドラの書き方、引数の渡し方、よくある落とし穴を見ていきます。19 章 イベントの型付けと 27 章 Server Actions の土台です。
  7. 7. 条件付きレンダリング if・三項・&&・null 返しで UI を分けるパターンとよくある落とし穴 — 特に `&&` の左側の数値 0 の罠を整理します。
  8. 8. リストと key 配列をコンポーネントにマッピングするパターンと key の意味、そしてインデックスを key として使うと壊れる実際の例を見ていきます。
  9. 9. フォームの扱い(controlled inputs) React でフォームを扱う定石パターンである controlled component を見ていきます。textarea・select・checkbox・radio もすべて同じモデルで扱う方法まで。
2部 エフェクト・状態・ルーティング 6 章

useEffect・状態のリフトアップ・useContext・カスタムフック・パフォーマンス最適化・ルーティング。小さなページから複数ページアプリへ。

  1. 10. useEffect — 使うべきタイミングと避けるべきタイミング 副作用の定義、依存配列、cleanup の役割、そして useEffect を使うべきでない場合を一緒に整理します。
  2. 11. 状態のリフトアップ(lifting state up) 2つの兄弟コンポーネントが同じデータを共有するときに使う核心パターン。いつリフトアップし、いつしないか、そして12章 useContext への自然な橋渡しまで扱います。
  3. 12. useContext — 向いている場合と向いていない場合 prop drilling を解決する Context API。使い方の3ステップ・value 分離パターン・外部の状態ライブラリとの境目まで扱います。
  4. 13. カスタムフック ロジック再利用の標準的な道具。良いフックのインターフェイスの形、よく作るパターン、そしてフックに切り出すべきでない場合まで整理します。
  5. 14. パフォーマンス最適化(memo · useMemo · useCallback · そして React Compiler) memo / useMemo / useCallback の役割とよくある誤用を整理し、React Compiler 導入後に何が変わり何がそのまま残るかまで整理します。
  6. 15. ルーティング概要(React Router) SPA のルーティング概念、React Router v7 の基本的な使い方、そして4部の Next.js App Router との動作方式比較を一度に扱います。
3部 TypeScript と一緒に 6 章

props・フック・イベント・フォーム・Context・fetch レスポンスの型付け。すべてのコードに型を添える感覚。

  1. 16. TypeScript + React セットアップ Vite + TypeScript セットアップ、tsconfig の主要オプション、最初の .tsx ファイルまで。本書3部の土台を作ります。
  2. 17. props と children のタイピング props 型の定義パターン、ReactNode と ReactElement と JSX.Element の違い、PropsWithChildren を使う場面、discriminated union まで一度に扱います。
  3. 18. hooks のタイピング — useState · useReducer · useRef ビルトインフックの型推論と明示する場面。useReducer の discriminated union アクション、useRef の 2 つの用途(DOM ref と値保管)、そして React 19 の ref-as-prop までを扱います。
  4. 19. イベントとフォームのタイピング ChangeEvent · FormEvent · KeyboardEvent と入力ハンドラの型、controlled · uncontrolled フォームの TypeScript パターン、そして 27章 Server Actions の FormData の土台まで扱います。
  5. 20. Context とジェネリックコンポーネント Context の型安全性パターン(null + ラッパーフック)、state · dispatch の分離、ジェネリックコンポーネント、そして多態コンポーネントの as prop まで一度に扱います。
  6. 21. fetch と API レスポンスのタイピング 外部データを安全に扱う流れ — fetch は unknown、zod スキーマで検証と型を同時に。さらに RSC 環境で fetch が持つ意味まで押さえ、4部へとつなげます。
4部 モダン Next.js 7 章

App Router・Server Components・データフェッチとキャッシュ・Suspense・Server Actions・React 19 新機能。フルスタック React の標準モデル。

  1. 22. なぜ Next.js と Server Components なのか クライアントサイド React の限界と Server Components が解決する問題、CSR・SSR・RSC の違いを整理します。本書全体の転換点となる章です。
  2. 23. Next.js の開始と App Router Next.js 15 プロジェクトを作り、App Router のファイルベースルーティングと layout システムを手に馴染ませます。ファイル規約(page・layout・loading・error・not-found・route group)を一度に扱います。
  3. 24. Server Components vs Client Components 2 種類のコンポーネントの違い、`use client` ディレクティブの正確な意味、両方を混ぜて使うパターン(サーバーがクライアントを import / クライアントがサーバーを children として受け取る)、そして props シリアライズ制約まで。
  4. 25. データフェッチとキャッシュ Server Component で `async / await` でデータを直接取ってくるパターン、Next.js 15 の fetch キャッシュオプション(`force-cache` / `no-store` / `revalidate`)、ルートレベルのオプション、そして並列フェッチと `error.tsx` まで。
  5. 26. Suspense と use() でローディング処理 Suspense の境界モデルで streaming レンダリングを作り、`loading.tsx`・skeleton fallback・React 19 で安定化された `use()` フックまで整理します。
  6. 27. Server Actions とフォーム Server Actions で API ルートなしに mutation を処理し、React 19 の `useActionState`・`useFormStatus`・`useOptimistic` で UX を整えるパターン。第4部締めくくりのミニプロジェクト(ゲストブック)まで。
  7. 28. React 19 新機能まとめ Actions・useActionState・useFormStatus・useOptimistic・use()・React Compiler・ref as prop。第22~27章に散らばって登場した React 19 新機能を一か所にまとめて整理します。
5部 運用・テスト・デプロイ 5 章

Vitest・Playwright・パフォーマンスと Web Vitals・認証とセッション・デプロイと観測性。実際の現場で必要になる領域。

  1. 29. コンポーネントテスト — Vitest + Testing Library Vitest + React Testing Library でコンポーネントとフックをテスト。render・userEvent・モッキングのパターン、Next.js 環境での注意点、CI 統合まで。
  2. 30. E2E テスト — Playwright Playwright で実ブラウザのフルシナリオを自動化。セットアップ、locator のルール、認証 storageState、ページオブジェクトパターン、flaky への対処、CI 統合と視覚回帰まで。
  3. 31. パフォーマンス・バンドル・Web Vitals Core Web Vitals(LCP・INP・CLS)の測定と改善。Lighthouse・バンドル分析・code splitting・RSC streaming・next/image・next/font・INP 最適化まで。
  4. 32. 認証とセッション — Auth.js v5 / OAuth / JWT JWT と DB session の選択基準、Auth.js v5 セットアップ、Credentials と OAuth プロバイダ、RSC・Client・Server Action・middleware の4箇所でセッションを読むパターン。
  5. 33. デプロイと観測性 — Vercel・Cloudflare Pages・Sentry・PostHog Next.js を Vercel と Cloudflare Pages にデプロイ、preview deploy、環境変数、Sentry でエラー追跡、PostHog でプロダクト分析。リリース後4週間のための道具一式。
6部 総合実習 1 章

RSC + Server Actions + DB + 認証 + テストでフルスタック Todo アプリを完成。

  1. 34. 総合実習 — フルスタック Todo アプリの完成 1 〜 33章のパターンを一つの動作するフルスタックサービスに繋ぎます。RSC・Server Actions・DB・認証・テストまで。
付録 1 章

旧 React(クラス・Pages Router・Redux-only)コードをモダンスタイルに移すためのガイド。

  1. 100. 旧 React コードのマイグレーション Class component / Pages Router / Redux-only / fetch-on-mount のような旧スタイルコードを本書の modern スタイルに移すガイド。
X