React Code Review

概要

このスキルはReactアプリケーション向けの体系的で包括的なコードレビュー機能を提供します。React 19のベストプラクティス、コンポーネントアーキテクチャパターン、フック使用法、アクセシビリティ標準、本番環境対応基準に照らしてコードを評価します。レビューは重大度（Critical、Warning、Suggestion）別にカテゴリ分けされた実行可能な指摘と改善のための具体的なコード例を出力します。

このスキルは、エージェントシステムを通じて実行された場合、深いアーキテクチャ分析のために react-software-architect-review エージェントに委譲します。

使用場面

• マージ前のReactコンポーネント、フック、ページのレビュー
• コンポーネント構成と再利用可能性パターンの検証
• 適切なフック使用法の確認（useState、useEffect、useMemo、useCallback）
• React 19パターンのレビュー（use、useOptimistic、useFormStatus、Actions）
• 状態管理アプローチの評価（ローカル、Context、外部ストア）
• パフォーマンス最適化の評価（メモ化、コード分割、遅延読み込み）
• アクセシビリティコンプライアンスのレビュー（WCAG、セマンティックHTML、ARIA）
• プロップ、状態、イベントに対するTypeScriptの型定義検証
• Tailwind CSSとスタイリングパターンの確認
• 新しいReact機能の実装後またはコンポーネントアーキテクチャのリファクタリング後

手順

1. スコープの特定: レビュー対象のReactコンポーネントとフックを確認します。globを使用して.tsx/.jsxファイルを検出し、grepを使用してコンポーネント定義、フック使用法、コンテキストプロバイダーを特定します。

2. コンポーネントアーキテクチャの分析: 適切なコンポーネント構成を検証します。単一責任の原則、適切なサイズ、再利用可能性を確認します。200行以上のコンポーネント、7つ以上のプロップを持つコンポーネント、関心の混合がないか探します。

3. フック使用法のレビュー: 適切なフック使用法を検証します。useEffect/useMemo/useCallbackの依存配列、useEffect内のクリーンアップ関数、不正なメモ化によって起こされる不要な再レンダリングを確認します。

4. 状態管理の評価: 状態の配置を評価します。適切な結合、不要なリフティング、ContextとExternalストアの適切な使用を確認します。サーバー状態がTanStack Query、SWR、または同様のライブラリを使用しており、手動のuseEffect + useStateパターンではないことを検証します。

5. アクセシビリティの確認: セマンティックHTML使用法、ARIA属性、キーボードナビゲーション、フォーカス管理、スクリーンリーダー互換性をレビューします。インタラクティブ要素がアクセシビリティ対応であり、フォーム入力に適切なラベルがあることを検証します。

6. パフォーマンスの評価: 不要な再レンダリング、高コストなコンポーネントに対するReact.memoの欠落、不正なuseCallback/useMemo使用法、コード分割の欠落、大規模なバンドルインポートを探します。

7. TypeScript統合のレビュー: プロップ型定義、イベントハンドラー型、ジェネリックコンポーネントパターン、ユーティリティ型の適切な使用を確認します。特定の型が可能な場合にanyが使用されていないことを検証します。

8. レビューレポートの作成: 重大度別（Critical、Warning、Suggestion）に分類された指摘、肯定的な観察、優先順付きの推奨事項とコード例を含む構造化レポートを生成します。

例

例1: フック依存の問題

// ❌ 悪い例: 依存配列漏れによるステイルクロージャー
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, []); // userIdが依存配列にない

  return <div>{user?.name}</div>;
}

// ✅ 良い例: 適切な依存配列とクリーンアップ
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    let cancelled = false;
    fetchUser(userId).then((data) => {
      if (!cancelled) setUser(data);
    });
    return () => { cancelled = true; };
  }, [userId]);

  return <div>{user?.name}</div>;
}

// ✅ より良い例: サーバー状態にはTanStack Queryを使用
function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  });

  if (isLoading) return <Skeleton />;
  return <div>{user?.name}</div>;
}

例2: コンポーネント構成

// ❌ 悪い例: データ取得、フィルタリング、レンダリングを混合した単一コンポーネント
function Dashboard() {
  const [users, setUsers] = useState([]);
  const [filter, setFilter] = useState('');
  useEffect(() => { /* フェッチ + フィルタ + ソート全てが1つに */ }, [filter]);
  return <div>{/* 200行以上の関心の混合 */}</div>;
}

// ✅ 良い例: 焦点を絞ったコンポーネントとカスタムフックで構成
function Dashboard() {
  return (
    <div>
      <UserFilters />
      <Suspense fallback={<TableSkeleton />}>
        <UserTable />
      </Suspense>
      <UserPagination />
    </div>
  );
}

例3: アクセシビリティレビュー

// ❌ 悪い例: アクセシビリティ非対応のインタラクティブ要素
function Menu({ items }: { items: MenuItem[] }) {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <div onClick={() => setOpen(!open)}>Menu</div>
      {open && (
        <div>
          {items.map(item => (
            <div key={item.id} onClick={() => navigate(item.path)}>
              {item.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ✅ 良い例: 適切なセマンティクスとキーボードサポート付きのアクセシビリティ対応
function Menu({ items }: { items: MenuItem[] }) {
  const [open, setOpen] = useState(false);
  return (
    <nav aria-label="Main navigation">
      <button
        onClick={() => setOpen(!open)}
        aria-expanded={open}
        aria-controls="menu-list"
      >
        Menu
      </button>
      {open && (
        <ul id="menu-list" role="menu">
          {items.map(item => (
            <li key={item.id} role="menuitem">
              <a href={item.path}>{item.label}</a>
            </li>
          ))}
        </ul>
      )}
    </nav>
  );
}

例4: パフォーマンス最適化

// ❌ 悪い例: レンダリング毎に再作成されるコールバックが子の再レンダリングを引き起こす
{filtered.map(product => (
  <ProductCard
    key={product.id}
    product={product}
    onSelect={() => console.log(product.id)} // レンダリング毎に新しい関数
  />
))}

// ✅ 良い例: 安定したコールバック + メモ化された子
const handleSelect = useCallback((id: string) => {
  console.log(id);
}, []);

const filtered = useMemo(
  () => products.filter(p => p.name.toLowerCase().includes(search.toLowerCase())),
  [products, search]
);

{filtered.map(product => (
  <ProductCard key={product.id} product={product} onSelect={handleSelect} />
))}

const ProductCard = memo(function ProductCard({ product, onSelect }: Props) {
  return <div onClick={() => onSelect(product.id)}>{product.name}</div>;
});

例5: TypeScriptプロップレビュー

// ❌ 悪い例: 型定義が緩くプロップ定義がない
function Card({ data, onClick, children, ...rest }: any) {
  return (
    <div onClick={onClick} {...rest}>
      <h2>{data.title}</h2>
      {children}
    </div>
  );
}

// ✅ 良い例: 厳密な型定義と適切なインターフェース
interface CardProps extends React.ComponentPropsWithoutRef<'article'> {
  title: string;
  description?: string;
  variant?: 'default' | 'outlined' | 'elevated';
  onAction?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  children: React.ReactNode;
}

function Card({
  title,
  description,
  variant = 'default',
  onAction,
  children,
  className,
  ...rest
}: CardProps) {
  return (
    <article className={cn('card', `card--${variant}`, className)} {...rest}>
      <h2>{title}</h2>
      {description && <p>{description}</p>}
      {children}
      {onAction && <button onClick={onAction}>Action</button>}
    </article>
  );
}

レビュー出力フォーマット

すべてのコードレビュー指摘を以下の構成で表示します：

1. サマリー

全体的な品質スコア（1～10）と主要な観察点の簡潔な概要。

2. Critical Issues（修正必須）

バグ、セキュリティ脆弱性、または機能障害を引き起こす問題。

3. Warnings（修正推奨）

ベストプラクティスに違反する、パフォーマンス問題、または保守性を低下させる問題。

4. Suggestions（改善検討）

コード構成、アクセシビリティ、または開発者体験の改善提案。

5. Positive Observations

良く実装されたパターンと認識すべき優れたプラクティス。

6. Recommendations

最も影響力の高い改善のためのコード例付きの優先順付き次のステップ。

ベストプラクティス

• コンポーネントは焦点を絞る — 単一責任、200行以下
• 状態を使用するコンポーネントの近くに結合する
• カスタムフックを使用してコンポーネントから再利用可能なロジックを抽出する
• React.memoは測定された再レンダリングコストを正当化する場合のみ適用する
• useEffect + useStateの代わりに、サーバー状態にはTanStack QueryまたはSWRを使用する
• 外部リソースをサブスクライブする場合、useEffectに常にクリーンアップ関数を含める
• セマンティックHTMLを最初に書く。ネイティブセマンティクスが不十分な場合のみARIAを追加する
• TypeScript厳密モードを使用し、コンポーネントプロップでanyを回避する
• グレースフルな障害処理のためにエラーバウンダリーを実装する
• 複雑な条件付きレンダリングより構成を優先する

制約と警告

• プロジェクトのReactバージョンを尊重する — 古いバージョンにはReact 19機能を提案しない
• プロジェクトが特定の状態管理ライブラリを標準化していない限り、特定のライブラリを強制しない
• メモ化は常に有益とは限らない — 再レンダリング影響が測定可能な場合のみ提案する
• アクセシビリティ推奨事項はWCAG 2.1 AAをベースラインとすべき
• 高い信頼度の問題に焦点を当てる — 主観的なスタイル選択で誤検出を回避する
• 明確で測定可能なメリットなく動作しているコンポーネントの書き直しを提案しない

参考資料

詳細なレビューチェックリストとパターンドキュメントについては、references/ディレクトリを参照してください：

• references/hooks-patterns.md — Reactフックのベストプラクティスと一般的な誤り
• references/component-architecture.md — コンポーネント構成とデザインパターン
• references/accessibility.md — ReactのアクセシビリティチェックリストとARIAパターン