7.1 エコシステム地図
React は、実は 小さなライブラリ です。コンポーネントをレンダーし、状態を管理し、DOM を同期する — 担当しているのはそれだけです。案件で React を使うとき、周辺のツール選びは開発者に委ねられています。どのビルドツールを使うか、どうルーティングするか、サーバー状態をどう扱うか、どうスタイルを当てるか、どうテストするか。これらはすべて React 本体の外側にある選択 です。
この章では、2026 年時点で受託案件に入ったときに出会う典型的な選択肢を地図にしていきます。細部は後続章や各ライブラリの公式ドキュメントにお任せして、ここでは「どのカテゴリに何があって、どんな判断軸があるか」を掴むのがゴールです。
図 7.1.1 React 本体の範囲と、その外側
中心の円が React 本体です。それ以外の箱は、案件ごとに「どれを選ぶか」を決める必要がある領域です。
案件構成の俯瞰
下の表は、React を使う案件で分業されている 7 つのカテゴリと、代表的な選択肢です。「よく同居する組み合わせ」も添えてあります。
| カテゴリ | 代表的な選択肢 | よく同居する組み合わせの例 |
|---|---|---|
| ベース | React + Vite / Next.js / React Router (v7) | Next.js + Tailwind + TanStack Query |
| ルーティング | Next.js App Router / React Router | SPA では React Router、フルスタックでは App Router |
| 状態管理 (クライアント) | Context + useReducer / Zustand / Redux Toolkit / Jotai | 中規模は Zustand、大規模は Redux Toolkit |
| データフェッチ (サーバー状態) | TanStack Query / SWR / RTK Query / Next.js の fetch | SPA は TanStack Query、Next.js は fetch + Server Components |
| スタイリング | Tailwind CSS / CSS Modules / styled-components / Emotion | Tailwind がデザインシステムと相性が良い場合に多い |
| テスト | Vitest + React Testing Library / Jest + React Testing Library | Vite ベースなら Vitest、既存 Jest 資産があれば Jest |
| Lint / Format | ESLint + Prettier / Biome / oxlint | 案件の歴史で分かれる |
各行の「選択肢」はすべてを網羅しているわけではなく、現場で頻繁に見るものに絞っています。
公式が案内する「新規プロジェクトの始め方」
React 公式 (react.dev/learn/start-a-new-react-project) は、新しい React アプリを作る際の起点として フルスタックフレームワーク を推奨しています。代表的な 3 つの選択肢が挙げられています。
- Next.js (App Router) — Vercel が保守しています。Server Components や Suspense を含むアーキテクチャに対応。
- React Router (v7) — Shopify が保守しています。React Router をフレームワーク化したもので、Vite と組み合わせてフルスタック React フレームワークとして動きます。
- Expo — ネイティブ (iOS / Android) と Web をまたぐアプリ向け。React Native ベース。
「フレームワークを使わず自分でスタックを組みたい」場合は、Vite / Parcel / RSbuild のようなビルドツールからスクラッチで構築することもできる、と公式に明記されています。受託案件でよく見るのは「Next.js」か「Vite + React + React Router」のいずれかです。
Vite の位置づけ
Vite (vite.dev/guide/) はフランス語で「素早い」を意味するビルドツールです。ネイティブ ES モジュールを活用した開発サーバー（HMR が高速です）と、本番向けのバンドルを両方提供します。create vite で React・Vue・Svelte など複数フレームワークのテンプレートを雛形として用意できます。
- 開発時: ネイティブ ESM でファイルを配信するため、初回起動が速いです。
- ビルド時: 本番用には Rolldown を使ってバンドルします（2026 年時点の公式 Guide に記載）。
- 役割分担: ルーティング・データフェッチ・SSR は Vite 単体では担いません。必要なら React Router (v7) や Next.js のようなフレームワーク層と組みます。
Next.js の位置づけ
Next.js (nextjs.org/docs) は「React フレームワーク」と自称しており、React 単体ではカバーしない領域（ルーティング、ビルド、SSR、データフェッチの統合）をまとめて提供します。2026 年時点で 2 つのルーターが併存しています。
- App Router — Server Components を前提にした構成です。新規案件ではこちらが推奨されます。
- Pages Router — 従来型のルーター。既存案件の保守で出会うことが多いです。
Part 5 (5.3 Next.js App Router 入門) で扱った App Router が、受託案件で最もよく見る構成です。
エコシステム全体像
図 7.1.2 React 案件の構成要素
この図は「React が中心にあり、その周囲にカテゴリごとの選択肢が広がっている」ことを示しています。案件に参加したら、まず package.json を開いて、どのカテゴリから何が選ばれているかを確認します。選定に理由のない選択はまずありません。既存コードの選択をまず尊重しつつ、必要なら後述の判断軸で新しい選択を提案していきます。
カテゴリごとの「いつ使うか」の要約
各カテゴリの詳細は後続章で扱います。ここでは一行サマリを置いておきます。
- 状態管理 → 7.2 状態管理: 小中規模なら Context + useReducer、複数画面で共有する中規模以上は Zustand、大規模で DevTools のタイムトラベルが欲しければ Redux Toolkit。
- データフェッチ → 7.3 データフェッチ: サーバー状態とクライアント状態は別問題。サーバー状態には TanStack Query か SWR を置きます。Next.js App Router なら Server Components 側の
fetchで代替することもできます。 - スタイリング → 7.4 スタイリング: デザインシステムの有無・既存コード・RSC の制約・チームの好みで決まります。「正解」はありません。
- テスト → 7.5 テスト入門: Vitest + React Testing Library がユーザー視点のテストを書くうえで軽量な標準構成です。
- DevTools → 7.6 DevTools とデバッグ: React DevTools の Components / Profiler タブと、Chrome DevTools の Network / Performance を併用します。
案件で決まりやすい選択と、開発者が提案できる選択
案件に参加した時点で、もう決まっていることが多いもの:
- ベース (Next.js か Vite + React Router か)
- スタイリング (Tailwind か CSS Modules か)
- Lint / Format の設定
新しく入る開発者が提案できる余地があるもの:
- サーバー状態のライブラリ (TanStack Query / SWR の追加)
- テストの追加 (Vitest セットアップ)
- DevTools の使い方の共有
図 7.1.3 案件参加時のスタンス
既存案件に入るときは、まず既存選択の 理由を読み取る ところから始めます。勝手に置き換える提案は嫌われますし、そもそも自分が知らない制約がある可能性があります。一方で、テストや DevTools の使い方のようにプラスで入れやすい領域から貢献を始めると、摩擦が少なく定着しやすいのでおすすめです。