メインコンテンツまでスキップ

この本について

本書は、モダンな 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ライブラリReact19.2+Actions、use hook、ref as a prop 等の新API
最適化コンパイラReact Compiler1.0+自動メモ化により手動のuseMemo/useCallbackを削減
ビルドツールVite8.xRolldown による高速ビルド、HMR、シンプルな設定
言語TypeScript6.0+型安全性、IDE支援、チーム開発の効率化
スタイリングTailwind CSS4.xCSS-first設定、@tailwindcss/viteプラグイン
状態管理Zustand5.x軽量、シンプルなAPI、ボイラープレート最小
データフェッチTanStack Query5.xSuspense統合、useSuspenseQuery、サーバー状態の分離
ルーティングReact Router7.xData Router（loader/action）、3モード対応
フォームReact Hook Form + Zod7.x + 4.x軽量、型安全なバリデーション
SSRフレームワークNext.js16.xApp Router、Server Components、Turbopack stable

バックエンド（フルスタック開発編で使用）​

カテゴリ採用技術バージョン選定理由
フレームワークNestJS11.xモジュール構造、DI、TypeScript ファースト
ORMPrisma7.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で開発環境を構築して、Reactの世界に踏み出しましょう！

次に読む​