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 がタスクを完了したら、変更を確認し、アプリをテストします。
「アプリを実行」または「サーバーを起動」のようなプロンプトを Copilot に与えて、アプリを実行するように依頼することもできます。
おめでとうございます
おめでとうございます。VS Code で Copilot Chat を使用して、質問をしたり、ワークスペース全体のコード編集を行うことができました。さまざまなプロンプトとチャットモードを試して、Copilot Chat を最大限に活用してください。