React とは何か

本書の最初の章です。次の第 2 章から本格的にコードを書き始めます。本章ではコードを書く前に、なぜ改めて React なのか、本書が他の入門書とどう違うのか、そして 1 章から 34 章までの流れを整理します。

これに続く 4 部 モダン Next.js、5 部 運用・テスト・デプロイ、6 部 フルスタックキャップストーンまでも、すべて本章の最後の節「本書が扱う範囲」の中に含まれています。そのため本章は単なる「1 部 1 章」以上の重みがあります。ゆっくり進めてください。

なぜ改めて React なのか #

同じサイトに旧 React 基礎講座 15 編があります。コンポーネント、props、state、useEffect のような基礎を初めて学ぶのによいシリーズで、サイトにそのまま残してあります。あのシリーズも実は hooks ベースですが、その後 React のエコシステムはさらに先へ進みました。主な変化をいくつか挙げると次のとおりです。

• App Router と Server Components(Next.js 13〜15, React 19) — ページ単位のルーティングから、layout / loading / error / not-found が一級市民であるモデルへ移りました。そしてサーバ側で直接データをフェッチするコンポーネントが基本になりました。
• Server Actions(React 19) — <form action={fn}> の中にサーバ関数を直接置けるようになりました。fetch + API ルート + revalidate という一連のサイクルを関数 1 つで終えられます。
• use() フック(React 19) — Promise と Context の両方をほどけるフックです。条件付き呼び出しが許可される唯一のフックでもあります。
• React Compiler(React 19) — 自動 memoization が導入されました。memo / useMemo / useCallback を直接書く場面がその分減りました。
• ref as prop(React 19) — forwardRef なしで ref を単に prop として受け取るモデルに変わりました。
• TypeScript 優先 — 2018 〜 2020 時点では「オプション」だった TypeScript が、いまや事実上の標準になりました。ほぼすべてのライブラリが型を一緒に提供します。
• Vite + pnpm — create-react-app は公式に deprecated になりました。Vite が新規プロジェクトの標準になりました。

ツールチェーンと基本原理の両方が変わりました。本書は最初からその変化の上で始まります。

旧講座はそのまま残します。旧 React(Class component・Pages Router・Redux-only・componentDidMount)を本書の modern スタイルへ移す手順は付録 A 旧 React マイグレーションに別途まとめてあります。旧講座や旧コードベースを知っている読者なら、本書を 1 章から順に読みながら、必要に応じて付録 A をそばに置いておけば十分です。

React の誕生 #

React は 2011 年に Facebook のソフトウェアエンジニアである Jordan Walke が作り、Facebook のニュースフィード機能に初めて適用され、2013 年にオープンソースとして公開されました。

当時 Facebook はますます複雑になっていく UI の管理に苦労していました。ユーザがコメントを書き込むと、画面のあちこちのカウンタ、通知バッジ、フィードの状態がすべて一貫して即座に更新される必要がありましたが、従来の命令的 DOM 操作ではこれらすべてを漏れなく更新するのが非常に難しかったのです。React はまさにこの「複雑な UI の一貫性を保つ問題」を解決するために生まれました。

それから 10 年以上の時間が経ち、React は単なる UI ライブラリからフルスタックモデル(RSC + Server Actions)へと拡張されました。本書の 4 部でその拡張された領域を扱います。

ライブラリか、フレームワークか #

「React フレームワーク」と呼ばれることがよくありますが、厳密に言うと React は UI ライブラリです。ルーティング、データフェッチ、フォーム処理のようなフルスタック機能をそれ自体で強制せず、ひたすら「ユーザインターフェースを描くこと」に集中します。

このミニマルな哲学のおかげで、React はその上で動作するメタフレームワークのエコシステムを作り上げました。最も有名なのは Next.jsで、それ以外にも Remix、Astro、TanStack Start があります。本サイト(schoolofweb.net)も Hugo に移る前は Next.js の上で動いていました。

本書は 4 部全体を Next.js(App Router)に充てます。「React のみ」で終わる入門書ではなく、React が実際に使われる領域であるフルスタックメタフレームワークまで一冊に収めるためです。

React の核心特性 5 つ #

React の核心特性を 5 つに整理してみましょう。本書の本文 1〜34 章では、この 5 つを順に深く扱っていきます。

1. コンポーネントベース(Component-based) #

React は画面を小さな断片に分けるところから始まります。ボタン、入力欄、カード、ヘッダ、コメント 1 行。これらすべてをコンポーネントという独立した単位として作り、レゴブロックのように組み合わせて 1 つの画面を完成させます。同じコンポーネントを複数の場所で再利用でき、各コンポーネントは自分自身の動作と見た目だけに責任を持てば十分です。

本書では 4 章(コンポーネントと props)で最初のコンポーネントを作り、17 章(props と children の型付け)で TypeScript によってそのインターフェースを整え、24 章(Server vs Client Components)でコンポーネントの新しい 2 系統である server / client を扱います。

2. 宣言的(Declarative) #

従来の JavaScript で UI を作るときは「どう(How)」画面を変えるかを段階的に命令する必要がありました。React は逆に「何を(What)」見せるかだけを宣言すれば、画面をそのように作る仕事は React が引き受けます。

簡単な例として「ボタンをクリックするとカウンタが 1 増える」機能を作るとします。素の JavaScript なら次のように書きます。

let count = 0;
const button = document.querySelector('#btn');
const display = document.querySelector('#count');

button.addEventListener('click', () => {
  count += 1;
  display.textContent = count;
});

同じ機能を React で書くと次のようになります。

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
    </div>
  );
}

DOM を直接操作することはありません。count という state が変わると、React が画面の該当部分を自動的に更新してくれます。画面がどう変わるべきかを一つひとつ命令せず、どのような姿であるべきかだけを宣言します。これが宣言的の意味です。

本書では 5 章(useState)で上のコードの正確なモデルを掘り下げ、18 章(hooks の型付け)では useState<number> の型推論を確認します。

3. 仮想 DOM(Virtual DOM) #

React が高速に動作できる秘密の 1 つです。実際のブラウザの DOM は直接操作するたびにコストが大きいです。React は JavaScript オブジェクトで作った仮想 DOMをメモリ内に持ち、変更が起きると新しい仮想 DOM と以前の仮想 DOM を比較(reconciliation)してから、実際に変わった部分だけを本物の DOM に反映します。

本書では 8 章(リストと key)で reconciliation アルゴリズムが key をどのように使うかを直接確認し、14 章(パフォーマンス最適化)で仮想 DOM の比較コストを下げる道具である memo・useMemo・React Compiler の役割を本格的に扱います。

4. 単方向データフロー(One-way data flow) #

React ではデータは常に親コンポーネントから子コンポーネントへ、一方向にのみ流れます。子は親のデータを勝手に書き換えることはできず、親が明示的に渡した関数を通してのみ変更の意図を伝えられます。予測可能な流れのおかげでデバッグがしやすく、大きなアプリケーションでもデータの出どころを追いやすくなります。

本書では 11 章(state のリフトアップ)でこのモデルが兄弟コンポーネント間のデータ共有にどう作用するかを見て、12 章(useContext)で単方向の流れのコストが大きくなったときにどこで切るかを扱います。そして 27 章(Server Actions)では、クライアント → サーバの単方向が新しいモデルでどのように表現されるかを確認します。

5. 巨大なエコシステム #

React の最大の強みの 1 つは、豊かな周辺エコシステムです。ルーティング(React Router、Next.js)、状態管理(Zustand、Jotai、Redux Toolkit)、サーバ通信(TanStack Query、SWR)、認証(Auth.js)、UI キット(shadcn/ui、MUI、Chakra UI)。どんな問題に対してもすでに作られた道具があり、活発なコミュニティが常に新しい答えを生み出しています。

本書の 5 部(運用・テスト・デプロイ)では、テスト(Vitest + Playwright)、パフォーマンス(Web Vitals)、認証(Auth.js)、デプロイ(Vercel / Cloudflare Pages)、観測性(Sentry / PostHog)を扱います。「どの問題にどの道具を選ぶべきか」という判断基準まで一緒に整理します。

2026 の React — server-first モデルへ #

上の 5 つの核心特性は 2011 年以降ほとんど変わっていません。しかし、その上で React の使われ方は大きく変わりました。

• 2013 〜 2018: クライアント SPA が標準でした。すべてのコンポーネントがブラウザだけで実行され、データは useEffect の中の fetch で取得していました。
• 2018 〜 2023: hooks と Next.js Pages Router が標準になりました。getServerSideProps / getStaticProps で一部の SSR が導入されました。
• 2023 〜 現在: App Router + Server Components + Server Actions の時代です。サーバで直接データをフェッチするコンポーネントが基本であり、クライアントコンポーネントは相互作用が必要な場合にのみ置きます。

この変化は単なるツールの入れ替えではありません。「React でフルスタックアプリを作る」の意味自体が変わりました。本書の 4 部 22 章(なぜ Next.js と Server Components なのか)でこの転換点をもう一度整理します。そして 28 章(React 19 新機能まとめ)では、その転換点を可能にした React 19 の新機能を一か所にまとめます。

React で何が作れるか #

React は単純なウェブサイトから巨大な SaaS サービスまで、ほぼあらゆる種類のユーザインターフェースを作れます。

• シングルページアプリ(SPA) — ページ遷移なしで動作する動的なウェブアプリケーションです。Facebook、Twitter、Instagram のウェブ版が代表例です。
• フルスタックウェブアプリ — Next.js + RSC + Server Actions + DB の 1 セットで作ります。本書の 6 部キャップストーンで自分で作ってみます。
• 企業向けダッシュボード — データがリアルタイムに変わる複雑な管理画面を扱います。React のコンポーネントモデルが最も力を発揮する分野です。
• コンテンツサイトとブログ — Next.js のようなメタフレームワークを使えば、検索エンジンによく載るサイトも React で作れます。
• モバイルアプリ — React Native を使えば、同じ考え方と似たコードで iOS、Android アプリを作れます(本書の範囲外)。
• デスクトップアプリ — Electron と組み合わせれば、Windows、macOS、Linux 向けのデスクトップアプリケーションも作れます。VS Code、Slack、Notion はすべてこの方式で作られました(本書の範囲外)。

React・Vue・Svelte・Solid #

React の最大の競争相手は 2026 年時点で Vue 3、Svelte 5、Solid です。Angular もいまだ生きていますが、新規プロジェクトでの比重は減少傾向にあります。

• Vue 3 — 参入障壁が低く、ドキュメントが親切です。Composition API によって hooks と感触が近づきました。中国市場で特に強いです。
• Svelte 5 — コンパイルタイム最適化により、ランタイムコードが小さいです。runes モデルは React の signals と感触が近いです。学習曲線が短いです。
• Solid — React とほぼ同じ API ですが、仮想 DOM がなく fine-grained reactivity を使います。パフォーマンスに敏感なプロジェクトで人気を得ています。

React の強みは**「最大のエコシステムと採用市場」**です。どんな問題に対してもすでに作られた道具があり、求人広告の大多数が React を要求します。学習資料も最も多いです。

本書が扱う範囲 #

本書は 6 部 + 付録で構成されています。

本書をすべて読み終えると、あなたは:

• 関数コンポーネント + hooks で動的な UI を作れるようになります
• TypeScript ですべてのコードの型を安全に押さえられるようになります
• Next.js App Router・Server Components・Server Actions でフルスタックアプリを作れるようになります
• Vitest + Playwright でコンポーネント / 統合 / E2E テストを書けるようになります
• Web Vitals を計測して改善できるようになります
• Auth.js で認証をつなぎ、Vercel / Cloudflare Pages にデプロイし、Sentry + PostHog でプロダクション環境をのぞき込めるようになります

本書の範囲外である React Native・Remix・TanStack Start、デザインシステム・アニメーション・WebGL は別の本の領域です。

練習問題 #

1. 本書の目次(1 〜 34 章 + 付録 A)を一度ざっと眺め、自分がすでに知っていると感じる章 / 新しく感じる章 / 最も気になる章を、それぞれ 1 〜 2 個ずつ選んでメモしておいてください。本書を読み終えてからもう一度見直したとき、自分の出発点を確認するのに使います。
2. 上の「React の核心特性 5 つ」のうち、React 19 の Server Components が最も大きく影響する項目はどれだと思いますか。一段落で答え、読み終えた後 22 章 〜 24 章と比較してみてください。
3. 本書の付録 A 旧 React マイグレーションを一度通して眺め、自分がすでに知っている旧スタイル(Class component・Pages Router・Redux-only・componentDidMount など)があれば印を付けておいてください。本文を読み進める中でその部分に到達するたびに付録 A と相互参照すれば、マイグレーションの出発点になります。

一行まとめ: 本書は React 19 と Next.js App Router、TypeScript を最初から標準に据える。関数コンポーネント + hooks・Server Components + Server Actions・TypeScript・運用ツール一式という 4 つの軸が、1 章から 34 章まで同じトーンで続く。旧スタイルは付録 A にまとめておく。

次の章 #

次の第 2 章 開発環境の設定(Node.js + Vite)では、本格的にコードを書くために Node.js と pnpm をインストールし、Vite で最初の React プロジェクトを作って開発サーバを立ち上げます。本書のすべての例コードはその環境の上で動作します。