💻 6月3日の MS Build で開催される VS Code Live に参加しましょう。

チュートリアル: VS Code でエージェントを使用する

このチュートリアルでは、Visual Studio Code でさまざまな種類のエージェントを使用する方法を説明します。ローカル、プラン、バックグラウンド、およびクラウドエージェントに作業を委任することで、Todo アプリをゼロから構築し、テーマ切り替え機能を追加し、レイアウトを再設計します。

ヒント

Copilot サブスクリプションをまだお持ちでない場合は、Copilot 無料プラン にサインアップすることで Copilot を無料で使用でき、月間許容量のインライン提案と AI クレジットを受け取ることができます。

重要

2026年4月20日より、Copilot Pro、Copilot Pro+、Max、および Student プランの新規登録は一時的に停止されています。

前提条件

このチュートリアルを完了するには、以下が必要です。

ステップ 1: ローカルエージェントを使用してアプリをスキャフォールディングする

このステップでは、ローカルエージェントを使用して初期の Todo アプリの構造を作成します。ローカルエージェントは、新しいプロジェクトのスキャフォールディングや新機能の反復など、即時のフィードバックと結果が必要な対話型タスクに最適です。

  1. 新しいプロジェクトフォルダーを作成し、Git バージョン管理下にあることを確認します。

    mkdir todo-app
cd todo-app
git init

  2. プロジェクトフォルダーを VS Code で開きます。

  3. チャットビュー (⌃⌘I (Windows, Linux Ctrl+Alt+I)) を開き、エージェントのドロップダウンから Agent を選択します。

    必要に応じて、特定の言語モデルを選択します。

    重要

    エージェントのオプションが表示されない場合は、VS Code の設定でエージェントが有効になっていることを確認してください ( chat.agent.enabled Open in VS Code Open in VS Code Insiders This setting is managed at the organization level. Contact your administrator to change it.)。組織によってエージェントが無効にされている可能性があるため、その場合は管理者に連絡してこの機能を有効にしてください。

  4. チャット入力フィールドに以下のプロンプトを入力して Todo アプリをスキャフォールディングし、Send を選択します。

    Create a simple todo app with HTML, CSS, and JavaScript. Include an input field to add todos, a list to display them, and a delete button for each item.

  5. エージェントがアプリ用のさまざまなファイルを生成する様子を確認します。必要に応じて Keep または Undo を使用して変更を受け入れるか拒否します。

  6. 統合ブラウザで変更をプレビューできます。

    • localhost URL に対して統合ブラウザを有効にするには、 workbench.browser.openLocalhostLinks Open in VS Code Open in VS Code Insiders を設定します。

    • index.html ファイルを開き、Preview ボタンを選択します。

      Screenshot showing the Preview button in the top right corner of the editor when an HTML file is open.

      注意

      プレビューボタンが表示されない場合は、Live Preview 拡張機能がインストールされていることを確認してください。

  7. 追加のプロンプトを送信してアプリをさらに強化します。変更を行うとプレビューがリアルタイムで更新されることに注目してください。

    例えば、次のように質問できます。

    Mark todos as completed with a strikethrough effect.

これで、機能を追加できる動作可能な Todo アプリが作成されました。ローカルエージェントを使用すると、リアルタイムでインタラクティブにコードを生成および改善できます。

ステップ 2: Copilot CLI を使用して機能の実装を計画する

このステップでは、プランエージェントを使用してテーマ切り替えの実装計画を作成し、その実装をバックグラウンドで Copilot CLI に引き継ぎます。Copilot CLI は、即時の対話を必要としないタスクの委任に最適です。Git ワークツリーを使用して、メインワークスペースからファイル変更を分離し、競合を防ぐことができます。

  1. まず、ソース管理ビューで現在の変更をコミットし、クリーンな状態にします。

  2. チャットビューで、New Chat (+) > New Chat を選択して、新しいローカルエージェントセッションを開始します。前のチャットセッションはセッションリストに保存されていることに注目してください。

  3. エージェントのドロップダウンから Plan を選択してプランエージェントに切り替え、以下のプロンプトを入力します。

    Create a plan to add a dark/light theme toggle to the app. The toggle should switch between themes and persist the user's preference.

  4. プランエージェントが計画を洗練するために確認の質問をする場合があります。必要に応じて回答してください。

  5. 準備ができたら、Start Implementation > Continue in Copilot CLI を選択して、計画を Copilot CLI に引き継ぎます。

    Screenshot showing the Start Implementation button in the Chat view.

  6. Copilot CLI は Git ワークツリーを作成し、機能の実装を開始します。尋ねられたら、Copy Changes を選択して、現在のすべての変更が Copilot CLI で利用できるようにします。

  7. Copilot CLI セッションは Sessions ビューで追跡できます。セッションを選択して、進捗状況の詳細を確認してください。

    ヒント

    Copilot CLI がバックグラウンドで動作している間、競合することなくメインワークスペースの編集を続けることができます。

  8. エージェントが完了したら、変更されたファイルを選択して変更内容を確認するか、View All Changes を選択してすべての変更を含むマルチファイル差分エディタを開きます。

    ヒント

    Copilot CLI にフォローアッププロンプトを送信して、機能の調整や改善を行うことができます。

  9. チャットビューで Apply を選択し、変更をメインワークスペースに適用します。

Copilot CLI を使用してバックグラウンドでタスクを自律的に実行できました。メインのワークフローを中断することなく、複数のタスクに対して複数の Copilot CLI セッションを開始できます。

ステップ 3: クラウドエージェントを使用して機能を共同開発する

このステップでは、クラウドエージェント（Copilot クラウドエージェント）を使用してアプリのレイアウトを再設計し、GitHub のプルリクエストと共同開発機能を使用します。Copilot クラウドエージェントはリモートインフラストラクチャ上で実行され、即時のフィードバックを必要としないタスク、ローカルで実行する必要がないタスク、または GitHub を通じた共同作業を伴うタスクに最適です。

  1. まず、プロジェクトを GitHub リポジトリに公開し、Copilot クラウドエージェントをプロジェクトで使用できるようにリモートとして追加します。

    1. コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から Publish to GitHub コマンドを実行し、プロンプトに従って新しいリポジトリを作成します。

    2. コマンドパレットから Git: Add Remote コマンドを実行し、プロンプトに従って GitHub リポジトリをリモートとして追加します。

  2. チャットビューで、New Chat (+) > New Chat を選択します。

  3. セッションタイプのドロップダウンから Cloud を選択してクラウドエージェントに切り替え、以下のプロンプトを入力します。

    Redesign the todo app layout to improve user experience. Update colors, spacing, typography, and add animations to give it a modern look.

  4. クラウドエージェントが新しいセッションを開始し、リクエストの作業を行います。GitHub リポジトリにブランチとプルリクエストを作成します。

  5. クラウドエージェントはチャットビューの Sessions ビューで追跡できるほか、リンクを選択してプルリクエストの詳細を表示することもできます。

    ヒント

    GitHub Pull Requests 拡張機能がインストールされている場合、GitHub Pull Requests ビューの Copilot on my Behalf ビューでもプルリクエストの進行状況を追跡できます。

  6. 完了すると、クラウドエージェントは確認のためにあなたにプルリクエストを割り当てます。

    Screenshot showing the cloud agent session details, with the file change details.

  7. Sessions ビューでクラウドエージェントセッションを右クリックして追加オプションを表示するか、セッションを選択して Checkout または Apply を選択します。

クラウドエージェントを使用して GitHub 上での機能の共同開発に成功しました。クラウドエージェントを使用すると、リモートリソースを活用し、GitHub の Issue やプルリクエストを通じて変更について共同で作業できます。

次のステップ

さまざまな種類のエージェントを使用して Todo アプリの構築、強化、再設計を行いました。引き続きエージェントについて学びましょう。

5/28/2026
© . This site is unofficial and not affiliated with Microsoft.