React ガイド
このガイドについて
モダンな React 開発 (Vite + TypeScript + Tailwind CSS) を基礎から体系的に学ぶ 全 30 章のガイドです。JavaScript の前提知識からフルスタック実装まで、連続した流れで学べます。
このガイドの特徴
- 段階的: JavaScript ES6+ の前提から始め、JSX → コンポーネント → Hooks → 状態管理 → 発展 → フルスタックの順で学べる
- 技術スタック: Vite + TypeScript + Tailwind CSS + Zustand + TanStack Query + React Router を採用
- コード例重視: 各章で豊富な実装例と「なぜそうするか」の解説
- 演習問題と補足: 折りたたみ式の
<details>で詳細解説や補足情報を提供
ガイドの構造
学習の流れ
ガイドは 8 つのまとまりで構成され、基礎から実践へ順に進みます。
基礎準備 — 前提知識と環境 (第 1-3 章)
| # | 章 | 概要 |
|---|---|---|
| 01 | この本について | 本ガイドの狙いと読み進め方 |
| 02 | JavaScript 基礎 (ES6+) | React で頻出する ES6 以降の機能を先に確認する |
| 03 | 開発環境の構築 | Vite + React + TypeScript の環境を作る |
React 基礎 — コア要素 (第 4-11 章)
| # | 章 | 概要 |
|---|---|---|
| 04 | JSX の基本 | UI を記述するための JSX 構文 |
| 05 | コンポーネント | React の基本単位と分割の考え方 |
| 06 | Props | コンポーネントへのデータの渡し方 |
| 07 | State (useState) | コンポーネントが持つ状態の管理 |
| 08 | イベントハンドリング | クリックや入力などのイベント処理 |
| 09 | 条件分岐とリスト表示 | 条件に応じた描画と配列データの展開 |
| 10 | フォーム | 入力値の扱いと制御コンポーネント |
| 11 | Zod でスキーマバリデーション | 型推論・React Hook Form 連携・API レスポンスの実行時検証 |
Hooks 詳細 — 関数コンポーネントの設計 (第 12-16 章)
| # | 章 | 概要 |
|---|---|---|
| 12 | useEffect | 副作用の扱いとクリーンアップ |
| 13 | useRef と DOM 操作 | DOM への直接アクセスと値の保持 |
| 14 | useContext | コンポーネントツリー全体でのデータ共有 |
| 15 | useReducer | 複雑な状態ロジックの集約 |
| 16 | カスタムフック | ロジックを再利用可能な形へ抽出する |
UI・スタイリング — 見た目の設計 (第 17-19 章)
| # | 章 | 概要 |
|---|---|---|
| 17 | スタイリング概要 | 各手法の特徴と使い分け |
| 18 | Tailwind CSS (React 統合パターン) | variants 設計・clsx / tailwind-merge・shadcn/ui との連携 |
| 19 | Portal と Modal | createPortal によるモーダルの実装 |
状態管理・データ取得 — 大規模化への準備 (第 20-22 章)
| # | 章 | 概要 |
|---|---|---|
| 20 | 状態管理 (Zustand) | 軽量なグローバル状態管理 |
| 21 | データフェッチング (TanStack Query) | サーバー状態のキャッシュと同期 |
| 22 | ルーティング (React Router) | SPA のページ遷移設計 |
発展的トピック — 実務で役立つ知識 (第 23-26 章)
| # | 章 | 概要 |
|---|---|---|
| 23 | パフォーマンス最適化 | 再レンダリングの抑制と計測 |
| 24 | デバッグ | React Developer Tools を使った原因の切り分け |
| 25 | クラスコンポーネント | 既存コードの読解と Error Boundary |
| 26 | Next.js 入門 | フルスタックフレームワークとしての位置づけ |
総合演習 — 実装プロジェクト (第 27 章)
| # | 章 | 概要 |
|---|---|---|
| 27 | 実践プロジェクト | 学んだ知識でタスク管理アプリを構築する |
フルスタック開発 — フロント + バック統合 (第 28-30 章)
| # | 章 | 概要 |
|---|---|---|
| 28 | SPA 認証の設計 | トークンの保持とルート保護 |
| 29 | NestJS と Prisma でバックエンド構築 | SPA 向け API とデータ層の構築 |
| 30 | フルスタック実践プロジェクト | React + NestJS + Prisma で Trello ライクなアプリを作る |
推奨される読み方
- 初学者: 上から順番に読み、各章のコードを実際に動かしながら進める
- 既習者: Hooks 詳細や状態管理のまとまりから拾い読みでも OK
- 特定トピックを深掘りしたい: 上の表から該当する章を直接開く
- 業務で使うパターンだけ知りたい: Tailwind / 状態管理 + データフェッチ / パフォーマンス + デバッグ が中心
学習ガイドの棲み分け
本ガイドは React のフレームワーク学習 に focus しています。UI・スタイリングの Tailwind を深掘りしたい場合は、姉妹ガイドの Tailwind CSS ガイド (全 18 章) を参照してください。
| 連載 | Focus | 段階 | 前提 | 例 |
|---|---|---|---|---|
| JavaScript ガイド | 言語仕様 (JS) | 入門 | なし | 「アロー関数と this の挙動」 |
| TypeScript ガイド | 言語仕様 | 入門〜中級 | JS 基礎 | 「Mapped Types の使い方」 |
| React ガイド (本ガイド) | フレームワーク | 入門〜中級 | HTML/CSS + JS 基礎 | 「useEffect の依存配列」 |
| Tailwind CSS ガイド | CSS スタイリング | 入門〜中級 | HTML/CSS 基礎 | 「@theme で色を追加」 |
| クリーンコードガイド | 設計規範 | 中級以上 | TS 基礎 | 「any を unknown + 型ガードに」 |
| TypeScript デザインパターン | 設計カタログ | 中級以上 | TS + OOP 基礎 | 「Strategy は関数で足りるか」 |
各ガイドは 補完関係 にあります。言語の土台を JavaScript ガイドで固め、言語仕様を TypeScript ガイドで身につけます。その上で UI を React ガイドで組み立て、スタイリングを Tailwind CSS ガイドで磨きます。コード品質をクリーンコードガイドで底上げし、設計の選択肢を TypeScript デザインパターンで広げる、という流れが想定動線です。
それでは はじめに から始めましょう。