Claude Codeでリファクタリングする方法：プロンプトから大規模移行まで完全解説【2026年最新】

# Plan Modeで起動
claude --permission-mode plan

# または実行中にShift+Tabでモード切替

src/auth/ディレクトリを読んで、現在の認証処理の構造を教えてください。
特に以下を確認したいです：
1. セッション管理の仕組み
2. JWT/Cookie の取り扱い
3. 依存関係（どのファイルがこのモジュールを使っているか）
4. 技術的負債になりそうな箇所

上記の分析をもとに、認証処理をOAuth2に移行するリファクタリング計画を作成してください。
条件：
- 既存の動作は維持する（後方互換性を保つ）
- 変更は段階的に行う（1ステップで触るファイルは5個以内）
- 各ステップで実行すべきテストコマンドを明記する
計画をMIGRATION_PLAN.mdに出力してください。

# Shift+TabでNormal Modeに戻る
# または Auto Mode（自動承認）
claude --permission-mode auto -p "MIGRATION_PLAN.mdのフェーズ1を実行してください。完了後にテストを実行して結果を報告してください。"

フェーズ1のリファクタリングが完了し、テストが全て通りました。
以下の内容でコミットしてください：
- コミットメッセージ: refactor: migrate session handling to JWT-based auth (Phase 1)
- 変更点のサマリーをコミットメッセージに含めてください

# 方法1: 最初からPlan Modeで起動
claude --permission-mode plan

# 方法2: セッション中にShift+TabでPlan Modeに切り替え
# Shift+Tab → Auto-Accept Mode → もう一度Shift+Tab → Plan Mode
# 画面下部に「⏸ plan mode on」と表示される

# 方法3: ヘッドレスモードでPlan Modeを実行（非対話型）
claude --permission-mode plan -p "認証システムを分析して改善案を提案してください"

claude --permission-mode plan

認証システムをOAuth2に移行したいと考えています。

現状の確認をお願いします：
1. src/auth/配下の全ファイルを読んで現在の構造を把握する
2. auth関連モジュールを使っているファイルを全て特定する
3. 既存のセッション管理・JWTの実装を分析する
4. テストカバレッジの現状を確認する（npm testを実行）

その後、以下の移行計画を作成してください：
- 段階的な移行フェーズ（各フェーズは独立してデプロイ可能）
- 各フェーズで変更するファイル（最大5ファイル/フェーズ）
- 後方互換性を保つ方法
- ロールバックプラン
計画をdocs/OAUTH2_MIGRATION.mdに出力してください。

後方互換性について、既存のAPIクライアントへの影響を詳しく教えてください。

データベースのスキーマ変更はどのフェーズで行いますか？マイグレーションが必要なら詳細を教えてください。

このレガシープロジェクトを分析してください：
1. 使用技術とバージョン（package.jsonを確認）
2. 主要な機能モジュールの一覧
3. 依存関係（どのファイルが何に依存しているか）
4. TypeScript化の優先度が高い箇所（ビジネスロジックを含む部分）
5. リスクが高い変更箇所（多くのファイルから参照されている箇所）

分析結果をdocs/CURRENT_STATE.mdに出力してください。

既存のJavaScriptコードは変更せずに、TypeScript + Reactの開発環境を追加してください。
要件：
- 既存のjQueryコードは動作を維持する
- webpackで既存JSとTypeScriptを共存させる
- tsconfig.jsonは最初は loose に設定（strict: falseでOK）
- 変更するファイル：package.json、webpack.config.js、tsconfig.json
完了後、npm run buildを実行してビルドが通ることを確認してください。

legacy/cart.jsのグローバル変数によるカート状態を分析して、
Zustandストアに移行してください。

重要な制約：
1. 既存の window.addToCart、window.updateCartDisplay等のグローバル関数は削除しない
2. 新しいZustandストアは既存のグローバル関数から呼び出される互換レイヤーを持つ
3. 移行後も既存のjQueryコードが動くことを確認する

完了後、既存のカート機能のE2Eテストを実行してください。
テストがなければ、まず最低限のテストを作成してから移行を実施してください。

# コードの依存関係の可視化
src/utils/ディレクトリを分析して、各ファイルがどのファイルから
インポートされているか、依存関係のグラフをdocs/dependency-map.mdに出力してください。
循環依存があれば特定して報告してください。

# 技術的負債の特定
プロジェクト全体をスキャンして、以下の問題を特定してください：
- any型の使用箇所（TypeScript）
- 未使用のインポート・変数
- コメントアウトされたコード
- TODO/FIXMEコメント
- 100行を超える関数
結果をtechnical-debt.mdに出力してください。

# 命名の統一
src/ディレクトリ全体で、キャメルケースとスネークケースが混在している
関数名・変数名を特定してください。
統一するための変更計画を作成し、確認後に実行します。
（影響範囲が大きいので計画を先に出してください）

# Promiseからasync/awaitへの変換
src/api/client.jsのPromiseチェーン（.then().catch()）を
async/await構文に変換してください。
変換後、既存のAPIテストを実行して動作確認をしてください：npm test -- src/api/

# コンポーネントの分割
src/components/Dashboard.tsxが500行を超えています。
以下の基準で分割してください：
- 1コンポーネント = 1責務
- 100〜150行を目安
- 分割後も既存のprops/stateのインターフェースは維持する
分割計画を先に提示してください。確認後に実行します。

# React再レンダリングの最適化
src/components/ProductList.tsxのパフォーマンスを分析してください。
React.memo、useMemo、useCallbackが効果的な箇所を特定して、
最適化を実施してください。
変更前後でReact DevToolsのプロファイル結果を比較できる形でコメントを残してください。

# バンドルサイズの最適化
webpack-bundle-analyzerを使って現在のバンドルサイズを分析してください：
npm run build:analyze
大きいモジュールのdynamic importへの変換が可能な箇所を特定して、
実装してください。

# ファイルリストを生成
find src/ -name "*.py" > python-files.txt

# 各ファイルに対してサブエージェントで並列変換
for file in $(cat python-files.txt); do
  claude -p "Migrate $file from Python to TypeScript. Maintain the same functionality. Return OK or FAIL." \
    --allowedTools "Edit,Bash(git commit *)" &
done
wait

# 結果をJSONで受け取る例
claude -p "Analyze $file for refactoring opportunities" \
  --output-format json | python3 process_results.py

このコードをリファクタリングする前に、
現在の動作を記録するテストを書いてください。
テストが全てパスすることを確認してから、リファクタリングを開始してください。