VS Code で Copilot Chat を使い始める
このチュートリアルでは、Visual Studio Code で Copilot Chat を使用する方法を説明します。AI を活用したチャット会話を使用して、コードのリファクタリング、コードの理解の向上、VS Code の設定方法の把握に役立てることができます。
VS Code で Copilot を初めて使用する場合は、Copilot の概要を参照するか、Copilot クイックスタートで設定を行い、主要な機能を習得してください。
Copilot のサブスクリプションをお持ちでない場合は、Copilot 無料プランにサインアップすると、Copilot を無料で利用でき、月間のコード補完およびチャット対話の制限が設けられます。
前提条件
VS Code で GitHub Copilot を使用するには、以下が必要です。
- GitHub Copilot へのアクセス
- VS Code に GitHub Copilot 拡張機能がインストールされていること
GitHub Copilot セットアップ ガイドの手順に従って GitHub Copilot へのアクセスを取得し、VS Code に Copilot 拡張機能をインストールしてください。
初めてのチャット会話を始める
Copilot Chat を使用すると、自然言語を使って GitHub Copilot と対話でき、コーディング関連の質問をしたり、その回答を受け取ったりできます。
このチュートリアルでは、シンプルな Node.js Web アプリケーションを作成します。
-
新しい VS Code ウィンドウを開きます。次のステップで新しいワークスペースを作成します。
-
タイトルバーの Copilot メニューから**チャットを開く**を選択するか、⌃⌘I (Windows、Linux Ctrl+Alt+I) キーボードショートカットを使用します。
チャットビューがセカンダリサイドバーに開かれることに注目してください。チャットビューをサイドに表示することで、コード作業中に会話を継続できます。
-
チャットビューで、チャットモードのドロップダウンから**質問する**を選択します。
*質問モード*を使用して、Copilot にコーディングや技術に関する質問をしたり、コードを説明させたり、アイデアをブレインストーミングしたりできます。
-
Copilot に人気のある Web フレームワークについて質問してみましょう。チャット入力フィールドに「最も人気のある Web フレームワークは何ですか？」と入力します。
Copilot が人気の Web フレームワークのリストを返します。追加の質問をして、特定のフレームワークに関する詳細情報を取得したり、フレームワークを比較したりしてみてください。たとえば、「Express と Fastify の違いは何ですか？」や「サーバーサイドレンダリングを行うにはどうすればよいですか？」と質問できます。
-
新しい Web アプリをスキャフォールドするには、チャット入力フィールドに「typescript と pug を使用した新しい Express アプリ」と入力します。
Copilot が新しいワークスペースファイルを表すファイルツリーを返すことに注目してください。ファイルツリー内の任意のファイルを選択して、その内容をプレビューできます。
-
アプリを作成するには、**ワークスペースの作成**を選択し、ワークスペースを作成するディスク上のフォルダーを選択します。
ダイアログで**開く**を選択して、新しく作成されたワークスペースを VS Code で開きます。
注VS Code が新しいワークスペースを信頼するかどうかを尋ねる場合があります。ワークスペースを信頼するには、**はい、内容を信頼します**を選択します。ワークスペースの信頼に関する詳細については、こちらを参照してください。
インラインチャットで中断なく作業を進める
チャットビューは会話を継続するのに優れていますが、*エディターインラインチャット*は、エディターで現在作業中のコードについて Copilot に質問したい状況に最適化されています。たとえば、特定のコードをリファクタリングしたり、複雑なアルゴリズムを説明したりする場合などです。
コードのリファクタリングにエディターインラインチャットを使用する方法を見てみましょう。
-
`app.ts` ファイルを開き、⌘I (Windows、Linux Ctrl+I) キーボードショートカットを使用してエディターインラインチャットを表示します。または、タイトルバーの Copilot メニューから**エディターインラインチャット**を選択します。
チャット入力フィールドがエディター内にインラインで表示され、そこでチャットプロンプトを入力し、エディター内のコードについて Copilot に質問できます。
-
チャット入力フィールドに「JSON 出力のサポートを追加」と入力し、Enter キーを押します。
Copilot が Express で JSON 出力のサポートを追加するためのコード提案を提供することに注目してください。
-
変更を適用または無視するには、**承認**または**閉じる**を選択します。
提案されたコード変更に満足できない場合は、**要求を再実行**コントロールを選択するか、追加の質問をして別の提案を得ることができます。
エディター内で右クリックし、**Copilot**コンテキストメニューを選択すると、コードの修正や説明、テストの生成など、一般的に使用される Copilot コマンドにアクセスできます。
複数のファイルをまとめて編集する
インラインチャットでは単一のファイルを変更しましたが、チャットビューで*編集モード*に切り替えることで、ワークスペース内の複数のファイルをまとめて Copilot で変更することもできます。
編集モードを使用して、Web アプリの構成を`.env`ファイルに保存してみましょう。
-
チャットビューを開き、チャットモードのドロップダウンから**編集**を選択します。
-
Copilot が要求の範囲を理解できるように、`package.json` と `app.ts` をプロンプトのコンテキストとして追加してみましょう。
-
チャットビューで**コンテキストの追加**を選択し、検索フィールドに`package`と入力し、ファイルリストから`package.json`ファイルを選択します。追加できるコンテキストには多くの種類があることに注目してください。
-
エディターで`app.ts`ファイルを開くと、Copilot がアクティブなファイルをチャットコンテキストに自動的に追加することに注目してください。
-
-
チャット入力フィールドに「構成に .env ファイルを使用する」と入力し、Enter キーを押します。
-
Copilot が複数のファイルを横断して更新を行い、新しい`.env`ファイルをワークスペースに追加することに注目してください。
チャットビューでは、変更されたファイルが太字で表示されます。
-
チャットビューで**保持**を選択して、提案されたすべての変更を確認します。
エディターのオーバーレイコントロールを使用して、ファイル全体の個々の変更を簡単にナビゲートおよびレビューできます。
エージェントコーディングフローを開始する
より複雑な要求の場合は、*エージェントモード*を使用して、Copilot が要求を完了するために必要なタスクを自律的に計画および実行させることができます。これらのタスクには、コードの編集だけでなく、ターミナルでのコマンド実行も含まれます。エージェントモードでは、Copilot はタスクを達成するためにさまざまなツールを呼び出す場合があります。
エージェントモードを使用して、Web アプリを旅行のヒント共有アプリにして、テストを追加してみましょう。
-
チャットビューを開き、チャットモードのドロップダウンから**エージェント**を選択します。
-
チャット入力フィールドに「アプリを旅行ブログにする。コードの回帰を防ぐためにテストを追加。」と入力し、Enter キーを押します。
プロンプトにコンテキストを追加する必要がないことに注意してください。エージェントモードは、ワークスペース内のコードを自動的に分析します。
-
Copilot は、コード変更を適用し、テストの実行などのコマンドを実行するために反復します。チャットビューで**続行**を選択して、ターミナルコマンドを確認します。
要求の複雑さによっては、Copilot がすべてのタスクを完了するまでに数分かかる場合があります。途中で問題が発生した場合、それを修正するために反復します。
-
Copilot がタスクを完了したら、変更を確認し、アプリをテストします。
また、「アプリを実行」や「サーバーを起動」のようなプロンプトを与えて、Copilot にアプリを実行させることもできます。
おめでとうございます
おめでとうございます。VS Code で Copilot Chat を使用して、質問したり、ワークスペース全体でコードを編集したりすることに成功しました。Copilot Chat を最大限に活用するために、さまざまなプロンプトやチャットモードを試し続けてください。