0.1 このサイトの歩き方

ようこそ。このページでは、これから一緒に歩いていく道筋をざっと紹介します。最初に地図を見ておくと、どこを歩いているかが分かって迷いにくくなります。

まず、このサイトで伝えたいことを 1 行で言います。

React を「なぜそう書くのか」まで腑に落ちた状態で、案件に入れるようにする。

読者としては、HTML / CSS を学習中で、JavaScript の基本問題をいくつか解いた経験があり、TypeScript はこれから学ぶ、という方を想定しています。Git は使える、Node.js / npm は未経験、というラインです。もし「ちょっと自分の前提と違うな」と感じても、該当する章だけ飛ばして大丈夫です。

このサイトが扱うこと、扱わないこと

公式ドキュメント react.dev は、API の網羅的なリファレンスと丁寧なチュートリアル (Learn) が揃っています。本サイトは公式の置き換えではなく、役割分担 をするイメージで作っています。手順の詳細や API の完全な仕様は公式に任せ、本サイトは次の 4 つに集中します。

1. 歴史と動機 — React がなぜ 2013 年に Facebook から生まれ、なぜ 2026 年の現在まで広く使われているのかを、Web フロントエンド全体の流れの中で捉えます。
2. Vanilla JS との対比 — React を使わずに同じ UI を書くとどうなるかを手を動かして体験し、React が「何を肩代わりしているか」を身体に入れます。
3. メンタルモデル — API の使い方を列挙するのではなく、「なぜそう設計されているか」「どう考えれば自分で判断できるか」に紙面を割きます。
4. 案件ブリッジ — 実際の受託案件で出会うエコシステム (状態管理、データフェッチ、スタイリング、テスト) の地図を示し、公式ドキュメントや各ライブラリの一次資料に読者を送り出します。

逆に、以下は意図的に扱いません。

• HTML / CSS の詳細なリファレンス (前提知識として扱います)
• TypeScript の網羅的な学習資料 (React で使う範囲の型だけ説明します)
• バックエンド API の実装や、CI/CD の深掘り
• React Native、特定プロジェクト固有のアーキテクチャ

図 0.1.1 本サイトと公式ドキュメントの役割分担

サイトの全体構成

本サイトは 8 つの Part に分かれます。順に読むと積み上がるように作っていますが、案件の都合で急ぐときは必要なところから拾い読みしてください。

図 0.1.2 Part の依存関係

実線は「順に読むと理解が積み上がる」依存、点線は「興味や必要に応じて前後して良い」関係です。

各 Part の狙いは次のとおりです。

• Part 1 歴史 — 静的 HTML から SPA まで、Web フロントエンドが何を解こうとしてきたかをたどります。jQuery 時代の「DOM を直接触る世界」と、そこで発生した命令的 UI の限界を確認した上で、React 登場 (2013 年) の動機を公式ブログから読み解きます。
• Part 2 Vanilla JS との対比 — ToDo リストを題材に、まず素の JavaScript で書き、状態と DOM を手で同期させる辛さを体験します。そこで「React が自動化している範囲」を明確にしてから Part 3 に進みます。
• Part 3 React 基礎 — Vite + React + TypeScript で開発環境を作り、JSX、コンポーネント、状態 (state)、props、副作用 (useEffect)、リストと key、フォームまでを扱います。API の列挙ではなく、「なぜそう書くか」を軸にします。
• Part 4 最新の React (2026) — React 19 で入った Actions、use、useOptimistic、useActionState、Suspense の使い方、Context、Refs、パフォーマンス最適化 (memo / React Compiler) を扱います。
• Part 5 Server Components と Next.js — Server Components がなぜ生まれたか、Client Components とどう使い分けるか、Next.js App Router の基本と Server Actions を確認します。
• Part 6 React の内側 (おまけ) — 興味のある読者向けに、Virtual DOM、Reconciliation、Fiber、Hook 実装の概略を説明します。案件で必須の内容ではないので後回しで構いません。
• Part 7 案件への橋渡し — 状態管理 (Context / Zustand / Redux Toolkit)、データフェッチ (TanStack Query / SWR)、スタイリング (Tailwind / CSS Modules)、テスト (Vitest + Testing Library)、DevTools のエコシステム地図と、案件参加前のチェックリストを置きます。

おすすめの読み順

図 0.1.3 読者タイプ別の読み順

• 初回は Part 0 → Part 3 まで順に読むのをおすすめします。歴史と Vanilla JS の苦労を踏まえてから React 基礎に入ると、「なぜこの API があるか」の腑に落ち方が違ってきます。
• Part 4 以降は案件の性質によって取捨選択して構いません。Next.js 案件に入るなら Part 5、純粋な SPA 案件なら Part 7 に直行しても構いません。
• Part 6 は完全におまけです。React を使うだけなら必須ではありませんが、挙動に迷ったときの思考の支点になります。

コードを手元で動かす

本サイトのコード例の一部 (主に Part 3〜4) には StackBlitz の埋め込みがあります。ブラウザ上でそのまま TypeScript + React を動かせるサービスで、環境構築を待たずに触れるのが狙いです。埋め込みが表示されない場合のために、各埋め込みの直下に外部リンクも併記します。

Part 3.1 では、手元で Vite + React + TypeScript の環境を作る手順も扱います。

用語の扱い

日本語の表記は揺れやすいので、本サイトでは次の書き方に統一しています (一部抜粋)。

• コンポーネント (「Component」とカナ化せずに書くときは「コンポーネント」)
• フック (同上。ただし useState など API 名はそのまま英字で書きます)
• props、state、ref はコード・本文とも英字のまま
• レンダー (React の処理ステップ)、コミット (DOM への反映) を区別します
• 単方向データフロー (「ワンウェイ」「片方向」は使いません)
• Server Component、Client Component (省略形 SC / CC は使いません)

完全な用語表は本サイトの STYLE_GUIDE.md を参照してください (執筆者向けですが、読者にも公開しています)。

事実優先と、裏付けが取れないものの扱い

本サイトは事実優先を徹底しています。API 名・バージョン・引用文は一次資料 (仕様、公式ドキュメント、公式ブログ、ソースコード) から確認した上で書きます。裏付けが十分に取れない内容を残すときは、NOTE マーカー (日本語注記付き、監査用に英語キーワードを含む形式) を文中に入れます。このマーカーを見かけた場合は、読者側でも一次資料の確認をお願いします。

各ページ末尾には ## 参照ソース セクションを置き、参照した一次資料への深いリンクを並べます。

次に読むページ

それでは、最初の旅に出ましょう。Part 1 — React が生まれた理由 に進んでください。最初の章は 1.1 Web 開発の進化 — 静的 HTML から SPA まで です。

参照ソース

• react.dev — ホーム
• react.dev — Quick Start (Learn)
• react.dev — Start a New React Project
• 本サイト PLAN.md、docs/STYLE_GUIDE.md (リポジトリ内)