React Stack Patterns

Table of Contents

• When to Use
• Instructions
• Details
• Source

React は単純なコンポーネントライブラリの初期の日から大きく進化しました。2025 年後半までに、React エコシステムは豊富だが複雑となり、アプリ構築のためのスタック選択には複数の方法が提供されています。モダン React 開発者は、ビルドツールとフレームワークからルータやその他のライブラリに至るまで、スタックの各層で選択を迫られます。公式 React ドキュメント(現在は react.dev に掲載)は新規プロジェクトでは高レベルのフレームワーク使用を推奨しています。実際のところ、かつてのブートストラップツールの定番だった Create React App(CRA) は 2025 年初頭に廃止され、React アプリをはじめる方法にシフトが起きていることを示しています。

スクラッチからツーリングをつなぎ合わせる代わりに、推奨は React フレームワーク(Next.js や Remix など)を使用するか、特殊な要件がある場合は Vite や Parcel などのモダンビルドツールから開始することです。本ガイドは意見的なアプローチで、2025 年の React ランドスケープを探索します:ツールチェーンとスタックはミッドレベルからシニア開発者向けに提案し、ビルドツール(Vite、Turbopack、Webpack)、ルーティングソリューション(React Router vs. TanStack Router)、人気のフレームワーク(Next.js、Remix など)、状態およびデータ管理の主要ライブラリ、そしてAI が React 開発にどのような影響を与えているかをカバーします。

When to Use

• React スタック(フレームワーク、ビルドツール、ルーティング、状態管理)を選択する際のリファレンスとして使用
• 新しい React プロジェクトを開始し、モダンエコシステムオプションを評価するときに役立つ

Instructions

• 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 as prop、use()、Actions)を採用
• AI 支援開発ツールを活用しながらも、常に生成されたコードを検証する

Details

対象読者: 本ガイドは基礎知識を持ち、2025 年のスタックについて情報に基づいた決定をしたいと考えるミッドレベルからシニア React 開発者向けに書かれています。

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

React コアチームは、コミュニティのトレンドに沿ってガイダンスを更新しました。新しい React ドキュメントは、プロジェクトを開始する際に*「車輪の再発明をしない」*ことを強調しています。Create React App は React SPA をすぐにスピンアップするのに役立ちましたが、本番ニーズへのスケーリングに苦労しました(例えば組み込みのルーティングや SSR がない)。CRA が廃止された今、開発者はフル機能フレームワークに向かうか、より軽量なツールを使用して独自のスタックを組み立てるかを促されています。React コアが与えているルールオブサム:アプリがルーティングを必要とする場合、フレームワークの恩恵を受けるだろう。モダンフレームワークはルーティングをデータ取得、コード分割などと密接に統合するため、自分自身でミニフレームワークを書くことになりません。

なぜこのシフトが起こったのか?この数年間、React は hooks、並行レンダリング、Server Components などの強力な機能を導入しました。しかし、これらの多くを最適な方法で活用するには、しばしば洗練されたツーリングが必要です。Next.js のようなフレームワークは React の最新機能の運搬役となりました(例えば ストリーミング SSR、サーバ側データロードなど)。React Server Components(RSC) は Next.js 13 の App Router に本番対応機能としてランディングし、ハイブリッドレンダリングモデル(サーバ駆動 UI でサーバレンダリングコンポーネントの JS コストがゼロ)を実現しました。初期レポートは、RSC を使用する際にバンドルサイズが 20% 以上削減されたことを示しました。サーバで実行するロジックはクライアントに配信されないためです。React 19 はServer Actions(use server' ディレクティブで呼び出される)も安定化させており、フォーム送信やその他のミューテーションをサーバで実行するように定義できます — フロントエンドとバックエンドの線をさらに曖昧にしています。

ただし、すべてのプロジェクトがヘビーウェイトフレームワークを必要とするわけではありません。React チームはそのうえでもリーンに行く場合があることを認めています:小さいウィジェット、既存サイトへの React 追加、またはスクラッチから構築して学習。カスタムルートを選択する場合でも、Vite や RSBuild のようなモダンツールを使用して React の更新された「Build from Scratch」ガイドに従うことができます。

2025 年のビルドツール:Vite、Turbopack、その他

ビルドツールチェーンは、あなたの React コード(JSX、CSS など)をブラウザで実行できるものに変換するものです。2025 年には、開発者体験が大幅に向上しました:

• Vite はフレームワークではない React プロジェクトの事実上の選択肢となっています。Vite は超高速開発サーバ(ESBuild で駆動)を提供し、本番バンドリングに Rollup を使用します。その人気は急上昇し、2025 年までに React 統合は Next.js の次に最も広く使用されているビルドセットアップとなっています。アピール:瞬時のサーバ開始とほぼ瞬時のモジュールホットリロード。CRA から移行する場合、React チームは明確に Vite をトップの選択肢として提案しています。

• Turbopack - Vercel が導入した新しい Rust ベースのバンドラ - は、増分コンパイルに焦点を当てた Webpack の精神的後継者として位置付けられている今後の有望なツールです。Next.js 内に統合されているため、Next を使用する場合、おそらくそこから恩恵を受けるでしょう。Next の外では、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 の強力な点は、その強固なデフォルトと規約です。完全なソリューションが欲しい場合、新しい React アプリを構築するための最高の推奨事項。

Remix(と React Router v7): Remix は Web の基礎と段階的な改善を強調しています。React Router チームによって作成された Remix は、ルーティング + データロード + ミューテーションへの統合的アプローチを導入しました。React Router v7 は Remix の多くのパターンを採用しました。特に、サーバ対クライアント作業に対し微妙な制御が必要なアプリに対して強固な選択。

「フレームワークなし」カスタムセットアップ(Vite + ライブラリスタック): フルフレームワークが必要でないと決定した場合、Vite から始め、次第に追加します:例えば ルーティング用の React Router または TanStack Router、データ取得用の React Query。SSR/SEO が無関係な内部ツールのようなものに対して、このアプローチを選ぶかもしれません。

その他の注目: Astro はコンテンツサイト向けに注目を集めています(デフォルトではゼロ JS、フレームワークをミックス)。RedwoodJS は「React + GraphQL + Prisma + SSR」の意見的なスタックを提供します。Expo は Expo Router で React Native とウェブを一緒にします。

**我々の意見的なアドバイス:**ツールをジョブに合わせてください:

• Next.js は SSR、SEO、またはサーバコンポーネントが必要な公開向けアプリ向け
• Remix は段階的改善と Web の基礎を重視するアプリ向け
• Vite + React Router/TanStack Router は SPA、ダッシュボード、内部ツール、および SSR が要件でないアプリ向け

カスタム Vite SSR(メタフレームワークなし): SSR が必要だがフルフレームワークが不要な場合、Vite は組み込み SSR サポートを持ちます。Vike(旧 vite-plugin-ssr)のようなツールは、Vite の上に薄いレイヤーを提供し、ファイルベースのルーティングを持つ SSR、フレームワークのような DX をもたらし、完全な制御を保ちます。

// 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('<!--app-->', appHtml))
})

これは、SEO またはパフォーマンスのための SSR が必要だが、アプリのルーティングとデータロードがシンプルで、フレームワークが価値よりも複雑さを加える場合に適した選択肢です。

2025 年の多くの成功した React アプリは、メタフレームワークなしで Vite 上で実行されます。カギは、最も機能豊富なオプションにデフォルトするのではなく、制約に対する適切なツールを選択することです。

ルーティングソリューション:React Router vs. TanStack Router

フレームワーク提供ルーティング: Next.js または Remix を使用する場合、ルーティングはほぼフレームワークによって解決されます。これらのフレームワークはルーティングをデータ取得と密接に関連付けており、ローディング滝のような一般的な落とし穴を回避します。

React Router: 実績があり、広く使用されています。React Router v6 は hooks と nested routes で簡潔な API を導入しました。v6.4 以降では、async data と suspense サポートを追加しました。フレームワークを使用していない場合、依然としてトップの選択肢です。

TanStack Router: 第一級TypeScript サポート、組み込みキャッシング付きデータローダー、検索パラメータの豊かな API を備えた新しい参入者。Remix/Next ルータのパワーを提供しようとしていますが、特定のフレームワークから分離されています。

**最大の違い:**は Type Safety と Developer Experience です。TanStack Router は「TS-first」で構築されています。React Router はより最小限です。どちらも nested routes とデータロードをできます。

**我々の推奨:**カスタムスタックでは、モダン機能セットについて 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} />;
}

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

Hooks でのローカルおよびグローバル状態: ローカル状態の場合、useState と useReducer で十分です。React の Context API は軽量なグローバル状態で機能しますが、注意してください — コンテキスト更新はすべてのコンシューマーを再レンダリングします。

Redux(およびモダン Redux Toolkit): 2025 年でも非常に生きており、大規模アプリケーションに集中しています。Redux Toolkit(RTK) はボイラープレートを大幅に削減します。Redux を手に取るべきはいつ? アプリが非常に複雑な状態遷移を持つか、アンドゥ/リドゥ、キャッシング、devtools のような機能が必要な場合。

Zustand、Jotai、および軽量な状態ライブラリ: より単純なグローバルストア要件のため。Zustand はボイラープレートなしの最小主義的、hook ベースのグローバル状態ストアを提供します。

TanStack Query: サーバ状態管理のリーダー。useQuery と useMutation のような hooks を提供し、宣言的にデータを取得しキャッシュします。

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 はこれを直接使用
/// <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 はあなたに提供:瞬時の watch モード(Vite の変換キャッシュと共有)、ネイティブ ESM サポート、Jest 互換 API(describe、it、expect、vi.fn())、ソース内テスト、v8 または istanbul を備えた組み込みコードカバレッジ。

React 19 とモダン API

React 19 は一般的なパターンを簡潔にする複数の重要な API 変更をもたらします:

prop としての ref: もう forwardRef がない — ref を直接 prop として渡してください:

// React 19 — ref はただの prop
function Input({ ref, ...props }: InputProps & { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />
}

use() API: Promise またはコンテキストを読むことができ、Hooks とは異なり条件付きで呼ぶことができます:

import { use } from 'react'

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

Actions と useActionState: サーバおよびクライアント actions でフォーム処理を簡潔にします:

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(メタフレームワークなし)を使用する場合、これらのエッセンシャルに従ってください:

• Barrel file imports はバンドルサイズ問題の #1 — barrel index.ts ファイルではなくソースファイルから直接インポート。エルゴノミックな構文が必要な場合は vite-plugin-barrel を使用。
• 手動チャンク分割 — ベンダーコードを安定性別に分割(react、router、query、UI ライブラリ)してより良いキャッシング。
• ルートレベルコード分割 — 各ルートに対して React.lazy() を使用し、<Suspense> でラップ。
• 依存関係プリバンドリング — 遅く解決される依存関係を optimizeDeps.include に追加して開発サーバを高速化。
• バンドル分析 — 主要な依存関係変更後に毎回 npx vite-bundle-visualizer を実行。

完全な Vite 設定パターンについては vite-bundle-optimization skill を参照してください。

React + AI:「Vibe Coding」の新しいフロンティア

AI 支援開発: Copilot、ChatGPT、または Cursor のようなツールはコンポーネントを生成し、hooks を提案し、ビルドツールを設定できます。**「vibe coding」**という用語は開発者が AI アシスタントと協力するワークフローを説明します。シニア開発者は何を聞くか、出力をどのように検証するかを知っているため、それからより多く得ます。

「vibe coding」を効果的に行うためのヒント:

• ボイラープレートと設定に AI を使用
• コンポーネントテンプレートを生成
• テストと型について AI を活用
• 制御を保つ — 常に AI 生成コードをレビュー

React アプリケーションの AI(AI 駆動 UI): React 開発者には AI 機能を組み込む UI を構築することがますます求められています。主な考慮事項には prompt 管理、ストリーミングレスポンス、エラー処理、AI 固有の UI 要素が含まれます。Vercel AI SDK は useChat のような hooks を提供し、ストリーミングとキャッシングを抽象化します。

我々の見解: AI を React 開発ワークフローのツールとして取り入れてください。あなたの専門知識を使用して AI をガイド:アーキテクチャを定義し、AI にボイラープレートを埋めさせ、その後で結果を洗練させます。

結論

2026 年の React は選択肢の豊かさを提供します:

• ビルドツール: ほとんどの場合は Vite から始める(Next.js 内なら Turbopack)。
• フレームワーク又はそうでないか: サイズのあるアプリに対しては React フレームワーク(Next.js が最前線)の使用に傾く。
• ルーティング: Next/Remix なら組み込みを使用。独自のスタックを構築する場合、タイプセーフのため TanStack Router を検討するか、信頼性のため React Router。
• 状態およびデータライブラリ: サーバデータには React Query を、複雑なグローバル状態には Zustand または Redux を使用。
• 新しい React 機能を採用: Hooks は標準。React 19 API(use()、Actions、useOptimistic)を使用。Server Components を理解。自動メモ化のため React Compiler を試す。
• パフォーマンス: 非緊急更新に useTransition を使用、保存状態より派生状態、外部購読に useSyncExternalStore。react-render-optimization および react-data-fetching skills を参照。
• ワークフローの AI: AI コーディングアシスタントで生産性を向上させ、常に出力を検証。

React はかつてないほど強力です。適切なスタックを選択することで、堅牢でスケーラブルなアプリケーション構築に十分に備えた状態になります。コーディングを楽しんでください。そして、あなたのコンポーネントが必要なときにだけ再レンダリングされることを願っています!

Source

• patterns.dev/react/react-2026