Développement React avec Claude Code

ReactとClaude Codeで開発速度を引き上げる

React開発では、コンポーネントの設計、状態管理、カスタムフックの実装など、パターン化された作業が多くあります。Claude Codeはこれらを高速に生成しつつ、ベストプラクティスに沿ったコードを出力します。

コンポーネントの一括生成

画面全体のコンポーネント構成を一度に作成できます。

> ユーザー管理画面のコンポーネントを作成して。
> - UserListPage: ページ全体のレイアウト
> - UserTable: テーブル表示（ソート・フィルター対応）
> - UserRow: 各行
> - UserSearchBar: 検索バー
> - UserCreateModal: 新規作成モーダル
> Tailwind CSSでスタイリング。型定義も作成して。

生成されるコンポーネント例

interface User {
  id: string;
  name: string;
  email: string;
  role: "admin" | "editor" | "viewer";
  isActive: boolean;
}

interface UserTableProps {
  users: User[];
  sortBy: keyof User;
  sortOrder: "asc" | "desc";
  onSort: (field: keyof User) => void;
  onEdit: (user: User) => void;
  onDelete: (userId: string) => void;
}

function UserTable({ users, sortBy, sortOrder, onSort, onEdit, onDelete }: UserTableProps) {
  return (
    <div className="overflow-x-auto rounded-lg border border-gray-200">
      <table className="min-w-full divide-y divide-gray-200">
        <thead className="bg-gray-50">
          <tr>
            {(["name", "email", "role"] as const).map((field) => (
              <th
                key={field}
                onClick={() => onSort(field)}
                className="cursor-pointer px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 hover:bg-gray-100"
              >
                {field}
                {sortBy === field && (sortOrder === "asc" ? " ↑" : " ↓")}
              </th>
            ))}
            <th className="px-6 py-3" />
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200 bg-white">
          {users.map((user) => (
            <UserRow key={user.id} user={user} onEdit={onEdit} onDelete={onDelete} />
          ))}
        </tbody>
      </table>
    </div>
  );
}

カスタムフックの生成

よくあるパターンのカスタムフックを生成させましょう。

> APIデータのフェッチ、ローディング、エラー処理を
> 管理するカスタムフック useApi を作成して。
> ジェネリクスで型安全にして。

import { useState, useEffect, useCallback } from "react";

interface UseApiResult<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

function useApi<T>(url: string, options?: RequestInit): UseApiResult<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  const fetchData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(url, options);
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      const json = await response.json();
      setData(json);
    } catch (err) {
      setError(err instanceof Error ? err : new Error("Unknown error"));
    } finally {
      setLoading(false);
    }
  }, [url]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return { data, loading, error, refetch: fetchData };
}

パフォーマンス最適化

Reactアプリのパフォーマンス問題もClaude Codeで対応できます。

> このコンポーネントの不要な再レンダリングを
> React.memo, useMemo, useCallback で最適化して。
> React DevToolsのProfilerで確認できるようにログも入れて。

const UserRow = React.memo(function UserRow({ user, onEdit, onDelete }: UserRowProps) {
  const handleEdit = useCallback(() => onEdit(user), [user, onEdit]);
  const handleDelete = useCallback(() => onDelete(user.id), [user.id, onDelete]);

  return (
    <tr className="hover:bg-gray-50">
      <td className="whitespace-nowrap px-6 py-4">{user.name}</td>
      <td className="whitespace-nowrap px-6 py-4">{user.email}</td>
      <td className="whitespace-nowrap px-6 py-4">
        <span className={`rounded-full px-2 py-1 text-xs ${roleStyles[user.role]}`}>
          {user.role}
        </span>
      </td>
      <td className="whitespace-nowrap px-6 py-4 text-right">
        <button onClick={handleEdit} className="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
        <button onClick={handleDelete} className="text-red-600 hover:text-red-800">Delete</button>
      </td>
    </tr>
  );
});

パフォーマンスの詳細な改善手法はパフォーマンス最適化ガイドを参照してください。

テストの自動生成

コンポーネントのテストもセットで生成できます。

> UserTable コンポーネントのテストを Testing Library で作成して。
> レンダリング、ソート操作、Delete操作をテスト。

テスト設計の詳細はテスト戦略完全ガイドで解説しています。TypeScriptでの型の活用法はTypeScript開発での活用法もあわせてご覧ください。

Next.jsとの組み合わせ

ReactアプリをNext.jsでフルスタック化する方法はNext.jsフルスタック開発で詳しく解説しています。

Summary

Claude Codeを使えば、Reactのコンポーネント設計からテスト作成まで一貫して高速に進められます。型安全性とパフォーマンスを意識したコードが自動生成されるため、品質と速度を両立できます。

Reactの詳細はReact公式ドキュメント、Claude CodeについてはAnthropic公式ドキュメントを参照してください。