React エコシステム

このコースの最後のチャプターです。

チャプター9で体験したように、Reactの力はコア機能だけでなく、その周辺に広がる豊かなエコシステムにあります。このチャプターでは、Reactの世界の「地図」を眺めましょう。これからの学習の羅針盤になります。

エコシステムの基本パターン

Reactを使い続けると、こんなサイクルに入ります：

1. 「この機能が欲しい」と思う
2. Reactのコアだけでは足りないと気づく
3. その問題を解決するライブラリを探す
4. ライブラリを学んで使う
5. さらに次の問題が出てくる → 1に戻る

これは設計通りです。 Reactは意図的に「最小限のコア」として設計されており、残りはコミュニティのライブラリに委ねています。この考え方を「バッテリー別売り」と表現する人もいます。

以下では、カテゴリーごとに主要なライブラリを紹介します。

ルーティング: React Router

シングルページアプリケーション（SPA）では、URLと表示するコンポーネントの対応をJavaScript側で管理します。これを「クライアントサイドルーティング」と言います。

React Router は事実上の標準ルーティングライブラリです。

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">ホーム</Link>
        <Link to="/about">アバウト</Link>
      </nav>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/users/:id" element={<UserPage />} /> {/* 動的ルート */}
      </Routes>
    </BrowserRouter>
  );
}

Route::get('/', [HomeController::class, 'index']);
Route::get('/users/{id}', [UserController::class, 'show']);

状態管理: Zustand

コンポーネントをまたいで共有したいStateがある場合（ログインユーザー情報、ショッピングカートの中身など）、グローバルな状態管理が必要になります。

Zustand は最もシンプルで学習コストが低い状態管理ライブラリです：

import { create } from 'zustand';

// ストアを定義する
const useUserStore = create((set) => ({
  user: null,  // ログインユーザー情報
  setUser: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

// どのコンポーネントからでも使える
function Header() {
  const user = useUserStore((state) => state.user);
  const logout = useUserStore((state) => state.logout);

  return (
    <header>
      <span>{user?.name}さん</span>
      <button onClick={logout}>ログアウト</button>
    </header>
  );
}

データ取得: TanStack Query

APIからデータを取得する処理には、想像以上に多くの「状態」があります：

• ローディング中かどうか
• エラーが起きたかどうか
• データはキャッシュされているか
• 再取得が必要かどうか

チャプター7で useEffect + useState を組み合わせてこれを手動管理しましたね。TanStack Query（旧名: React Query）はこれを完全に自動化します：

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

function UserList() {
  // ローディング・エラー・データ・リフェッチが全自動
  const { data: users, isLoading, error } = useQuery({
    queryKey: ['users'],           // キャッシュのキー
    queryFn: () => fetch('/api/users').then(res => res.json()),
    staleTime: 5 * 60 * 1000,     // 5分間キャッシュを使い回す
  });

  if (isLoading) return <p>読み込み中...</p>;
  if (error) return <p>エラーが発生しました</p>;

  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

UIコンポーネント: shadcn/ui と Radix UI

スタイリングされたUIコンポーネント（ボタン、モーダル、ドロップダウンなど）を0から作るのは時間がかかります。UIライブラリを使うと開発速度が劇的に上がります。

shadcn/ui は近年最も注目を集めているUIライブラリです。「ライブラリをインストール」する従来の方式ではなく、コンポーネントのソースコードを自分のプロジェクトにコピーする方式をとっており、カスタマイズが容易です。

Radix UI はアクセシビリティ（WAI-ARIA対応）に特化した「スタイルなし」のコンポーネントライブラリです。shadcn/ui はRadix UIを内部で使用しています。

他に有名なUIライブラリとして Material UI（MUI）、Ant Design、Chakra UI などがあります。

CSS: Tailwind CSS

Tailwind CSS はユーティリティファーストのCSSフレームワークです。クラス名を組み合わせてスタイルを記述します：

// Tailwindのクラスで直接スタイリングする
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  登録する
</button>

CSSファイルを別に書く必要がなく、JSXと一体化したスタイリングができます。React（とNext.js）との相性が非常によく、業界標準になりつつあります。

CSS Modules も選択肢の一つです。CSSファイルをコンポーネントごとにスコープして、クラス名の衝突を防ぎます：

/* Button.module.css */
.button { background-color: blue; }

import styles from './Button.module.css';
<button className={styles.button}>ボタン</button>

メタフレームワーク: Next.js

Reactはあくまで「UIライブラリ」です。ルーティング、APIエンドポイント、サーバーサイドレンダリング、ファイルシステムとの統合……これらが必要な「フルスタックWebアプリ」を作りたい場合は Next.js を使います。

Next.js はReactをベースにしたフルスタックフレームワークです。

テスト: Vitest と React Testing Library

コードが意図通りに動くことを自動で確認するテストも、Reactエコシステムの重要な一部です。

• Vitest: 高速なテストランナー（Jestの代替として人気急上昇中）
• React Testing Library: コンポーネントのテストを書くためのライブラリ。「ユーザーの視点」でUIをテストすることを推奨する思想が特徴

import { render, screen, fireEvent } from '@testing-library/react';
import { test, expect } from 'vitest';
import RegistrationForm from './RegistrationForm';

test('空のフォームを送信するとエラーが表示される', async () => {
  render(<RegistrationForm />);

  // ユーザーの操作をシミュレートする
  fireEvent.click(screen.getByText('登録する'));

  // エラーメッセージが表示されることを確認する
  expect(await screen.findByText('名前を入力してください')).toBeInTheDocument();
});

これからの学習ロードマップ

このコースで学んだことをベースに、次に学ぶべきことを整理します：

近いうちに学ぶべきもの

1. Next.js — ReactでWebアプリを作るなら、ほぼ必須の次のステップ
2. TanStack Query — API連携を本格化するとすぐに必要になる
3. Tailwind CSS — スタイリングをより実践的に

必要になったら学ぶもの

4. Zustand / Redux — アプリが大きくなり、状態共有が複雑になったとき
5. React Router — Next.jsを使わないSPAを作るとき
6. Vitest + React Testing Library — テストを書き始めるとき
7. TypeScript — チーム開発や大きなプロジェクトで型安全性が欲しいとき

Reactの公式ドキュメント

react.dev はReactの公式ドキュメントです。日本語対応もされており、このコースで学んだ内容をより深く学べます。特に「Learn」セクションは、実際に手を動かしながら学べる構成になっています。

コースの終わりに

このコースを最後まで完走した皆さん、本当におめでとうございます。

チャプター1でJSXに戸惑い、チャプター4でStateの考え方に頭を使い、チャプター7でuseEffectの依存配列に悩み、チャプター8でフォームを手作りする苦労を経験し、チャプター9でライブラリの威力に「おお！」と感じた——その旅程は、Reactを「使える」開発者になるために必要な経験でした。

Laravelのバックエンド知識を持つ皆さんは、フロントエンド開発者として非常に有利な出発点に立っています。「データはどこから来るのか」「バリデーションはなぜ必要か」「フォームの送信処理はどう動くのか」——これらを既に知っているからです。

あとは React の文法とエコシステムに慣れるだけです。その第一歩を、このコースで踏み出せました。

自分でプロダクトを作りながら学ぶ——それが最速の上達法です。小さいものでも構いません。「このフォームを作ってみよう」「このAPIにつないでみよう」と手を動かし続けてください。

React の世界で皆さんが活躍されることを願っています。