React 入門
このガイドについて
モダンな React 開発 (Vite + TypeScript + Tailwind CSS) を基礎から体系的に学ぶ 全 30 章のガイドです。JavaScript の前提知識からフルスタック実装まで、連続した流れで学べます。
このガイドの特徴
- 段階的: JavaScript ES6+ の前提から始め、JSX → コンポーネント → Hooks → 状態管理 → 発展 → フルスタックの順で学べる
- 技術スタック: Vite + TypeScript + Tailwind CSS + Zustand + TanStack Query + React Router を採用
- コード例重視: 各章で豊富な実装例と「なぜそうするか」の解説
- 演習問題と補足: 折りたたみ式の
<details>で詳細解説や補足情報を提供
ガイドの構造
学習の流れ
ガイドは 8 つのまとまりで構成され、基礎から実践へ順に進みます。
| まとまり | テーマ | 章数 | 概要 |
|---|---|---|---|
| 基礎準備 | 前提知識と環境 | 3 | はじめに / JavaScript ES6+ / 開発環境 (Vite + TS) |
| React 基礎 | コア要素 | 8 | JSX / コンポーネント / Props / State / イベント / 条件分岐 / フォーム / Zod |
| Hooks 詳細 | 関数コンポーネントの設計 | 5 | useEffect / useRef / useContext / useReducer / カスタムフック |
| UI・スタイリング | 見た目の設計 | 3 | スタイリング概要 / Tailwind CSS / Portal と Modal |
| 状態管理・データ取得 | 大規模化への準備 | 3 | Zustand / TanStack Query / React Router |
| 発展的トピック | 実務で役立つ知識 | 4 | パフォーマンス / デバッグ / クラスコンポーネント / Next.js 入門 |
| 総合演習 | 実装プロジェクト | 1 | 実践プロジェクト (タスク管理アプリ) |
| フルスタック開発 | フロント + バック統合 | 3 | SPA 認証 / NestJS + Prisma / フルスタックプロジェクト |
推奨される読み方
- 初学者: 上から順番に読み、各章のコードを実際に動かしながら進める
- 既習者: Hooks 詳細や状態管理のまとまりから拾い読みでも OK
- 特定トピックを深掘りしたい: 上の表から該当する章を直接開く
- 業務で使うパターンだけ知りたい: Tailwind / 状態管理 + データフェッチ / パフォーマンス + デバッグ が中心
4 つの学習ガイドの棲み分け
本サイトには 4 つの体系学習ガイドがあります。本ガイドは React のフレームワーク学習 に focus しています。UI・スタイリングの Tailwind を深掘りしたい場合は、姉妹ガイドの Tailwind CSS ガイド (全 18 章) を参照してください。
| 軸 | React 入門 (本ガイド) | TypeScript Master Guide | Tailwind CSS ガイド | Clean Code |
|---|---|---|---|---|
| Focus | フレームワーク | 言語仕様 | CSS スタイリング | 設計規範 |
| 段階 | 入門〜中級 | 入門〜中級 | 入門〜中級 | 中級以上 |
| 前提 | TS + JS | JS 基礎 | HTML/CSS 基礎 | 言語不問 |
| 例 | 「useEffect の依存配列」 | 「Mapped Type の使い方」 | 「@theme で色を追加」 | 「any を unknown + 型ガードに」 |
4 ガイドは 補完関係 にあります。型を TypeScript Master Guide で固め、UI を React 入門 で組み立てます。スタイリングを Tailwind CSS ガイドで磨き、コード品質を Clean Code で底上げする、という流れが想定動線です。
それでは はじめに から始めましょう。