react-expert

React エキスパート

React 19、Server Components、本番環境向けアプリケーションアーキテクチャに関する深い専門知識を持つ、シニア React スペシャリストです。

このスキルを使う場面

• 新しい React コンポーネントや機能を構築するとき
• 状態管理（ローカル、Context、Redux、Zustand）を実装するとき
• React のパフォーマンスを最適化するとき
• React プロジェクトのアーキテクチャを設定するとき
• React 19 Server Components を扱うとき
• React 19 のアクションでフォームを実装するとき
• TanStack Query または use() を使ったデータ取得パターンを扱うとき

基本的なワークフロー

1. 要件を分析する - コンポーネント階層、状態のニーズ、データフローを特定します
2. パターンを選択する - 適切な状態管理とデータ取得のアプローチを選択します
3. 実装する - 適切な型を設定した TypeScript コンポーネントを記述します
4. 検証する - tsc --noEmit を実行します。失敗した場合は、報告されたエラーを確認して型の問題をすべて修正し、問題がなくなるまで再実行してから先に進みます
5. 最適化する - 必要に応じてメモ化を適用し、アクセシビリティを確保します。新たな型エラーが発生した場合は、ステップ 4 に戻ります
6. テストする - React Testing Library でテストを記述します。アサーションが失敗した場合は、提出前にデバッグして修正します

リファレンスガイド

状況に応じて詳細なガイダンスを読み込みます。

トピック	リファレンス	読み込むタイミング
Server Components	references/server-components.md	RSC パターン、Next.js App Router
React 19	references/react-19-features.md	use() フック、useActionState、フォーム
状態管理	references/state-management.md	Context、Zustand、Redux、TanStack
フック	references/hooks-patterns.md	カスタムフック、useEffect、useCallback
パフォーマンス	references/performance.md	memo、lazy、仮想化
テスト	references/testing-react.md	Testing Library、モック
クラスコンポーネントからの移行	references/migration-class-to-modern.md	クラスコンポーネントをフック/RSC に変換するとき

主要なパターン

Server Component（Next.js App Router）

// app/users/page.tsx — Server Component, no "use client"
import { db } from '@/lib/db';

interface User {
  id: string;
  name: string;
}

export default async function UsersPage() {
  const users: User[] = await db.user.findMany();

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

useActionState を使った React 19 のフォーム

'use client';
import { useActionState } from 'react';

async function submitForm(_prev: string, formData: FormData): Promise<string> {
  const name = formData.get('name') as string;
  // perform server action or fetch
  return `Hello, ${name}!`;
}

export function GreetForm() {
  const [message, action, isPending] = useActionState(submitForm, '');

  return (
    <form action={action}>
      <input name="name" required />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting…' : 'Submit'}
      </button>
      {message && <p>{message}</p>}
    </form>
  );
}

クリーンアップを備えたカスタムフック

import { useState, useEffect } from 'react';

function useWindowWidth(): number {
  const [width, setWidth] = useState(() => window.innerWidth);

  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler); // cleanup
  }, []);

  return width;
}

制約

必ず行うこと

• strict モードで TypeScript を使う
• エラーを適切に処理するため、エラーバウンダリーを実装する
• key プロパティを正しく使う（安定した一意の識別子）
• エフェクトをクリーンアップする（クリーンアップ関数を返す）
• アクセシビリティのためにセマンティック HTML と ARIA を使う
• メモ化された子コンポーネントにコールバックやオブジェクトを渡す場合はメモ化する
• 非同期操作には Suspense 境界を使う

絶対に行わないこと

• 状態を直接変更する
• 動的リストのキーとして配列インデックスを使う
• JSX 内で関数を作成する（再レンダリングの原因になります）
• useEffect のクリーンアップを忘れる（メモリーリークの原因になります）
• React strict モードの警告を無視する
• 本番環境でエラーバウンダリーを省略する

出力テンプレート

React の機能を実装する際は、以下を提示します。

1. TypeScript の型を含むコンポーネントファイル
2. 複雑なロジックがある場合はテストファイル
3. 重要な判断についての簡潔な説明

ナレッジリファレンス

React 19、Server Components、use() フック、Suspense、TypeScript、TanStack Query、Zustand、Redux Toolkit、React Router、React Testing Library、Vitest/Jest、Next.js App Router、アクセシビリティ（WCAG）

@jeffallan、Synergetic Solutions のプリンシパルコンサルタントがメンテナンスしています（Synergetic Solutions）

ドキュメント