この本について
本書は、モダンな React 開発を基礎から体系的に学ぶための入門書です。JavaScript の基礎から React の高度なトピックまで、実践的なスキルを段階的に身につけることができます。
なぜReactなのか？
React は 2013 年に Facebook が公開した UI ライブラリで、現在も世界で最も人気のあるフロントエンドフレームワークの 1 つです。
Reactの特徴
| 特徴 | 説明 |
|---|---|
| コンポーネントベース | UIを再利用可能な部品（コンポーネント）として構築 |
| 宣言的なUI | 「どう見えるべきか」を記述するだけでReactが更新を管理 |
| 仮想DOM | 効率的なDOM更新による高いパフォーマンス |
| 巨大なエコシステム | 豊富なライブラリとコミュニティサポート |
| React Native | 同じ知識でモバイルアプリも開発可能 |
この本で学べること
本書は次の 8 つのまとまりで、基礎から実践へ順に構成されています。
基礎準備（Chapter 1-3）
- 本書の概要と学習の進め方
- JavaScript（ES6+）の必須知識の復習
- Vite + React + TypeScript の開発環境構築
React基礎（Chapter 4-10）
- JSX の基本と内部動作
- コンポーネントの作成と分割
- Props によるデータの受け渡しと TypeScript 型定義
- State による状態管理
- イベントハンドリング
- 条件分岐とリスト表示
- フォームの作成と制御
Hooks詳細（Chapter 11-15）
- useEffect による副作用の管理
- useRef と DOM 操作
- useContext によるグローバル状態
- useReducer による複雑な状態管理
- カスタムフックの作成
UI・スタイリング（Chapter 16-18）
- CSS スタイリング手法の比較
- Tailwind CSS によるユーティリティファースト CSS
- createPortal によるモーダル実装
状態管理・データ取得（Chapter 19-21）
- Zustand によるグローバル状態管理
- TanStack Query によるサーバー状態管理
- React Router によるルーティング
発展的トピック（Chapter 22-25）
- パフォーマンス最適化（React Compiler による自動メモ化、memo、useMemo、useCallback）
- デバッグと React Developer Tools
- クラスコンポーネントと Error Boundary
- Next.js 入門
総合演習（Chapter 26）
- 学んだ知識を活かした実践的なプロジェクト
フルスタック開発（Chapter 27-29）
- SPA 認証（JWT + HttpOnly Cookie）
- NestJS + Prisma によるバックエンド構築
- フルスタック実践プロジェクト（Trello 風タスク管理アプリ）
モダンな React 開発スタック
本書では、現在の React エコシステムでデファクトスタンダードとなっている技術を採用しています。バージョンは執筆時点の安定版を基準にしています。
フロントエンド
| カテゴリ | 採用技術 | バージョン | 選定理由 |
|---|---|---|---|
| UIライブラリ | React | 19.2+ | Actions、use hook、ref as a prop などの新API |
| 最適化コンパイラ | React Compiler | 1.0+ | 自動メモ化により手動のuseMemo/useCallbackを削減 |
| ビルドツール | Vite | 8.x | Rolldown による高速ビルド、HMR、シンプルな設定 |
| 言語 | TypeScript | 6.0+ | 型安全性、IDE支援、チーム開発の効率化 |
| スタイリング | Tailwind CSS | 4.x | CSS-first設定、@tailwindcss/viteプラグイン |
| 状態管理 | Zustand | 5.x | 軽量、シンプルなAPI、ボイラープレート最小 |
| データフェッチ | TanStack Query | 5.x | Suspense統合、useSuspenseQuery、サーバー状態の分離 |
| ルーティング | React Router | 7.x | Data Router（loader/action）、3モード対応 |
| フォーム | React Hook Form + Zod | 7.x + 4.x | 軽量、型安全なバリデーション |
| SSRフレームワーク | Next.js | 16.x | App Router、Server Components、Turbopack stable |
バックエンド（フルスタック開発編で使用）
| カテゴリ | 採用技術 | バージョン | 選定理由 |
|---|---|---|---|
| フレームワーク | NestJS | 11.x | モジュール構造、DI、TypeScript ファースト |
| ORM | Prisma | 7.x | 型安全なクエリ、schema-first、マイグレーション |
対象読者
- JavaScriptの基本文法を理解している方
- これから React を学びたい方
- 他のフレームワークから React に移行したい方
- モダンなフロントエンド開発を学びたい方
前提知識
以下の知識があると、よりスムーズに学習を進められます。
必須
- HTML/CSS の基礎
- JavaScript の基本文法（変数、関数、配列、オブジェクト）
あると望ましい
- ES6+の構文（Chapter 2 で復習します）
- コマンドライン操作の基本
- Git/GitHub の基本操作
TypeScript は本書内で必要な知識を随時解説します。TypeScript 未経験の方でも学習を進められます。
学習の進め方
1. 手を動かしながら学ぶ
本書のコードは、コピー&ペーストせず必ず自分で入力して、動作を確認してください。そのほうが理解が深まります。
2. エラーを恐れない
プログラミング学習ではエラーは必ず発生します。エラーメッセージを読む習慣をつけましょう。本書では Chapter 23 でデバッグ方法も解説します。
3. 疑問点は深掘りする
わからないことがあれば、公式ドキュメントや MDN Web Docs を参照しましょう。
4. 段階的に進める
各章は前の章の知識を前提として構成されています。わからない部分があれば、前の章に戻って復習することをお勧めします。
本書で使用するアイコン
本書では以下のアイコン付きブロックを使用します。
補足情報や参考になる Tips を示します。
注意が必要な点や、よくある間違いを示します。
詳細情報
クリックで展開される追加情報です。理解を深めたい方向けの内容を記載しています。
サンプルコードについて
本書のサンプルコードは、実際に手を動かしながら学べるよう設計されています。
// このようなコードブロックは、実際に入力して動作確認できます
const App = () => {
return <h1>Hello, React!</h1>
}
次のステップ
それでは、Chapter 2 で React 開発に必要な JavaScript（ES6+）の知識を確認し、Chapter 3 で開発環境を構築しましょう。