react-2026

React スタックのパターン

目次

• 使用する場面
• 手順
• 詳細
• ソース

React は、シンプルなコンポーネントライブラリだった初期の頃から大きく進化しました。2025 年後半の React エコシステムは、豊富でありながら複雑で、アプリ構築に使用するスタックを選ぶ方法が複数あります。現代の React 開発者は、ビルドツールやフレームワークから、ルーターやその他のライブラリまで、スタックのあらゆる層で選択を迫られます。React の公式ドキュメント（現在は react.dev）では、新規プロジェクトに高レベルのフレームワークを使用することが推奨されています。実際、かつて定番のブートストラップツールだった Create React App（CRA） は、React アプリの始め方の変化を示すかのように、2025 年初頭に非推奨となりました。

ツールをゼロから独自に組み合わせるのではなく、React フレームワーク（Next.js や Remix など）を使うか、特別な要件がある場合は、Vite や Parcel のようなモダンなビルドツールから始めることが推奨されています。この、特定の意見に基づいたガイドでは、2025 年の React の状況を紹介します。中堅からシニアの開発者におすすめするツールチェーンとスタックとして、ビルドツール（Vite、Turbopack、Webpack）、ルーティングソリューション（React Router と TanStack Router）、人気のフレームワーク（Next.js、Remix など）、状態管理とデータ管理に欠かせないライブラリ、さらにはAI が React 開発に与える影響まで取り上げます。

使用する場面

• React スタック（フレームワーク、ビルドツール、ルーティング、状態管理）を選ぶ際の参考として使用してください
• 新しい React プロジェクトを始める際、モダンなエコシステムの選択肢を評価するのに役立ちます

手順

• SSR／SEO が必要なフルスタックアプリには、フレームワークとして Next.js または Remix を使用してください
• SPA、社内ツール、ダッシュボードには、Vite + React Router または TanStack Router を使用してください
• フレームワークを使用しない独自の React 構成では、ビルドツールとして Vite を使用してください
• 独自のスタックで型安全なルーティングが必要な場合は TanStack Router を検討し、それ以外の場合はフレームワークが提供するルーティングを使用してください
• サーバー状態には TanStack Query（React Query）を、複雑なグローバル状態には Zustand または Redux を使用してください
• サポートされている場合は、React 19 の API（ref を prop として渡す、use()、Actions）を使用してください
• AI 支援開発ツールを活用しつつ、生成されたコードは必ず検証してください

詳細

対象読者： このガイドは、基礎を理解しており、2025 年のスタックについて十分な情報に基づいて選択したい、中級からシニアの React 開発者向けです。

公式ガイダンスと進化するベストプラクティス

React のコアチームは、コミュニティの動向に合わせてガイダンスを更新しました。新しい React ドキュメントでは、プロジェクトを始める際に「車輪の再発明をしない」ことを強調しています。Create React App は React SPA をすばやく立ち上げるのに役立ってきましたが、本番環境のニーズに対応するには課題がありました（たとえば、ルーティングや SSR が標準で備わっていません）。CRA が非推奨になった現在、開発者には、フル機能のフレームワークを選ぶか、より軽量なツールを使って独自のスタックを組み立てることが勧められています。React コアチームが示す経験則は、アプリにルーティングが必要なら、フレームワークを使うメリットがあります。最新のフレームワークはルーティングをデータ取得やコード分割などと緊密に統合しているため、自分でミニフレームワークを書く必要がなくなります。

なぜこのように変化したのでしょうか。ここ数年、React にはフック、並行レンダリング、サーバーコンポーネントといった強力な機能が導入されました。しかし、これらの多くを最適な形で活用するには、高度なツールが必要になることがよくあります。Next.js のようなフレームワークは、ストリーミング SSR やサーバーサイドのデータ読み込みなど、React の最新機能を実現する手段となっています。React Server Components（RSC）は Next.js 13 の App Router で本番環境向けの機能として導入され、ハイブリッドなレンダリングモデル（サーバー主導の UI を実現し、サーバーでレンダリングされるコンポーネントの JS コストをゼロにする）を可能にしました。初期の報告では、RSC の利用によってバンドルサイズが 20％以上削減されました。サーバー上で実行されるロジックはクライアントに送られないためです。React 19 では、'use server' ディレクティブで呼び出すサーバーアクションも安定化が進んでおり、フォーム送信やその他の変更処理をサーバー上で実行できるため、フロントエンドとバックエンドの境界がさらに曖昧になっています。

とはいえ、すべてのプロジェクトに重量級のフレームワークが必要なわけではありません。React チームも、小さなウィジェット、既存サイトへの React の追加、ゼロから構築して学ぶ場合など、シンプルな構成が適しているケースを認めています。独自の構成を選ぶ場合でも、Vite や RSBuild などの最新ツールを使って、React の更新された「ゼロから構築する」ガイドに沿って進めることができます。

2025 年のビルドツール：Vite、Turbopack など

ビルドツールチェーンは、React コード（JSX、CSS など）をブラウザーで実行できる形式に変換します。2025 年には、開発者体験が大きく向上しています。

• Vite は、フレームワークを使わない React プロジェクトで事実上の標準となっています。Vite は ESBuild を基盤とする非常に高速な開発サーバーを提供し、本番環境向けのバンドルには Rollup を使用します。人気は急上昇しており、2025 年には React との連携で Next.js に次いで 2 番目に広く使われるビルド構成となっています。その魅力は、サーバーの即時起動と、ほぼ即時のモジュールホットリロードです。CRA から移行する場合、React チームは有力な選択肢として Viteを明示的に勧めています。

• Turbopack — Vercel が導入した Rust ベースの新しいバンドラー — は、超高速なリロードを実現するインクリメンタルコンパイルに注力した、Webpack の後継として期待されています。Next.js に統合されているため、Next.js を使う場合はその恩恵を受けられるでしょう。Next.js 以外では、Turbopack はまだ汎用ツールではありません。

• Webpack — 長年にわたって活躍してきた定番ツール — は現在も使われていますが、主にレガシー用途です。2025 年に新規プロジェクトを始める際、非常に特殊な要件がない限り、Webpack を直接選ぶことはほとんどないでしょう。**レガシーには Webpack、新規プロジェクトには Vite（またはフレームワークの標準ツール）**です。

• Rspack / RSBuild — 新世代のRust 製バンドラーの一部です。Rspackは、Webpack のエコシステムと高い互換性を持つ高性能バンドラーです。RSBuildは Rspack を基盤とする設定不要のビルドツールで、React を含むフレームワークを簡単にセットアップできます。

まとめると、ほとんどの場合におすすめなのは Viteです。すぐに起動でき、実行も速く、サポートも充実しています。

フレームワークと出発点

2025年にReactプロジェクトの出発点を選ぶことは、多くの場合、フレームワークを選ぶことを意味します。

Next.js（フルスタックReactフレームワーク）： VercelがメンテナンスするNext.jsは、本番環境向けReactアプリの定番ソリューションとなっています。ファイルベースルーティング、SSR、SSG、画像の最適化、APIルート、React Server Componentsを標準でサポートしています。Next.jsの強みは、優れたデフォルト設定と規約にあります。完全なソリューションを求めて新しいReactアプリを構築する場合に、最もおすすめする選択肢です。

Remix（およびReact Router v7）： Remixはウェブの基本要素とプログレッシブエンハンスメントを重視します。React Routerチームが作成したRemixは、ルーティング＋データ読み込み＋ミューテーションを統合するアプローチを導入しました。React Router v7は、Remixのパターンの多くを採用しています。サーバー側とクライアント側の処理を細かく制御したいアプリに特に適した選択肢です。

「フレームワークなし」のカスタム構成（Vite＋ライブラリの組み合わせ）： フルフレームワークが不要であれば、Viteから始め、必要な要素を追加します。たとえば、ルーティングにはReact RouterまたはTanStack Router、データ取得にはReact Queryを使用できます。SSRやSEOが関係ない社内ツールなどでは、この構成を選ぶとよいでしょう。

その他の注目すべき選択肢： Astroはコンテンツサイト向けに注目を集めています（デフォルトではJavaScriptを使用せず、フレームワークを組み合わせられます）。RedwoodJSは、独自の見解に基づく「React＋GraphQL＋Prisma＋SSR」スタックを提供します。ExpoとExpo Routerを使うと、React Nativeとウェブを統合できます。

私たちの推奨： 用途に合ったツールを選びましょう。

• SSR、SEO、またはサーバーコンポーネントが必要なユーザー向けアプリにはNext.js
• プログレッシブエンハンスメントとウェブの基本要素を重視するアプリにはRemix
• SSRが必須ではないSPA、ダッシュボード、社内ツール、その他のアプリにはVite＋React Router/TanStack Router

カスタムVite SSR（メタフレームワークなし）： SSRが必要でもフルフレームワークは使いたくない場合、Viteには組み込みのSSRサポートがあります。Vike（旧vite-plugin-ssr）などのツールは、SSRによるファイルベースルーティングを実現する薄いレイヤーをViteの上に提供します。これにより、完全な制御を保ちながら、フレームワークのような開発者体験を得られます。

// server.ts — minimal custom Vite SSR setup
import express from 'express'
import { createServer as createViteServer } from 'vite'

const app = express()
const vite = await createViteServer({ server: { middlewareMode: true } })
app.use(vite.middlewares)

app.use('*', async (req, res) => {
  const template = await vite.transformIndexHtml(req.originalUrl, indexHtml)
  const { render } = await vite.ssrLoadModule('/src/entry-server.tsx')
  const appHtml = await render(req.originalUrl)
  res.send(template.replace('', appHtml))
})

SEOやパフォーマンスのためにSSRが必要でも、アプリのルーティングとデータ読み込みがシンプルで、フレームワークを導入すると得られる価値よりも複雑さのほうが増す場合に適しています。

2025年には、メタフレームワークを使わずにViteで動作する成功したReactアプリが数多くあります。大切なのは、機能が最も豊富な選択肢をデフォルトで選ぶのではなく、制約に合ったツールを選ぶことです。

ルーティングソリューション：React RouterとTanStack Router

フレームワークが提供するルーティング： Next.jsまたはRemixを使う場合、ルーティングの問題はほぼフレームワークが解決します。これらのフレームワークはルーティングとデータ取得を密接に連携させるため、読み込みのウォーターフォールといったよくある問題を回避できます。

React Router： 実績があり、広く使われています。React Router v6では、フックとネストされたルートを備えたシンプルなAPIが導入されました。v6.4以降では、非同期データとSuspenseのサポートが追加されました。フレームワークを使わない場合には、今でも有力な選択肢です。

TanStack Router： 新しい選択肢であり、第一級のTypeScriptサポート、組み込みのキャッシュ付きデータローダー、そして検索パラメーター向けの豊富なAPIを備えています。特定のフレームワークに依存せず、RemixやNext.jsのルーターのような機能を提供することを目指しています。

最大の違いは、型安全性と開発者体験です。TanStack Routerは「TypeScriptファースト」で構築されています。React Routerはよりミニマルです。どちらもネストされたルートとデータ読み込みに対応しています。

私たちのおすすめ： カスタムスタックでは、最新の機能を備えたTanStack Routerをぜひ検討してください。React Routerも引き続き十分に有効な選択肢です。特に、チームがすでに使い慣れている場合に適しています。

import { createRootRoute, createRoute, createRouter, RouterProvider } from '@tanstack/react-router';

const rootRoute = createRootRoute();
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <div>Hello, world!</div>,
});

const routeTree = rootRoute.addChildren([indexRoute]);
const router = createRouter({ routeTree });

export default function App() {
  return <RouterProvider router={router} />;
}

状態管理とデータ取得ライブラリ

フックによるローカル状態とグローバル状態： ローカル状態には、useState と useReducer で十分です。React の Context API は軽量なグローバル状態に適していますが、注意が必要です。コンテキストが更新されると、すべてのコンシューマーが再レンダリングされます。

Redux（および最新の Redux Toolkit）： 2025 年も広く使われていますが、大規模なアプリケーションに集中しています。Redux Toolkit（RTK） はボイラープレートを大幅に削減します。Redux を使うべきなのはどんな場合でしょうか？ アプリの状態遷移が非常に複雑な場合や、取り消し／やり直し、キャッシュ、開発者ツールなどの機能が必要な場合です。

Zustand、Jotai、軽量な状態管理ライブラリ： よりシンプルなグローバルストアのニーズに適しています。Zustand は、ボイラープレートが不要な、最小限のフックベースのグローバル状態ストアを提供します。

TanStack Query： サーバー状態の管理におけるリーダーです。useQuery や useMutation などのフックを使って、データを宣言的に取得し、キャッシュできます。

import { useQuery } from '@tanstack/react-query';

function TodoList() {
  const { data: todos, error, isLoading } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  });
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <ul>{todos.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
}

React Query などのライブラリは、RSC の時代になっても引き続き有用です。 初回読み込みがサーバー側に移行する一方で、ミューテーションやリアルタイム更新に、より多く使われる可能性があります。

フォーム状態： React Hook Form は優れたライブラリとして定着しています。スキーマに Zod を組み合わせることで、入力を宣言的に検証できます。

主なライブラリ： コンポーネントには MUI、Chakra UI、Radix UI、Headless UI を使用できます。リストの仮想化には @tanstack/react-virtual を使用できます。Vite プロジェクトのテストには Vitest + React Testing Library、その他の構成には Jest + React Testing Library、E2E テストには Cypress または Playwright を使用できます。

Vitest によるテスト

Vite プロジェクトでは、Vitest が自然なテスト用パートナーです。Vite の設定、変換、プラグインパイプラインを共有するため、別のテスト用バンドラーを設定したり、同期を保ったりする必要がありません。

// vite.config.ts — Vitest uses this directly
/// <reference types="vitest/config" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/test/setup.ts',
    css: true,
  },
})

// src/test/setup.ts
import '@testing-library/jest-dom/vitest'

// src/components/Button.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Button } from './Button'

test('calls onClick when clicked', async () => {
  const onClick = vi.fn()
  render(<Button onClick={onClick}>Save</Button>)
  await userEvent.click(screen.getByRole('button', { name: 'Save' }))
  expect(onClick).toHaveBeenCalledOnce()
})

Vitest では、即時のウォッチモード（Vite の変換キャッシュを共有）、ネイティブ ESM のサポート、Jest 互換の API（describe、it、expect、vi.fn()）、ソース内テスト、v8 または istanbul による組み込みのコードカバレッジを利用できます。

React 19 と最新の API

React 19 には、一般的なパターンを簡素化する重要な API 変更がいくつか導入されています。

通常のプロパティとしての ref： forwardRef は不要になりました。ref をプロパティとして直接渡します。

// React 19 — ref is just a prop
function Input({ ref, ...props }: InputProps & { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />
}

use() API： Promise またはコンテキストを読み取れます。また、フックとは異なり、条件付きで呼び出すことができます。

import { use } from 'react'

function UserPanel({ show }: { show: boolean }) {
  if (!show) return null
  const user = use(UserContext)
  return <div>{user.name}</div>
}

Actions と useActionState： サーバーおよびクライアントのアクションを使って、フォーム処理を簡素化します。

function ContactForm() {
  const [state, formAction, isPending] = useActionState(submitContact, null)
  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <button disabled={isPending}>Submit</button>
      {state?.error && <p>{state.error}</p>}
    </form>
  )
}

useOptimistic： 非同期処理中に UI を即座にフィードバックします。

function TodoList({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimistic] = useOptimistic(todos)

  async function addTodo(text: string) {
    addOptimistic([...optimisticTodos, { id: 'temp', text, pending: true }])
    await saveTodo(text)
  }

  return <ul>{optimisticTodos.map(t => <li key={t.id}>{t.text}</li>)}</ul>
}

React Compiler： オプトイン方式のコンパイラーで、コンポーネントと式を自動的にメモ化します。ほとんどの場合、useMemo、useCallback、React.memo を手動で使用する必要がなくなります。Vite プロジェクトでは、Babel プラグインとして追加します。

// vite.config.ts
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
})

React 19 が必要です。'use memo' ディレクティブを使い、ファイルごとに段階的に導入できます。

Vite 固有のベストプラクティス

メタフレームワークを使わずに Vite + React を使用する場合は、次の基本事項に従ってください。

• バレルファイルからのインポートは、バンドルサイズに関する最大の問題です。バレルの index.ts ファイルではなく、ソースファイルから直接インポートしてください。使いやすい構文が必要な場合は、vite-plugin-barrel を使用してください。
• 手動チャンク分割 — キャッシュを改善するため、安定性に応じてベンダーコード（react、router、query、UI ライブラリ）を分割します。
• ルートレベルのコード分割 — 各ルートで React.lazy() を使い、<Suspense> でラップします。
• 依存関係の事前バンドル — 解決に時間がかかる依存関係を optimizeDeps.include に追加すると、開発サーバーを高速化できます。
• バンドル分析 — 主要な依存関係を変更するたびに npx vite-bundle-visualizer を実行します。

Vite の設定パターンについて詳しくは、vite-bundle-optimization スキルを参照してください。

React + AI：「バイブコーディング」という新たなフロンティア

AI 支援開発： Copilot、ChatGPT、Cursor などのツールは、コンポーネントを生成したり、フックを提案したり、ビルドツールを設定したりできます。**「バイブコーディング」**とは、開発者が AI アシスタントと協力して作業するワークフローを表す言葉です。何を尋ねればよいか、出力をどう検証すればよいかを理解しているシニア開発者は、より多くの成果を得られます。

「バイブコーディング」を効果的に行うためのヒント：

• 定型コードや設定には AI を活用する
• コンポーネントのテンプレートを生成する
• テストや型の作成に AI を活用する
• 主導権を保つ — AI が生成したコードは必ずレビューする

React アプリにおける AI（AI を活用した UI）： React 開発者は、AI 機能を組み込んだ UI の構築を求められることが増えています。主な検討事項には、プロンプト管理、ストリーミング応答、エラー処理、AI 固有の UI 要素などがあります。Vercel AI SDK は、ストリーミングやキャッシュを抽象化する useChat などのフックを提供します。

私たちの見解： React の開発ワークフローにおいて、AI をツールとして活用しましょう。専門知識を活かして AI を導きます。アーキテクチャは自分で定義し、定型コードは AI に任せ、その後に結果を洗練させましょう。

結論

2026 年の React には、豊富な選択肢があります。

• ビルドツール： 多くの場合は Vite から始めましょう（Next.js 内で使う場合は Turbopack を使いましょう）。
• フレームワークを使うかどうか： 規模の大きいアプリでは、React フレームワーク（その筆頭は Next.js）を使う方向で検討しましょう。
• ルーティング： Next または Remix を使う場合は、組み込みの機能を使いましょう。独自のスタックを構築する場合は、型安全性を重視するなら TanStack Router、信頼性を重視するなら React Router を検討しましょう。
• 状態管理とデータライブラリ： サーバーデータには React Query を使い、複雑なグローバル状態には Zustand または Redux を使いましょう。
• React の新機能を活用する： フックは標準です。React 19 API（use()、Actions、useOptimistic）を使いましょう。サーバーコンポーネントを理解しましょう。自動メモ化には React Compiler を試してみましょう。
• パフォーマンス： 緊急性の低い更新には useTransition を使い、保存された状態より導出状態を優先し、外部サブスクリプションには useSyncExternalStore を使いましょう。react-render-optimization と react-data-fetching のスキルを参照してください。
• ワークフローにおける AI： AI コーディングアシスタントで生産性を高めつつ、出力は必ず検証しましょう。

React はこれまで以上に強力です。適切なスタックを選べば、堅牢でスケーラブルなアプリケーションを構築するための準備が整います。コーディングを楽しんでください。コンポーネントが必要なときだけ再レンダリングされますように！

ソース

• patterns.dev/react/react-2026