チュートリアル: VS Codeでのエージェントコーディング

このチュートリアルでは、Visual Studio CodeでAIエージェントを使ってビルドする方法を学びます。エージェントは、単一の自然言語プロンプトから、ソリューションの計画、複数のファイルの作成と編集、コマンドの実行、および自身のエラー修正を行うことができます。あなたが何をしたいかを記述すれば、エージェントが作業を行います。

まずエージェントファーストのワークフロー専用の画面であるエージェントウィンドウから始めます。その後、エディターで作業中にエージェントが支援してくれるチャットビューに切り替えます。その過程で、ワークスペースの開き方、統合ブラウザーの使用方法、ソース管理での変更のコミットなど、必要なVS Codeの基本を習得します。

HTML、CSS、JavaScriptを使用してシンプルな個人のポートフォリオページを作成します。このページは完全に静的であるため、このチュートリアルを進めるのにランタイムやビルドツールをインストールする必要はありません。

前提条件

• コンピューターにVisual Studio Codeをダウンロードしてインストールする
• VS Code で GitHub Copilot をセットアップする
• コンピューターにGitをインストールする

プロジェクトフォルダーを作成する

エージェントは、ワークスペースとも呼ばれるフォルダーのコンテキストで動作します。まず、プロジェクト用のフォルダーを作成することから始めます。まだVS Codeでフォルダーを開く必要はありません。次のステップで、エージェントウィンドウでフォルダーを開きます。これにより、ワークスペースごとに個別のウィンドウを開くことなく、複数のワークスペースで作業できます。

1. コンピューターにmyportfolioという新しい空のフォルダーを作成します。

2. 変更を追跡し、エージェントが編集を適用する方法を選択できるように、フォルダーをGitバージョン管理下に置きます。

   myportfolioフォルダーでターミナルを開き、次のコマンドを実行します。

   git init
   

   ヒント

   リポジトリは後でVS Codeのソース管理ビューから初期化することもできます。このチュートリアルの最後にソース管理を使用して変更をコミットします。

エージェントウィンドウでビルドする

エージェントウィンドウは、エージェントファーストのワークフロー用に構築されたVS Code専用のウィンドウです。プロジェクト全体でタスクを調整するために最適化されており、エージェントセッションを開始し、その作業を監視し、ワークスペースごとに個別のウィンドウを開くことなくワークスペースを切り替えることができます。これは、単一のワークスペース内でのコーディングに重点を置くエディターウィンドウやチャットビューとは異なります。

このパートでは、エージェントウィンドウでフォルダーを開き、単一のプロンプトからポートフォリオページを作成します。

エージェントウィンドウを開く

1. VS Codeで、タイトルバーのエージェントで開くボタンを選択します。

   エージェントウィンドウは、VS Codeのウェルカムページから開くことも、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) からチャット: エージェントウィンドウを開くコマンドを実行して開くこともできます。

   

2. サインインを求められた場合は、サインイン方法を選択して続行します。

   エージェントウィンドウがエージェントセッションを実行するには、GitHub Copilotサブスクリプションへのアクセスが必要です。VS CodeでGitHubにすでにサインインしている場合は、ここでもサインイン済みです。

エージェントセッションを開始する

1. 新しいセッションを開始するには、左側のサイドバーの上部にある新規を選択します。

   サイドバーには、ワークスペースごとにグループ化されたアクティブなエージェントセッションのリストが表示されます。左下では、エージェントのカスタマイズにアクセスして、コーディング習慣に合わせてエージェントの動作を変更できます。

2. ワークスペースドロップダウンで、お使いのコンピューター上のmyportfolioフォルダーを選択します。

   

   フォルダーを信頼するよう求められた場合は、はい、作成者を信頼しますを選択します。

   重要

   ワークスペースの信頼により、プロジェクトフォルダー内のコードを実行できるかどうかを決定できます。インターネットからコードをダウンロードする場合は、実行しても安全であることを確認するために、まずレビューする必要があります。ワークスペースの信頼の詳細についてはこちらをご覧ください。

3. セッションのエージェントとしてCopilot CLIを選択します。

   Copilot CLIは、お使いのローカルマシンでエージェントを実行します。VS CodeがCopilot CLIをインストールして構成するため、追加でセットアップする必要はありません。

4. エージェントがワークスペースに直接変更を適用できるように、分離がフォルダーに初期化されていることに注意してください。

   コミット済みの既存のGitリポジトリがある場合は、エージェントを別のGitワークツリーで作業させ、後で変更をマージすることもできます。

5. チャット入力に次のプロンプトを入力し、Enterを押します。

   Create a personal portfolio page with HTML, CSS, and JavaScript in separate files. Include a header with my name and a short bio, a section for projects with cards, and a contact section. Use modern styling and add some sample content.
   

   エージェントは作業を計画し、ファイルを作成し、問題が発生した場合は自己修正します。コマンドを実行する前に承認を求める場合があります。リクエストを確認し、承認して続行します。

   

ページをプレビューする

エージェントファーストのワークフローで作業する場合、コードよりもタスクの結果に焦点を当てる場合があります。VS Codeを離れたり、別の開発サーバーをセットアップしたりすることなく、統合ブラウザーでエージェントの作業結果をプレビューできます。

1. 統合ブラウザーでページをプレビューします。

   変更パネルでファイルタブを選択して、ワークスペースのファイルエクスプローラーを表示します。index.htmlファイルを右クリックし、統合ブラウザーで開くを選択します。

   統合ブラウザーはVS Code内でポートフォリオページを開くため、外部ブラウザーや別の開発サーバーは必要ありません。統合ブラウザーの詳細についてはこちらをご覧ください。

デザインを反復する

デザインを反復する場合、言葉で説明するよりも、ページ上の要素を指し示す方が簡単なことがよくあります。統合ブラウザーには、ページ上の要素を選択し、エージェントのコンテキストとしてプロンプトに追加できる組み込みツールがあります。

1. 統合ブラウザーツールバーで、要素をチャットに追加ボタンを選択して選択モードに入ります。

2. ページ上の要素を選択します。例えば、あなたの名前の見出しやボタンなどです。

   エージェントは、選択した要素をHTMLとCSSを含めて、コンテキストとしてプロンプトに追加します。

3. ブラウザーを閉じ、希望する変更を記述したプロンプトを入力し、Enterを押します。例えば、

   Make this heading larger and use a gradient color for the text.
   

   エージェントがファイルを更新して変更を適用します。統合ブラウザーを開いて更新されたページを確認します。

変更をレビューしてコミットする

エージェントの作業をコミットする前に、何が変更されたかを確認してください。変更パネルには、エージェントが作成または変更したすべてのファイルが一覧表示されるため、結果が意図したものと一致することを確認できます。

1. 変更パネルで変更タブを選択して、エージェントが追加または変更したファイルの一覧を表示します。

2. ファイルを選択して差分ビューを開き、エージェントの編集をレビューします。ナビゲーションコントロールを使用して、異なるファイル間を移動できます。

   差分ビューには変更が並べて表示され、追加された行と削除された行が強調表示されます。このケースでは、新しいファイルのみが追加されています。

1. 変更パネルで変更をコミットを選択して、エージェントの変更をGitリポジトリに保存します。エージェントは変更に基づいてコミットメッセージを生成します。

エディターでエージェントを使ってコードを書く

一部の変更については、コードファーストのアプローチを好むかもしれません。そこではコードの記述に焦点を当て、エージェントがそのプロセスを支援します。例えば、テーマスイッチャーを追加し、進捗に合わせてスタイルを微調整したい場合などです。このアプローチでは、エディターに切り替えてチャットビューを使用します。

ワークスペースのエディターを開く

1. エージェントウィンドウで、タイトルバーのエディターで開くボタンを選択して、アクティブなワークスペースをエディターで開きます。

2. 左側のサイドバーに、ワークスペース内のファイルを表示するエクスプローラービューが表示されることに注意してください。ファイルを選択すると、メインエリアのエディタータブで開きます。

   エクスプローラービューを使用して、ワークスペース内のファイルやフォルダーを表示および管理します。好きなだけエディターを開き、並べて表示できます。

3. 右側のサイドバーにはチャットビューが表示され、セッションリストを確認したり、会話を開始または続行したりできます。

チャットビューから機能を追加する

1. 新しいセッションを開始するには、新しいチャット (+) を選択します。

2. エージェントターゲットドロップダウンからローカルを選択して、エディターのコンテキストでエージェントを実行します。エージェントはワークスペースファイルに対して直接操作を行います。

   ローカルエージェントはVS Code内で実行され、エディターと統合された追加ツールにアクセスできます。例えば、ファイルからリンティングやコンパイラーのエラーを読み取って問題を修正したり、統合ブラウザーを直接起動してページをプレビューしたりできます。

3. チャット入力に次のプロンプトを入力し、Enterを押します。

   Add a theme switcher button that toggles between a light and dark color theme for the page.
   

   エージェントがファイルに変更を適用します。

4. 変更をエディターで直接レビューします。

   変更されたファイルを開き、エージェントの編集をインライン差分として確認します。オーバーレイコントロールを使用して、個々の編集を保持または元に戻すことができます。

5. 新しい機能が動作していることを確認するために、エージェントに統合ブラウザーでページをプレビューするように依頼します。ページをプレビューするには、次のプロンプトを入力します。

   Preview the page in the integrated browser.
   

次のステップ

おめでとうございます！エージェントウィンドウとチャットビューの両方で作業し、エージェントを使ってポートフォリオページを構築しました。Visual Studio Codeでのエージェントコーディングをさらに深く学ぶには、以下の方法について詳細をご覧ください。

• さまざまなエージェントタイプを探索し、タスクをハンドオフする

• エージェントウィンドウについてさらに学ぶ

• チャットビューについてさらに学ぶ