# コードの改善とリファクタリング (/ja/docs/verdent-for-vscode/task-based-guides/refactoring)

> Verdent によるコード改善とリファクタリングのベストプラクティス



Verdent for VS Code は、機能を維持しながら複数のファイルにまたがるコードを安全にリファクタリング・改善するのに役立ちます。Plan Mode と Explorer サブエージェントを使用すると、変更前に影響を受けるすべてのファイルを特定でき、対象を漏らすことなく包括的にリファクタリングできます。

### このページで学べること [#このページで学べること]

* 実装ではなく成果に焦点を当てた効果的なリファクタリングをリクエストする
* 依存関係を管理しながら複数ファイルにまたがって安全にリファクタリングする
* コード品質の改善や最適化の提案をリクエストする
* 複数フェーズのアプローチで大規模なリファクタリングプロジェクトに対応する
* アルゴリズムやアーキテクチャの改善によってパフォーマンスを最適化する
* リファクタリング操作中にコードの機能を維持する

### 前提条件 [#前提条件]

Verdent でリファクタリングを行う前に、以下を確認してください。

* Verdent 拡張機能をインストールした Visual Studio Code
* VS Code で開いているコードベースまたはプロジェクトワークスペース
* 利用可能なクレジットがある有効な Verdent サブスクリプション
* 必要に応じて安全にロールバックできるよう、バージョン管理（Git）を推奨

***

## 効果的なリファクタリングをリクエストする [#効果的なリファクタリングをリクエストする]

**どう修正するか**ではなく、**何を、なぜ改善したいか**を説明してください。Verdent にコードを分析させ、プロジェクトのパターンに基づいた最適なアプローチを提案させましょう。

**効果的なリファクタリングのリクエスト:**

実装ではなく、求める成果に焦点を当てます。

```
Refactor the UserController to improve readability and reduce duplication
```

```
This authentication logic is scattered across multiple files. Consolidate it into a single module
```

```
Improve error handling in the API layer to be more consistent and informative
```

Verdent はコードを分析し、影響を受けるすべてのファイルを特定し、パターンを調査して、コードベースの規約に沿った具体的なリファクタリング戦略を提案します。

**ベストプラクティス: Plan Mode を使う**

リファクタリングのリクエストは Plan Mode で開始します。Verdent は次のことを行います。

1. コードを分析し、影響を受けるすべてのファイルを特定する
2. 変更を加える前に詳細なリファクタリング計画を提示する
3. 実装の好みについて確認の質問をする
4. 何がどの順序で変更されるかを正確に示す
5. アプローチをレビューして調整できるようにする

**Plan Mode の例:**

```
In Plan Mode: Refactor authentication logic to use a centralized authentication utility
```

Verdent は次のことを行います。

* Explorer を使ってすべての認証コードの場所を見つける
* パターンと不整合を特定する
* 統一された認証インターフェースを提案する
* どのファイルが変更されるかを示す
* リファクタリングの順序を説明する

実行前に追加のレビューやチームでの議論を行えるよう、Verdent に計画を `plan.md` ファイルへ保存させることもできます。

**包括的な検索に Explorer を使う:**

複雑なリファクタリングでは、徹底的に検索するよう Verdent に明示的に Explorer エージェントの使用を依頼します。

```
Use the Explorer agent to find all places where we manually validate email addresses, then refactor them to use a centralized validation utility
```

これにより、Verdent が更新を必要とするすべての場所を確実に発見し、コードベース全体での不整合なリファクタリングを防ぎます。

<Tip>
  Plan Mode はリファクタリングに不可欠です。実行前に何が変更されるかを正確に示すことで予期せぬ事態を防ぎ、アーキテクチャ上の考慮事項に基づいてアプローチを調整できます。
</Tip>

***

## 複数ファイルのリファクタリング [#複数ファイルのリファクタリング]

Verdent は、インポート、依存関係、ファイル間の参照を維持しながら複数ファイルにまたがってリファクタリングします。影響を受けるすべてのファイルを特定し、正しい順序で更新し、コードベース全体で一貫性を確保します。

**複数ファイルのリファクタリングの仕組み:**

1. **発見フェーズ**: Verdent（Explorer を使用）が変更が必要なすべてのファイルを見つける
2. **依存関係の分析**: 更新順序を決定するためにファイル間の依存関係を特定する
3. **計画の作成**: 変更されるすべてのファイルと変更の順序を示す
4. **順次更新**: 依存関係の順序でファイルを変更する（例: それを使用するコンポーネントよりも先に型を変更）
5. **インポートの管理**: インポート、エクスポート、ファイル間の参照を自動的に更新する
6. **検証**: すべてのファイルで変更が一貫しているかを確認する

<Note>
  複数ファイルのリファクタリングは、自動化された依存関係の追跡によって機能を維持し、Verdent は影響を受けるすべてのファイルをアトミックに更新します。
</Note>

**例:**

```
Rename the User interface to UserProfile across the entire project
```

Verdent は次のことを行います。

* `User` をインポートまたは使用しているすべてのファイルを見つける
* 型定義、実装、使用箇所を特定する
* まず型定義を更新し、次に実装、最後に使用箇所を更新する
* すべてのインポート文を調整する
* コードベース全体で一貫性を確保する

**Plan Mode で範囲を確認する:**

複数ファイルのリファクタリングを実行する前に、Plan Mode で全体の範囲を確認します。

```
In Plan Mode: Extract the authentication logic from UserController into a separate AuthService
```

Verdent は次の内容を示します。

* どのファイルが作成されるか（新しい AuthService）
* どのファイルが変更されるか（UserController とすべてのインポート元）
* UserController から AuthService へどのコードが移動するか
* インポートと依存関係がどのように更新されるか

これにより、意図しない範囲の拡大を防ぎ、進める前に影響全体を理解できます。

***

## コード品質の改善をリクエストする [#コード品質の改善をリクエストする]

Verdent は、依頼されない限り積極的に改善を提案することはありません。ただし、コード品質のレビューや改善の提案はいつでもリクエストできます。

<Tabs>
  <Tab title="全般的なレビュー">
    幅広いコード品質のレビューをリクエストします。

    ```
    Review this code for potential improvements
    ```

    ```
    Suggest ways to improve code quality in the UserService module
    ```

    ```
    Are there any performance optimizations we could make here?
    ```

    ```
    Analyze the PaymentController for maintainability issues
    ```

    Verdent はコードを分析し、次の点について具体的な提案を行います。

    * **可読性**: 変数の命名、関数の分割、コメントの明確さ
    * **パフォーマンス**: アルゴリズムの計算量、冗長な処理、キャッシュの機会
    * **保守性**: コードの重複、結合度、関心の分離
    * **ベストプラクティス**: デザインパターン、エラー処理、テストのカバレッジ
    * **セキュリティ**: 入力の検証、認証チェック、データの露出
  </Tab>

  <Tab title="特定箇所のレビュー">
    的を絞ったフィードバックには、特定のファイルを参照します。

    ```
    @services/UserService.js Review this module for dependency injection improvements
    ```

    ```
    @controllers/PaymentController.js Identify opportunities to reduce complexity
    ```

    Verdent は指定されたコードをプロジェクトのパターンの文脈で検査し、実行可能な推奨事項を提供します。
  </Tab>
</Tabs>

***

## 大規模なリファクタリングプロジェクト [#大規模なリファクタリングプロジェクト]

大規模なリファクタリングでは、最も信頼性の高い結果を得るために Plan Mode を**複数フェーズのアプローチ**で使用します。Verdent はリファクタリングを管理しやすい段階に分割し、各フェーズを進める前にレビューと承認を行えるようにします。

**複数フェーズのリファクタリングワークフロー:**

#### フェーズ 1: 初期分析 [#フェーズ-1-初期分析]

Plan Mode と Explorer エージェントを使って、影響を受けるすべてのファイルと依存関係を特定します。

```
In Plan Mode: Use Explorer to analyze our codebase and create a plan to replace our custom authentication with OAuth 2.0
```

Verdent は包括的な分析を行います。

* 認証関連のすべてのコードを特定する
* 依存関係と統合ポイントをマッピングする
* 複雑さとリスク領域を評価する
* フェーズの分割を提案する

#### フェーズ 2: フェーズの計画 [#フェーズ-2-フェーズの計画]

Verdent はレビュー用に複数フェーズの計画を作成します。

**計画の例:**

* **フェーズ 1**: OAuth ライブラリを追加し、エンドポイントを設定する
* **フェーズ 2**: ユーザーモデルとデータベーススキーマを更新する
* **フェーズ 3**: 既存の認証ロジックを移行する
* **フェーズ 4**: 非推奨の認証コードを削除する
* **フェーズ 5**: テストとドキュメントを更新する

各フェーズには次の内容が含まれます。

* 変更されるファイル
* 推定される複雑さ
* 前のフェーズへの依存関係
* リスク評価

#### フェーズ 3: フェーズごとの実行 [#フェーズ-3-フェーズごとの実行]

一度に 1 つのフェーズを実行し、フェーズ間でテストを行います。

1. Plan Mode でフェーズ 1 を承認する
2. Agent Mode に切り替えて実行する
3. フェーズ 1 が動作することを徹底的にテストする
4. フェーズ 2 のために Plan Mode に戻る
5. すべてのフェーズが完了するまで繰り返す

#### フェーズ 4: 反復的な改良 [#フェーズ-4-反復的な改良]

各フェーズの後に結果をレビューします。問題が発生した場合は次のように対応します。

* 残りのフェーズの計画を調整する
* 必要に応じて修正フェーズを追加する
* 発見した内容に基づいてアプローチを改良する

この段階的なアプローチにより安全性が確保され、大規模なリファクタリングプロジェクト中に問題が発生しても軌道修正できます。

<Note>
  大規模なリファクタリングは必ずバージョン管理のもとで行ってください。各フェーズの後にコミットしておけば、問題が発生してもすべての進捗を失うことなくロールバックできます。
</Note>

***

## パフォーマンスの最適化 [#パフォーマンスの最適化]

Verdent はパフォーマンスのボトルネックを分析し、アルゴリズムの計算量の改善、効率的なデータ構造、リソース使用量の削減などの最適化を提案します。

<Tabs>
  <Tab title="アルゴリズムの最適化">
    アルゴリズムの計算量を改善します。

    ```
    Analyze the performance of this data processing function and suggest improvements
    ```

    ```
    Can we improve the time complexity of this search algorithm?
    ```

    **Verdent が特定する内容:**

    * **アルゴリズムの計算量**: O(n²) のループ、ネストした反復、非効率な検索
    * **冗長な計算**: 繰り返しの計算、不要な処理
    * **メモリの問題**: メモリリーク、過剰なアロケーション、大きなオブジェクトの保持

    **例:**

    ```
    Optimize the searchProducts function that's currently O(n²)
    ```

    Verdent は関数を分析し、非効率な箇所（ネストしたループや繰り返しの線形検索）を特定し、具体的な改善を提案します。

    * ネストしたループをハッシュマップに置き換えて O(n) のルックアップにする
    * ソート後に二分探索を使って O(log n) の計算量にする
    * 計算結果をキャッシュして冗長な計算を避ける
    * 高コストな処理にメモ化を実装する

    回答には次の内容が含まれます。

    * **現在の計算量**: 現在のコードが遅い理由の説明
    * **提案する解決策**: 具体的なアルゴリズムまたはデータ構造の変更
    * **パフォーマンスの向上**: 推定される改善度（例: O(n²) → O(n log n)）
    * **トレードオフ**: メモリ使用量、コードの複雑さ、保守性の考慮事項
  </Tab>

  <Tab title="コンポーネントの最適化">
    UI コンポーネントとレンダリングを最適化します。

    ```
    Optimize this component to reduce unnecessary re-renders
    ```

    **Verdent が特定する内容:**

    * **フロントエンドのパフォーマンス**: 不要な再レンダリング、大きなバンドルサイズ、ブロッキング処理
    * **コンポーネントのライフサイクル**: 非効率な useEffect の依存配列、メモ化の欠如
    * **状態管理**: 冗長な状態更新、prop drilling

    Verdent はコンポーネントを分析し、React.memo、useMemo、useCallback、コンポーネントの分割などの最適化を提案します。
  </Tab>

  <Tab title="API とデータベースの最適化">
    API とデータベースのボトルネックを特定して修正します。

    ```
    Identify performance bottlenecks in the API request handler
    ```

    **Verdent が特定する内容:**

    * **データベースのパフォーマンス**: N+1 クエリ、インデックスの欠如、非効率な結合
    * **API のパフォーマンス**: 遅いエンドポイント、非効率なデータ取得、キャッシュの欠如

    Verdent はクエリのパターンを検査し、データベースのインデックス、キャッシュ戦略、API の最適化手法を提案します。
  </Tab>
</Tabs>

<Tip>
  パフォーマンスの最適化では、典型的なデータサイズやパフォーマンスの制約に関する情報を提供してください。これにより、Verdent が規模に応じた解決策（例: 100 件か 100 万件か）を提案しやすくなります。
</Tip>

<Tip>
  最適化の前にプロファイリングを行い、パフォーマンスへの影響を測定して、最適化が意味のある改善をもたらすことを確認してください。
</Tip>

***

## リファクタリング中の機能維持 [#リファクタリング中の機能維持]

Verdent は、内部実装を改善しつつ、同じ入力、出力、動作を維持することで、リファクタリング中もコードの機能を維持することを目指します。

**Verdent が機能を維持する方法:**

* **入出力の分析**: 関数のシグネチャ、API の契約、期待される動作を特定する
* **テストの認識**: 既存のテストを動作仕様として考慮する
* **保守的な変更**: リファクタリングの目標を達成するために最小限の変更を行う
* **検証**: 機能が維持されているか検証するためにテストを生成または実行できる

**安全なリファクタリングのためのベストプラクティス:**

1. **常にリファクタリングしたコードをテストする** - Verdent の分析があっても、特に複雑なリファクタリングでは、手動または自動のテストで機能が維持されていることを検証します

2. **バージョン管理を使う** - リファクタリング前にコミットしておけば、問題が発生してもロールバックできます

3. **段階的にリファクタリングする** - 大きなリファクタリングを小さなステップに分割し、各変更後にテストします

4. **変更を慎重にレビューする** - 差分を確認して、何がなぜ変更されたかを理解します

5. **複雑なリファクタリングには Plan Mode を使う** - 実行前にアプローチをレビューして潜在的な問題を捉えます

**例: 安全なリファクタリングのリクエスト**

```
Refactor the calculateOrderTotal function to use a more maintainable structure, but ensure it produces identical results for all input cases
```

Verdent は次のことを行います。

* 現在の実装とエッジケースを分析する
* リファクタリング後の構造を提案する
* リファクタリング後のバージョンがなぜ同等かを説明する
* 同等性を検証するためのテストケースを提案する

**機能が変わる可能性がある場合:**

場合によっては、リファクタリングが意図的に動作を変更することがあります（バグ修正、検証の改善）。その場合は明示してください。

```
Refactor the email validation function to correctly handle international domains, which the current implementation doesn't support
```

これにより、動作の変更が想定されており、意図的であることが伝わります。

***

## ベストプラクティス [#ベストプラクティス]

<Accordion title="解決策ではなく問題を説明する">
  特定の変更を指示するのではなく、Verdent にコードを分析させ、最適なリファクタリングのアプローチを提案させましょう。
</Accordion>

<Accordion title="リファクタリングには必ず Plan Mode を使う">
  実行前に計画全体をレビューします。これにより予期せぬ事態を防ぎ、アーキテクチャ上の考慮事項に基づいてアプローチを調整できます。
</Accordion>

<Accordion title="包括的な検索には明示的に Explorer を使う">
  徹底的なリファクタリングには、Explorer を使ってすべての該当箇所を見つけるよう Verdent に依頼します。例: 「Explorer を使ってすべての手動エラー処理を見つけ、エラーユーティリティを使うようにリファクタリングして」
</Accordion>

<Accordion title="大きなリファクタリングをフェーズに分割する">
  フェーズ間でテストを行う複数フェーズのアプローチは、一度にすべてを試みるより安全で管理しやすくなります。
</Accordion>

<Accordion title="フェーズ間でテストする">
  次に進む前に各フェーズが動作することを検証します。これにより問題を切り分け、問題の複合化を防ぎます。
</Accordion>

<Accordion title="こまめにコミットする">
  バージョン管理を使って、各フェーズや大きな変更の後にチェックポイントを作成します。これにより、すべての進捗を失うことなく安全にロールバックできます。
</Accordion>

<Accordion title="チームレビュー用に計画を保存する">
  重要なリファクタリングでは、実行前のチームでの議論のために、Verdent に計画を `plan.md` へ保存させます。
</Accordion>

<Accordion title="最適化のためにコンテキストを提供する">
  パフォーマンス改善をリクエストする際は、データサイズ、パフォーマンスの制約、許容できるトレードオフに関する情報を含めてください。
</Accordion>

***

## 関連項目 [#関連項目]

<CardGroup cols="2">
  <Card title="テストとデバッグ" icon="bug" href="/docs/verdent-for-vscode/task-based-guides/testing-debugging">
    リファクタリングしたコードが正しく動作することを検証するためのテストを生成する
  </Card>

  <Card title="コードの理解" icon="book" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    リファクタリング前にコード構造を分析して影響を理解する
  </Card>
</CardGroup>
