ガイド: リファクタリング計画の立案

「秘伝のタレ」化したコード、複雑すぎて誰も触れないコンポーネント、パフォーマンスのボトルネック...。多くのプロジェクトが、リファクタリングの必要性に迫られています。しかし、大規模なリファクタリングはリスクも高く、どこから手をつければ良いか分からないことも少なくありません。

このガイドでは、MCPを活用してリファクタリング戦略を立案し、具体的なタスクに分解し、安全に実行していくためのワークフローを紹介します。

🎯 このガイドで達成できること

• リファクタリング戦略プロンプトを使い、コードベースが抱える問題に対する改善計画を立てる。
• タスク分解プロンプトを使い、壮大な計画を実行可能な小さなステップに分割する。
• 品質レビュープロンプトを活用し、リファクタリングによる改善効果を検証する。

Step 1: リファクタリング戦略プロンプトで現状分析と計画立案

まず、現状のコードベースが抱える問題と、リファクタリングのゴールを整理し、@psmメンションでリファクタリング戦略プロンプト（APIリファレンスでの正式名称は refactoring_strategy）に渡します。

シナリオ: Reactプロジェクトの古いクラスベースコンポーネントを、モダンな関数コンポーネントとHooksに置き換えたい。

@psm refactoring_strategy プロンプトを使って、リファクタリング計画を立ててください。

コードベース概要: レガシーなReactクラスベースコンポーネントが100ファイル以上存在する。componentDidMountやshouldComponentUpdateなどのライフサイクルメソッドが複雑に絡み合っている。
主な問題:
- テストコードが書きづらい。
- 状態管理ロジックが分散しており、追跡が困難。
- 再レンダリングが頻発し、パフォーマンスに問題がある。
ゴール: 関数コンポーネントとHooksへの移行

MCPは、ストラングラーパターン（Strangler Fig Pattern）や並行開発（Branch by Abstraction）といった、安全な移行戦略を提案します。また、どのコンポーネントから着手すべきか、優先順位付けについても助言を提供します。

参考: curl を使ってAPIを直接呼び出す場合

# 環境変数 MCP_SERVER_URL と MCP_API_KEY が設定されている必要があります
curl -X POST "$MCP_SERVER_URL/prompts/refactoring_strategy" \
-H "Authorization: Bearer $MCP_API_KEY" \
-H "Content-Type: application/json" \
-d '{
  "codebase_summary": "Reactの古いクラスベースコンポーネントが100以上存在する。",
  "problems": [
    "テストが書きづらい",
    "状態管理が複雑",
    "パフォーマンス問題"
  ],
  "goal": "関数コンポーネントとHooksへの移行"
}'

Step 2: タスク分解プロンプトで具体的なタスクを作成する

リファクタリング戦略が決まったら、それを具体的な開発タスクに落とし込みます。Step 1でMCPが生成した計画をタスク分解プロンプト（APIリファレンスでの正式名称は task_breakdown）に渡します。

@psm task_breakdown プロンプトを使って、リファクタリング計画をタスクに分解してください。

要件: ストラングラーパターンを用いて、まず影響範囲の小さい `UserProfile` コンポーネントから関数コンポーネントへ移行する。次に、共通で使われている `withAuth` HOC (Higher-Order Component) をカスタムフック `useAuth` に置き換える...

MCPは、この計画をJiraやGitHub Issuesに起票できるレベルの具体的なタスクに分割してくれます。

参考: curl を使ってAPIを直接呼び出す場合

# 環境変数 MCP_SERVER_URL と MCP_API_KEY が設定されている必要があります
curl -X POST "$MCP_SERVER_URL/prompts/task_breakdown" \
-H "Authorization: Bearer $MCP_API_KEY" \
-H "Content-Type: application/json" \
-d '{
  "requirements": "ストラングラーパターンを用いて、まず影響範囲の小さい `UserProfile` コンポーネントから関数コンポーネントへ移行する。次に、共通で使われている `withAuth` HOC (Higher-Order Component) をカスタムフック `useAuth` に置き換える..."
}'

Step 3: 実装とレビューで効果を検証する

分割されたタスクを一つずつ実装していきます。そして、リファクタリングが完了したPRでは、品質レビュープロンプト（APIリファレンスでの正式名称は code_review_framework）を使って、意図した改善が達成できているかを確認します。

今回のシナリオではパフォーマンス改善が目的の一つだったので、review_focusにパフォーマンスを指定してみましょう。

@psm code_review_framework プロンプトを使って、このPRを「パフォーマンス」の観点でレビューしてください。

PR説明: refactor: UserProfileを関数コンポーネントに移行
変更ファイル概要: src/components/UserProfile.js | 50 +--

MCPは、不要な再レンダリングの防止（React.memoやuseCallbackの使用）、巨大なコンポーネントの分割など、パフォーマンス観点でのチェックリストを提供し、改善効果の検証をサポートします。

参考: curl を使ってAPIを直接呼び出す場合

# 環境変数 MCP_SERVER_URL と MCP_API_KEY が設定されている必要があります
curl -X POST "$MCP_SERVER_URL/prompts/code_review_framework" \
-H "Authorization: Bearer $MCP_API_KEY" \
-H "Content-Type: application/json" \
-d '{
  "pr_description": "refactor: UserProfileを関数コンポーネントに移行",
  "changed_files_summary": "src/components/UserProfile.js | 50 +--",
  "review_focus": "パフォーマンス"
}'

まとめ

このガイドの方法を使えば、 막然としていた大規模リファクタリングを、計測可能で実行可能なプロジェクトに変えることができます。

MCPを計画のパートナーとすることで、技術的負債の返済を計画的に進めていきましょう。