第8章: エコシステム完全ガイド — 2026年の最適スタック

メタフレームワーク — Reactの実行基盤

React単体はUIライブラリであり、ルーティング、データフェッチ、ビルド最適化といった機能は含みません。 これらを統合的に提供するのがメタフレームワークです。 2026年現在、React公式ドキュメントでもメタフレームワークの使用が推奨されており、 素のReactでプロジェクトを始めるケースは少数派となっています。

Next.js — 事実上の標準

Next.jsはVercel社が開発するReact向けメタフレームワークで、2026年現在週間1,000万ダウンロードを超えるエコシステム最大の存在です。 App Router（v13.4〜）の安定化により、React Server Components（RSC）をフルに活用できる唯一の本番対応フレームワークとなっています。

主要な機能として、Server Actionsによるサーバーサイドミューテーション、 Partial Prerendering（PPR）による静的/動的コンテンツの混在、 TurbopackによるRustベースの高速バンドルが挙げられます。 Reactチームとの密接な連携により、Reactの新機能がいち早く利用できる点も強みです。

React Router v7 — Web標準への回帰

React Router v7は、旧Remixを統合する形で2024年末にリリースされました。 Viteをビルドツールとして採用し、loader/actionパターンによるデータフェッチ、 Web Fetch APIベースのリクエスト/レスポンス処理など、Web標準に沿った設計が特徴です。 既存のSPAにルーティングライブラリとして導入し、段階的にSSRへ移行できるのも大きな利点です。

Astro — Islands Architectureの先駆者

AstroはデフォルトでJavaScriptをゼロ出力する静的サイトジェネレーターです。 インタラクティブな部分だけReact（やVue、Svelte等）のコンポーネントを「島（Island）」として埋め込む Islands Architectureにより、コンテンツサイトで圧倒的なパフォーマンスを実現します。 このブログ自体がAstro + React Islandsで構築されています。

状態管理 — 2026年のベストプラクティス

Reactの状態管理は長らく「Redux一択」の時代が続きましたが、 2026年現在は用途に応じた適材適所の考え方が主流です。 とくに重要なのは、サーバー状態とクライアント状態を明確に分離するパターンです。

Zustand — 2026年のデフォルト選択

Zustandは週間約2,000万ダウンロードを記録し、状態管理ライブラリのトップに立っています。 その人気の理由は明快で、create関数ひとつでStoreを定義でき、 Providerのラップが不要で、TypeScriptとの相性も抜群です。 バンドルサイズはわずか約1KBと軽量で、パフォーマンスへの影響もほぼありません。

// Zustandのシンプルな使用例
import { create } from 'zustand';

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// コンポーネントでの使用 — セレクターで必要な値だけ購読
function Counter() {
  const count = useCounterStore((s) => s.count);
  const increment = useCounterStore((s) => s.increment);
  return <button onClick={increment}>{count}</button>;
}

2026年の状態管理パターン

現代のReact開発では、状態を以下のように分類して管理するのがベストプラクティスです。

データフェッチ・フォーム・ルーティング

データフェッチ — TanStack Queryの支配

TanStack Query（旧React Query）は、サーバー状態管理のデファクトスタンダードです。 自動再フェッチ、キャッシュの自動無効化、楽観的更新、無限スクロール対応など、 データフェッチにまつわるあらゆる課題を解決します。 週間800万ダウンロードを超え、エコシステム最大のデータフェッチライブラリです。

SWRはVercel製のより軽量な代替ですが、機能面ではTanStack Queryが上回ります。 RSCを使う場合はフレームワーク組み込みのデータフェッチで足りるケースも増えていますが、 クライアントサイドでのデータ操作にはTanStack Queryが依然として最適です。

フォーム管理

React Hook Formは非制御コンポーネントベースでパフォーマンスに優れ、 週間1,200万ダウンロードと圧倒的なシェアを持ちます。 Zodと組み合わせたスキーマバリデーションが定番パターンです。 後発のTanStack Formはフレームワーク非依存設計で注目を集めていますが、 2026年時点ではReact Hook Formがデファクトです。

ルーティング

メタフレームワーク（Next.js、React Router v7）を使う場合、ルーティングはフレームワークに委ねるのが標準です。 独自にルーティングを組む場合はTanStack Routerが型安全なルーティングで注目されていますが、 多くのプロジェクトではメタフレームワークの組み込みルーティングで十分です。

UIライブラリ — ヘッドレスUI + Tailwindの時代

UIライブラリの選択は2024年以降大きく変化しました。 従来のスタイル込みコンポーネントライブラリから、 ヘッドレスUIとTailwind CSSの組み合わせが主流に移行しています。

shadcn/ui — パラダイムシフト

shadcn/uiは従来のUIライブラリとは根本的にアプローチが異なります。 npmパッケージとしてインストールするのではなく、CLIでコンポーネントのソースコードをプロジェクトにコピーします。 これにより、すべてのコンポーネントを自由にカスタマイズでき、バージョンアップによる破壊的変更の影響も受けません。

内部的にはRadix UIのプリミティブ（アクセシビリティ対応済み）に Tailwind CSSでスタイリングを施した構成で、class-variance-authority（cva）によるバリアント管理も組み込まれています。 2026年現在、新規プロジェクトでのUI基盤として最も推奨される選択肢です。

テスト・ビルドツール

テスト — Vitest + RTL + Playwright

2026年のReactテストスタックは明確に収束しています。

VitestはViteのエコシステムから生まれたテストランナーで、 Jest互換のAPIを持ちながらESMネイティブで動作し、Jestよりも大幅に高速です。 React Testing Library（RTL）は「実装の詳細ではなくユーザーの振る舞いをテストする」という哲学のもと、 getByRoleやgetByTextといったアクセシビリティベースのクエリを提供します。 E2EテストではPlaywrightがCypressを抜いてデファクトとなり、 Chromium・Firefox・WebKitの3エンジンに対応しています。

ビルドツール — ViteとTurbopack

ViteはEvan You（Vue作者）が開発したビルドツールで、 ESMベースの高速な開発サーバーとRollupベースの最適化ビルドを提供します。 React Router v7、Astro、TanStack Startなど多くのフレームワークが採用しています。

Next.jsではTurbopack（Rustベース）が開発サーバーのデフォルトバンドラーとなり、 webpackからの完全移行が進行中です。 汎用プロジェクトにはVite、Next.jsプロジェクトにはTurbopackという棲み分けが確立しています。

CSS・アニメーション

Tailwind CSS — 圧倒的デファクト

Tailwind CSSは週間1,500万ダウンロードを超え、 ReactプロジェクトにおけるCSS手法のデファクトスタンダードです。 ユーティリティファーストのアプローチにより、コンポーネントファイル内でスタイリングが完結し、 CSSファイルの肥大化やクラス名の命名問題から解放されます。

2025年リリースのTailwind CSS v4では、Rustベースの新エンジン「Oxide」により ビルド速度が最大10倍に向上しました。 設定ファイルがCSS-first（@themeディレクティブ）になり、 tailwind.config.jsが不要になった点も大きな変更です。

アニメーション — Motion

Motion（旧Framer Motion）はReact向けアニメーションライブラリの決定版です。 宣言的なAPIで複雑なアニメーションを直感的に記述でき、 レイアウトアニメーション、ジェスチャー対応、スクロール連動アニメーションなどを提供します。 2025年に「Framer Motion」から「Motion」にリブランドされ、 フレームワーク非依存のコアとReactアダプターに分離されました。

React Native + Expo — モバイル開発の現在

React Nativeは2024〜2025年にかけてNew Architectureへの移行が完了し、 パフォーマンスと安定性が飛躍的に向上しました。

New Architecture — 3つの柱

New Architectureは、React Nativeの根幹を刷新する3つの要素で構成されています。

Expo — React Nativeの統一プラットフォーム

ExpoはReact Nativeの開発体験を劇的に改善するプラットフォームです。 Expo SDK 55（2026年現在の最新安定版）では、New Architectureがデフォルトで有効化され、 Expo Router v4によるファイルベースルーティングが標準となっています。

EAS（Expo Application Services）によるクラウドビルド・OTAアップデート・アプリストア提出の自動化により、 ネイティブ開発の複雑さを大幅に軽減します。 2026年時点で、React Nativeプロジェクトの新規立ち上げではExpoの使用がほぼ必須と言えるでしょう。

graph TD
  A[React App] --> B[Next.js / Remix]
  B --> C[Zustand]
  B --> D[TanStack Query]
  B --> E[shadcn/ui + Tailwind]
  B --> F[Vitest + Playwright]
  C -->|クライアント状態| G[UI]
  D -->|サーバー状態| G
  E -->|コンポーネント| G

  style A fill:#3b82f6,stroke:#1d4ed8,color:#fff
  style B fill:#8b5cf6,stroke:#6d28d9,color:#fff
  style G fill:#22c55e,stroke:#16a34a,color:#fff