一番雑な投げ方
全ファイルでimport文を@/componentsから./componentsに変えて
これだけで全プロジェクトの相対パスが書き換わる。Claude Codeは勝手にファイルを探して一括変更してくれるよ。
もうちょい具体的に投げるパターン
コンポーネント分割パターン
UserProfile.tsxをheader、content、footerの3つのコンポーネントに分割して。
他のファイルのimportも全部直しといて
型定義の一斉適用
User型にemailフィールド追加して、使ってる全ファイルで型エラー解消して
ディレクトリ構造変更
/componentsの中身を/components/ui/と/components/pages/に分けて。
import文も全部修正して
実践例 / 実録
実際にReactプロジェクトでやった話。共通コンポーネントをStorybookに対応させたかったんだけど、50個くらいのファイルに散らばってる状態だった。
投げたプロンプト：
src/components/common/の全コンポーネントに.stories.tsxファイル作って。
既存の使用例を参考にしてストーリー生成。
propsの型定義も見て適切なサンプルデータ用意して
結果：
- 47個のStorybookファイルが生成された
- 各コンポーネントのprops型を読んで適切なダミーデータを作成
- 既存のテストファイルからユースケースを抽出してストーリーに反映
所要時間：約3分。手作業だったら半日かかってた。
別の実例：API型定義の同期
バックエンドのAPIレスポンスが変わった時の話。
/api/user/meのレスポンスが変わった。
新しいSwagger見て関連する全TypeScriptファイルの型定義更新して
Claude Codeが：
- Swaggerファイルを読み込み
- 影響するコンポーネント24個を特定
- 型定義を更新
- 使用箇所の型エラーも全部修正
つまずきポイント
変更範囲が想定より広すぎる場合
「全ファイル」と言うと本当に全部変更しようとする。心配なら最初にdry-runっぽく聞いてみる。
import文変更したら何個くらいのファイルが影響する？まず教えて
gitでの確認を忘れがち
複数ファイル変更後は必ずdiffチェック。
変更内容をgit diffで見せて。問題ないか確認したい
Claude Codeは素直にコマンド実行して結果を見せてくれる。
ファイル数が多すぎて途中で止まる
一度に100個超えるファイルを変更しようとすると、途中でタイムアウトすることがある。そんな時は範囲を分けて投げる。
まずsrc/components/内だけでimport変更して。
終わったらsrc/pages/もやって
複数ファイルの同時編集は、手作業だと心が折れる作業がサクッと終わるのが気持ちいい。ただし変更後の動作確認だけは手を抜かずに。