VS Code でのチャットの概要

このチュートリアルでは、Visual Studio Code でのチャットの使用方法を順を追って説明します。AI を活用したチャットの会話を使用して、コードのリファクタリング、コード理解の向上、VS Code の設定方法の確認を支援します。

VS Code で Copilot を使用するのが初めての場合は、Copilot の概要 を参照するか、Copilot クイック スタート でセットアップして主要な機能を確認してください。

前提条件

VS Code で GitHub Copilot を使用するには、以下が必要です。

• GitHub Copilot へのアクセス
• VS Code に GitHub Copilot 拡張機能がインストールされていること

GitHub Copilot セットアップ ガイド の手順に従って、GitHub Copilot へのアクセス権を取得し、VS Code に Copilot 拡張機能をインストールします。

最初のチャット会話を開始する

チャットでは、自然言語を使用して GitHub Copilot と対話し、コーディング関連の質問をして回答を得ることができます。

このチュートリアルでは、単純な Node.js Web アプリケーションを作成します。

1. 新しい VS Code ウィンドウを開きます。次の手順で新しいワークスペースを作成します。

2. タイトル バーの Copilot メニューから [チャットを開く] を選択するか、キーボード ショートカット ⌃⌘I (Windows、Linux Ctrl+Alt+I) を使用します。

   

   チャット ビューがセカンダリ サイド バーで開くことに注目してください。チャット ビューを横に表示しておくことで、コードの作業中に会話を続けることができます。

3. チャット ビューで、チャット モードのドロップダウンから [Ask] を選択します。

   ask モード を使用して、コーディングやテクノロジのトピックに関する質問をしたり、コードを説明したり、アイデアをブレインストーミングしたりします。

   

4. 一般的な Web フレームワークについて質問してみましょう。チャット入力フィールドに「最も人気のある Web フレームワークは何ですか?」と入力します。

   VS Code は一般的な Web フレームワークのリストを返します。特定のフレームワークに関する詳細情報を得たり、フレームワークを比較したりするために、追加の質問を試してみてください。たとえば、「Express と Fastify の違いは何ですか?」や「サーバーサイド レンダリングを行うにはどうすればよいですか?」と質問できます。

5. 新しい Web アプリのひな形を作成するには、チャット入力フィールドに「typescript と pug を使用した新しい express アプリ」と入力します。

   VS Code が新しいワークスペース ファイルを表すファイル ツリーを返すことに注目してください。ファイル ツリー内の任意のファイルを選択して、その内容をプレビューします。

   

6. [ワークスペースの作成] を選択してアプリを作成し、ワークスペースを作成するディスク上のフォルダーを選択します。

   ダイアログで [開く] を選択して、新しく作成されたワークスペースを VS Code で開きます。

   注

   VS Code から新しいワークスペースを信頼するかどうか尋ねられる場合があります。[はい、内容を信頼します] を選択してワークスペースを信頼します。ワークスペースの信頼 の詳細をご覧ください。

インライン チャットで作業フローを維持する

チャット ビューは会話を続けるのに最適ですが、エディターのインライン チャット は、エディターで現在作業しているコードについて Copilot に質問したい状況に最適化されています。たとえば、特定のコードをリファクタリングしたり、複雑なアルゴリズムを説明したりする場合です。

エディターのインライン チャットをコードのリファクタリングに使用する方法を見てみましょう。

1. app.ts ファイルを開き、キーボード ショートカット ⌘I (Windows、Linux Ctrl+I) を使用してエディターのインライン チャットを起動します。または、タイトル バーの Copilot メニューから [エディターのインライン チャット] を選択します。

   エディター内にチャット入力フィールドが表示され、チャットのプロンプトを入力して、エディター内のコードについて Copilot に質問できます。

   

2. チャット入力フィールドに「JSON 出力のサポートを追加」と入力し、Enter を押します。

   Copilot が Express で JSON 出力をサポートするためのコード提案を提供することに注目してください。

   

3. [承諾] または [閉じる] を選択して、変更を適用または無視します。

   提案されたコードの変更に満足できない場合は、[要求を再実行] コントロールを選択するか、追加の質問をして別の提案を得ることができます。

複数のファイルにわたって編集を行う

インライン チャットでは、単一のファイルに変更を加えました。チャット ビューで 編集モード に切り替えることで、Copilot を使用してワークスペース内の複数のファイルに変更を加えることもできます。

編集モードを使用して、.env ファイルに Web アプリの設定を保存してみましょう。

1. チャット ビューを開き、チャット モードのドロップダウンから [編集] を選択します。

   

2. Copilot が要求のスコープを理解できるように、package.json と app.ts をコンテキストとしてプロンプトに追加しましょう。

   1. チャット ビューで [コンテキストを追加] を選択し、検索フィールドに package と入力して、ファイルの一覧から package.json ファイルを選択します。追加できるコンテキストには多くの種類があることに注目してください。

   2. エディターで app.ts ファイルを開くと、Copilot がアクティブなファイルを自動的にチャット コンテキストに追加することに注目してください。

3. チャット入力フィールドに「設定に .env ファイルを使用する」と入力し、Enter を押します。

4. Copilot が複数のファイルにわたって更新を行い、新しい .env ファイルをワークスペースに追加することに注目してください。

   チャット ビューでは、変更されたファイルが太字で表示されます。

   

5. チャット ビューで [保持] を選択して、提案されたすべての変更を確定します。

   エディターのオーバーレイ コントロールを使用して、ファイル間の個々の変更を簡単にナビゲートおよびレビューします。

エージェント的なコーディング フローを開始する

より複雑な要求には、エージェント モード を使用して、Copilot に要求を完了するために必要なタスクを自律的に計画および実行させることができます。これらのタスクには、コードの編集だけでなく、ターミナルでのコマンドの実行も含まれる場合があります。エージェント モードでは、Copilot はタスクを達成するためにさまざまなツールを呼び出すことがあります。

エージェント モードを使用して、Web アプリを旅行のヒントを共有するものにし、テストを追加してみましょう。

1. チャット ビューを開き、チャット モードのドロップダウンから [エージェント] を選択します。

   

2. チャット入力フィールドに「アプリを旅行ブログにする。コードの回帰を防ぐためにテストを追加。」と入力し、Enter を押します。

   プロンプトにコンテキストを追加する必要がないことに注意してください。エージェント モードは、ワークスペース内のコードを自動的に分析します。

3. Copilot は、コードの変更を適用し、テストの実行などのコマンドを実行するために反復します。チャット ビューで [続行] を選択して、ターミナル コマンドを確定します。

   

   要求の複雑さに応じて、Copilot がすべてのタスクを完了するのに数分かかる場合があります。途中で問題が発生した場合は、それを修正するために反復します。

4. Copilot がタスクを完了したら、変更をレビューし、アプリをテストします。

   「アプリを実行」や「サーバーを起動」のようなプロンプトを与えることで、Copilot にアプリの実行を依頼することもできます。

おめでとうございます

おめでとうございます。VS Code で Copilot チャットを使用して、質問をしたり、ワークスペース全体でコードの編集を行ったりすることに成功しました。Copilot チャットを最大限に活用するために、さまざまなプロンプトやチャット モードで実験を続けてください。

追加リソース

• VS Code での Copilot チャットの概要を見る
• コードに関する質問にチャットを使用する
• 複数ファイルのコーディング セッションを開始する
• エージェント的なコーディング ワークフローを開始する