React 学習ガイド

ダークモード

1.5 エコシステムの現在地 (2026) ​

ここは Part 1 の最終章です。ここまで歴史を追ってきた視点を、2026 年の景色にピントを合わせ直します。案件で「今どこから学べばいいの？」という問いに答えるための地図になる章です。

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

2026 年の React は「コア + フレームワーク + 周辺ライブラリ」の 3 層で捉えるのが実用的で、新規案件では公式が フレームワークから始めること を推奨しています。

React は 2013 年の公開から 13 年が経ち、この間にライブラリ本体だけでなく、周辺のフレームワーク、ツール、パターンが大きく積み重なりました。ここでは 2026 年時点での状況を、一次資料 (react.dev、nextjs.org の公式ドキュメント) に沿って整理します。Part 7 の「案件への橋渡し」への準備にもなります。

React 本体のラインナップ ​

React の現行メジャーバージョンは React 19 です。

  • React 18 — 2022 年 3 月 29 日リリース。Concurrent renderer、automatic batching、サーバーサイドレンダリングの強化が入った
  • React 19 — 2024 年 12 月 5 日リリース。Actions、use API、useOptimistic、useActionState、Server Components 正式サポートなどが入った

React 19 の機能は Part 4 で詳しく扱います。ここでは「React 本体の単位で大きな変化が続いている」ことだけ押さえてください。

GitHub リポジトリ facebook/react の公式スローガンは 3 つです。

Declarative · Component-Based · Learn Once, Write Anywhere

— facebook/react README (抜粋)

公式が推奨する新規プロジェクトの始め方 ​

公式ドキュメント react.dev の Start a New React Project は、新規開発について次のように始まります。

If you want to build a new app or website with React, we recommend starting with a framework.

— react.dev "Start a New React Project"

つまり 「素の React だけでスタートせず、フレームワークから始めろ」 が 2026 年時点の公式の立場です。推奨フレームワークとして以下が挙げられています。

  • Next.js (App Router) — npx create-next-app@latest で開始
  • React Router (v7) — Vite と組み合わせたフルスタック構成
  • Expo — iOS / Android / Web のユニバーサルアプリ向け
  • その他: TanStack Start (Beta)、RedwoodSDK

フレームワークの制約が合わない場合や、基礎を学びたい場合のみ、Vite / Parcel / RSbuild などのビルドツールで「ゼロから始める」選択肢が案内されます。

本サイトの Part 3 は 学習目的のため Vite + React + TypeScript でゼロから始め、「何が組み立てられているか」を見てから、Part 5 で Next.js に合流する流れにしています。最初から完成品のフレームワークを触ると「何がどこで起きているのか」が見えにくいので、意図的にこの順序にしています。

Next.js と App Router ​

Next.js は React の上に立つフルスタックフレームワークで、2026 年時点では 公式ドキュメント が次のように位置付けています。

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

— Next.js 公式ドキュメント (要旨)

Next.js は 2 つのルーターを持ちます。

ルーター位置付け
App Router新しいルーター。Server Components など React の新機能に対応
Pages Router既存のルーター。引き続きサポートされ改善中

新規案件で Next.js を採用するなら App Router を基本線に考えて構いません (案件によって Pages Router 継続の判断もあります)。App Router は Part 5 で扱います。

図 1.5.1 React を取り巻く主要要素 (2026) ​

Core が土台、その上にフレームワーク、周辺エコシステムがぶら下がる、という階層です。案件で触るのは多くの場合 Frameworks 層以上です。

図 1.5.2 案件で触る層のイメージ ​

React コアreact / react-dom / Server ComponentsフレームワークNext.js App Router / React Router v7 / Expo周辺ライブラリ (案件頻出)TanStack Query / Zustand / Tailwind / Vitest …案件で主に触る層

案件で頻出する周辺ライブラリ ​

React 自体はあくまで UI ライブラリで、以下のような領域は React 本体の責務ではありません。React の哲学は「必要な領域は専用ライブラリやフレームワークに任せる」ことで、各領域にはコミュニティの標準的な候補があります。

  • ルーティング — React Router、Next.js のルーター
  • データフェッチ / サーバー状態管理 — TanStack Query、SWR
  • クライアント状態管理 — Zustand、Redux Toolkit、Context + useReducer
  • スタイリング — Tailwind CSS、CSS Modules、styled-components
  • テスト — Vitest、Jest、React Testing Library
  • フォーム — React Hook Form、Formik、React 19 の Actions

それぞれの候補と選び方は Part 7 で整理します。ここでは「2026 年時点では、React + フレームワーク + 上記 5〜6 の領域の専用ライブラリ、という構成が受託案件の標準形」と押さえれば十分です。

2026 年時点で押さえる要点 ​

  • React 19 が現行メジャー。Actions、use、Server Components が安定版で使える
  • 新規プロジェクトは公式が フレームワーク推奨。素の Vite + React より Next.js / React Router v7 が第一選択
  • Server Components は React + Next.js の組み合わせで案件採用が進んでいる
  • React は「コア + フレームワーク + 周辺ライブラリ」の 3 層構造で理解するのが実用的

Part 1 を終えるにあたって ​

Part 1 ではこんな歩き方をしました。振り返ってみると、地ならしとしてなかなかの距離を歩いてきたはずです。

  • 静的 HTML から SPA へ、Web フロントエンドが進化してきた軌跡 (1.1)
  • jQuery 時代の「DOM を直接触る」命令的スタイル (1.2)
  • 大規模 SPA で命令的スタイルが抱えた限界と、React の答え (1.3)
  • 2013 年の React 登場と、その設計判断の出どころ (1.4)
  • 2026 年時点のエコシステム全体像 (この章)

次の Part 2 では、React を使わずに ToDo リストを Vanilla JS で書き、状態と DOM の同期を自分の手で行ったときに何が起きるかを体験します。React が何を肩代わりしているのかを身体に入れてから、Part 3 で React に入ります。

Part 2 — Vanilla JS で書くとどうなるか に進んでください。

参照ソース ​