ReactコンポーネントをClaudeでリファクタリングする

巨大化したReactコンポーネントを前に「どこから手をつければいいか分からない…」と感じたことはありませんか？Claude Codeを使えば、その作業を効率よく、しかも安全に進めることができます。

まずはClaudeにコードを「診断」してもらう

リファクタリングの第一歩は現状把握です。Claude Codeのチャットに対象ファイルを読み込ませて、こう入力してみましょう。

@UserDashboard.tsx このコンポーネントのリファクタリングポイントを列挙してください。
特にカスタムフックへの切り出しが有効な箇所を教えてください。

するとClaudeは「データ取得ロジックは useDashboardData として分離できます」「フォームのバリデーション処理は useFormValidation にまとめられます」といった具体的な提案を返してくれます。いきなりコードを書き始めるのではなく、まず設計方針を固めるのがポイントです。

※リファクタリング: 外部から見た動作を変えずに、コードの内部構造を整理・改善すること。

カスタムフックへの分割を依頼する

方針が固まったら、実際にコードを生成してもらいましょう。たとえばAPI通信とローディング状態の管理が混在しているなら、以下のように依頼できます。

以下のデータ取得ロジックを useDashboardData というカスタムフックに切り出してください。
戻り値は { data, isLoading, error } の形にしてください。

Claudeが生成したフックは、こんな形になります。

import { useState, useEffect } from 'react';

export const useDashboardData = (userId: string) => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(`/api/dashboard/${userId}`);
        setData(await res.json());
      } catch (e) {
        setError(e as Error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
  }, [userId]);

  return { data, isLoading, error };
};

生成されたコードをそのままコピーするのではなく、「元のコンポーネントへの組み込み例も書いてください」と続けて依頼すると、置き換え後のコードも出してもらえます。

※API: Application Programming Interface の略。外部サービスとプログラム間でデータをやりとりするための接続口。

分割結果をClaudeにレビューしてもらう

コンポーネントの分割が終わったら、最後にClaudeへレビューを依頼しましょう。

@hooks/useDashboardData.ts @components/UserDashboard.tsx
分割後のコードに問題はありますか？命名規則・責務の分離・パフォーマンスの観点でチェックしてください。

「useEffectの依存配列に抜けがあります」「再レンダリングを避けるためuseCallbackを使いましょう」など、人間のレビュアーが見落としがちな点も指摘してくれます。Claude Codeを設計・実装・レビューのすべてに活用することで、リファクタリングの品質と速度を同時に上げることができます。ぜひ次の改善作業で試してみてください。