# 複数ステップにわたるタスクの例 (/ja/docs/verdent-for-vscode/common-workflows/multi-step-tasks)

> Verdent で複雑な複数ステップのタスクを処理する



Verdent for VS Code は、複雑な複数ステップのタスクを自律的に分解することに優れています。このガイドでは、よくある複数ステップのシナリオについて手順を追ったワークフローを示し、Verdent がタスクの分解、依存関係の管理、段階的な実行をどのように扱うかを具体的に解説します。

***

## 複雑な実装に Plan Mode を使う [#複雑な実装に-plan-mode-を使う]

コードベースに変更を加える前に、Verdent の詳細なプランをレビューしたいとします。

<Steps>
  <Step title="Plan Mode に切り替える">
    インターフェースの「Switch Mode」ボタンを選択し、「Plan Mode」を選択します。

    Plan Mode は読み取り専用です。Verdent はファイルの変更やコマンドの実行を行わずに、コードの分析、調査、プランの作成ができます。
  </Step>

  <Step title="複雑なリクエストを送信する">
    ```
    Refactor this codebase to replace our custom authentication with OAuth 2.0
    ```

    Verdent が現在の実装を徹底的に分析します。
  </Step>

  <Step title="確認のための質問に答える">
    Verdent は不確実性を取り除くために質問することがあります。

    * どの OAuth プロバイダーを使うべきですか?
    * トークンは localStorage と cookies のどちらに保存すべきですか?
    * 複数の OAuth プロバイダーをサポートする必要がありますか?

    これらの質問に答えることで、プランを洗練できます。
  </Step>

  <Step title="詳細なプランをレビューする">
    Verdent は次の内容を示す包括的なプランを提示します。

    * 作成するファイル
    * 変更する既存ファイル
    * 論理的な順序で並べた実装手順
    * 手順間の依存関係

    実行に進む前に、このプランを慎重にレビューします。
  </Step>

  <Step title="次のアクションを選択する">
    プランをレビューした後、Verdent は 2 つの選択肢を提示します。

    * **Edit** を選択して、変更を依頼したり確認の質問をしたりします
    * **Start Building** を選択して、Agent Mode に切り替えて実行を開始します

    実行を始める前に、必要なだけ何度でもプランを練り直せます。
  </Step>
</Steps>

<Tip>
  **ヒント:**

  * 複数のファイルに影響する機能には Plan Mode を使います
  * 複数回プランをレビューして、アプローチを洗練します
  * 実行前にチームで議論するため、プランをファイルに保存します
  * Plan Mode は、あなたの期待と Verdent が提案した解決策の整合性を確保するのに役立ちます
  * **プラン形式のカスタマイズ:** **Settings → Rules → Plan Rules** にアクセスして、プランの構造、詳細度、書式設定の好みを制御します
</Tip>

***

## 大規模な機能リクエストを分解する [#大規模な機能リクエストを分解する]

複数の連携コンポーネントを持つ複雑な EC サイトのチェックアウトシステムを構築しているとします。

<Steps>
  <Step title="ハイレベルな目標を提示する">
    ```
    Build a complete checkout system with cart management, payment processing, order confirmation, and inventory updates
    ```

    Verdent が何をする必要があるかを分析します。
  </Step>

  <Step title="Verdent が論理的なサブタスクを作成する">
    システムはこれを自律的に次のように分解します。

    1. ショッピングカートのデータモデルと API を作成する
    2. アイテムの追加/削除/更新ができるカート UI を構築する
    3. 配送先住所フォームを備えたチェックアウトページを実装する
    4. 決済ゲートウェイ（Stripe または設定済みのプロバイダー）を統合する
    5. 注文確認ページを作成する
    6. 在庫更新ロジックを追加する
    7. メール確認システムを実装する
    8. 統合テストを書く

    各サブタスクは、わかりやすい説明とともに ToDo リストに表示されます。
  </Step>

  <Step title="Verdent が依存関係を自動的に処理する">
    Verdent はサブタスクを正しい順序で実行します。

    * データモデルを、それを使用する API エンドポイントより先に作成する
    * バックエンドのエンドポイントを、それを呼び出すフロントエンドコンポーネントより先に構築する
    * コア機能を実装してからテストを追加する

    依存関係は手動の介入なしに自動的に管理されます。
  </Step>

  <Step title="リアルタイムの進捗を監視する">
    Verdent が各サブタスクを進めるにつれて、ToDo リストがリアルタイムで更新される様子を確認できます。ToDo 項目は pending → in progress → completed と遷移します。
  </Step>
</Steps>

<Tip>
  **ヒント:**

  * ほとんどのタスクでは、Verdent に分解を自律的に任せます
  * 実行前に分解内容をレビューしたい場合は Plan Mode を使います
  * Verdent はエッジケースや新たな要件に遭遇した場合にアプローチを調整します
  * 表示される ToDo リストにより、複数ステップの実行が透過的に把握できます
</Tip>

***

## 複数フェーズにわたるリファクタリングプロジェクト [#複数フェーズにわたるリファクタリングプロジェクト]

大規模なコードベースをリファクタリングしており、管理しやすいフェーズに分けて進めたいとします。

<Steps>
  <Step title="複数フェーズのアプローチを定義する">
    ```
    In Plan Mode: Refactor this codebase to replace our custom authentication with OAuth 2.0. I want this done in phases so we can test incrementally.
    ```
  </Step>

  <Step title="Verdent がフェーズ分割を提案する">
    Verdent は複数フェーズのプランを提案します。

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

    各フェーズは個別にテストできます。
  </Step>

  <Step title="フェーズごとに実行する">
    フェーズ 1 を承認し、Verdent に実行させてからテストします。

    ```
    npm test
    ```

    フェーズ 1 が動作することを確認したら、フェーズ 2 に進みます。
  </Step>

  <Step title="必要に応じて後続のフェーズを調整する">
    フェーズ 1 で得た知見に基づいて、残りのフェーズのアプローチを調整できます。

    ```
    For Phase 2, let's also add user role migration to the database schema changes
    ```
  </Step>

  <Step title="すべてのフェーズを段階的に完了する">
    各フェーズの間にテストと検証を挟みながらすべてのフェーズを進め、安全性を確保しつつ軌道修正できるようにします。
  </Step>
</Steps>

<Tip>
  **ヒント:**

  * 複数フェーズのリファクタリングは、段階的なテストを可能にしてリスクを軽減します
  * 各フェーズは、コードベースが動作する状態を保つようにします
  * ロールバックが容易になるよう、各フェーズの後でコミットします
  * 早いフェーズで得た知見に基づいて、後のフェーズを調整します
</Tip>

***

## バックエンドとフロントエンドの変更を連携させる [#バックエンドとフロントエンドの変更を連携させる]

バックエンドの API とフロントエンドコンポーネントの両方を同期して更新する必要のある機能を追加しているとします。

<Steps>
  <Step title="フルスタックの機能を記述する">
    ```
    Add a commenting system where users can add comments to blog posts. Include backend API, database schema, and frontend UI
    ```
  </Step>

  <Step title="Verdent がバックエンド優先のアプローチで連携する">
    Verdent は通常、フルスタックの機能ではバックエンドを優先して作業します。

    1. コメントテーブル用のデータベースマイグレーションを作成する
    2. コメント作成用の API エンドポイントを追加する
    3. コメント取得用の API エンドポイントを追加する
    4. コメントデータの TypeScript インターフェースを定義する
    5. フロントエンドのコメントフォームコンポーネントを構築する
    6. コメント表示コンポーネントを作成する
    7. フロントエンドを API エンドポイントに接続する
  </Step>

  <Step title="Verdent が整合性を確保する">
    Verdent は次のことを確保します。

    * フロントエンドの TypeScript インターフェースがバックエンドのデータ構造と一致している
    * API エンドポイントの URL がフロントエンドコードで正しく参照されている
    * リクエスト/レスポンスの形式がバックエンドとフロントエンドの間で揃っている
    * エラー処理がスタック全体で一貫している
  </Step>

  <Step title="統合テスト">
    ```
    Write integration tests for the commenting system covering the full stack
    ```

    Verdent は、バックエンドとフロントエンドが正しく連携して動作することを検証するテストを作成します。
  </Step>
</Steps>

<Tip>
  **ヒント:**

  * バックエンド優先のアプローチにより、フロントエンドが統合に使える動作する API を確実に得られます
  * Verdent はバックエンドとフロントエンドのコード間の整合性を自動的に維持します
  * TypeScript インターフェースは、統合の問題をコンパイル時に検出するのに役立ちます
  * 統合テストにより、機能全体がエンドツーエンドで動作することを検証します
</Tip>

***

## サブエージェントを使った並列実行 [#サブエージェントを使った並列実行]

同時に実行できる独立したタスクが複数あるとします。

<Steps>
  <Step title="並列化できるタスクを特定する">
    ```
    Generate unit tests for all service classes in the src/services directory
    ```

    これらのテストファイルは独立しており、並列で作成できます。
  </Step>

  <Step title="Verdent が複数のサブエージェントに委任する">
    Verdent は、独立したタスクを並行して処理するために複数のサブエージェントを自動的に使用します。

    * サブエージェント 1: UserService のテストを作成する
    * サブエージェント 2: PaymentService のテストを作成する
    * サブエージェント 3: NotificationService のテストを作成する
    * サブエージェント 4: AuthService のテストを作成する

    すべての作業が並行して行われ、時間を節約できます。
  </Step>

  <Step title="結果を統合する">
    各サブエージェントが結果を返します。Verdent は、すべてのテストファイルを適切な命名と構造でプロジェクトに統合します。
  </Step>

  <Step title="順次検証">
    並列作成の後、テストを順次実行してすべてが動作することを検証します。

    ```
    npm test
    ```
  </Step>
</Steps>

<Tip>
  **ヒント:**

  * Verdent は、独立したタスクをサブエージェントを使って自動的に並列化します
  * 疎結合な作業（別々のテストファイル、独立したコンポーネント）は並列化の恩恵を受けます
  * 密結合な作業（依存関係のあるファイル）は、正確性のために順次実行されます
  * 並列実行により、大規模な変更が大幅に高速化します
</Tip>

***

## よくある質問 [#よくある質問]

<Accordion title="複数ステップのタスクの途中で Verdent を停止できますか?">
  はい。実行はいつでも中断できます。Verdent は現在作業中のステップを完了してから停止します。その時点までの進捗は保持されます。これまでの作業をレビューし、調整を加えて、続行するか別のアプローチを取るかを選べます。
</Accordion>

<Accordion title="長いタスクで Verdent が今何をしているかを確認するには?">
  ToDo リストを確認します。リアルタイムのステータスが表示され、常に 1 つの項目が「in progress」とマークされます。アクティブな項目は、Verdent が現在何に取り組んでいるかを正確に示します。完了した項目は done とマークされ、保留中の項目は残りの作業を示します。
</Accordion>

<Accordion title="Verdent のタスク分解方法に同意できない場合は?">
  Plan Mode を使って、実行前に分解内容をレビューして調整します。Plan Mode では、「フロントエンドの作業を別々のコンポーネントに分割して」や「あの 2 つのステップをまとめて」といったフィードバックを提供できます。Verdent は、コードが書かれる前にあなたの入力に基づいてプランを修正します。
</Accordion>

<Accordion title="すべての複数ステップのタスクで Plan Mode を使うべきですか?">
  必ずしもそうではありません。Plan Mode は、多くのファイルに影響する複雑な機能、大規模なリファクタリング、またはまずアプローチをレビューしたい場合に使います。慣れている単純なタスクであれば、Verdent はリアルタイムの ToDo リスト表示とともに直接実行できます。Plan Mode は、リスクの高い変更にレビューステップを追加します。
</Accordion>

<Accordion title="実行が開始された後で Verdent のプランを変更できますか?">
  Verdent が作業している間に修正の指示を出せます。「実は API の統合には別のアプローチを使って」と伝えると、Verdent は残りのステップを調整します。プランを大きく変更する場合は、一度停止して完了済みの作業をコミットし、修正したアプローチで新しいセッションを開始するほうがよいでしょう。
</Accordion>

***

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

<CardGroup cols="2">
  <Card title="新しいコードを書く" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    Verdent で新しい機能とコンポーネントを作成する
  </Card>

  <Card title="ベストプラクティス" icon="star" href="/docs/verdent-for-vscode/best-practices/prompts">
    効果的なプロンプトとワークフローの戦略
  </Card>
</CardGroup>