が利用可能になりました。11月の新機能と修正についてお読みください。

VS CodeでGitHub Copilotを使用するためのベストプラクティス

この記事では、プロンプトの作成とGitHub Copilotへの適切なコンテキストの提供を通じて、Visual Studio CodeでGitHub Copilotを使用するためのベストプラクティスについて説明します。

「プロンプトエンジニアリング」または「プロンプト作成」は、AIについて議論する際によく耳にする言葉で、AI APIエンドポイントにパッケージ化されて送信される情報とその方法を指します。Copilot拡張機能はこのプロセスを自動的に行いますが、ヒントを提供して拡張機能を誘導することで、より良い結果を得ることができます。

VS CodeまたはGitHub Copilotを初めて使用する場合は、まずGitHub Copilotの概要記事を確認するか、はじめにチュートリアルに直接進むことをお勧めします。

インライン提案とチャットの両方でCopilotのエクスペリエンスを最適化するためのさまざまなオプションがあります。

Copilotのインライン提案を最大限に活用する

GitHub Copilot拡張機能は、より効率的にコーディングできるように、自動的に提案を表示します。Copilotに可能な限り最良の提案をさせるために、できることがあります(「プロンプト」)。そして、良いニュースは、あなたと同僚があなたのコードを理解するのに役立つため、おそらくあなたはすでにこれらを正しく行っているということです。

Copilotにコンテキストを提供する

Copilotは、何をしているのか、何を手伝って欲しいのかを把握するための十分なコンテキストがある場合に最も効果を発揮します。特定のプログラミングタスクについて助けを求める際に同僚にコンテキストを提供するのと同じように、Copilotでも同じことができます。

ファイルを開く

コード補完の場合、Copilotはエディター内の現在および開いているファイルを参照して、コンテキストを分析し、適切な提案を作成します。Copilotを使用しているときにVS Codeで関連ファイルを開いておくと、このコンテキストを設定でき、Copilotがプロジェクトの全体像を把握できます。

トップレベルのコメント

同僚に簡単な概要を説明するのと同じように、作業中のファイルのトップレベルのコメントは、Copilotが作成している部分の全体的なコンテキストを理解するのに役立ちます。

適切なインクルードと参照

作業に必要なインクルードまたはモジュール参照は手動で設定するのが最適です。Copilotは提案を行うことができますが、含める必要のある依存関係はあなたが最もよく知っている可能性があります。これは、Copilotが提案を作成するときに使用するフレームワーク、ライブラリ、およびそのバージョンをCopilotに知らせるのに役立ちます。

次のTypeScriptの例では、addメソッドの出力をログに記録します。インクルードがない場合、Copilotはconsole.logの使用を提案します

Copilot inline suggestion proposes Console.log when no imports in the file.

一方、Log4jsへの参照を追加すると、Copilotはログ出力にそのフレームワークを使用することを提案します

Copilot inline suggestion proposes logging using the imported logging framework.

意味のある関数名

fetchData()という名前のメソッドが(数か月後のあなたにとっても)同僚にとってあまり意味がないのと同じように、fetchData()はCopilotにも役立ちません。意味のある関数名を使用すると、Copilotは必要な処理を行う本文を提供できます。

特定かつスコープの明確な関数コメント

関数名は、長くなりすぎることなく、記述的である必要があります。関数コメントは、Copilotが知る必要があるかもしれない詳細を埋めるのに役立ちます。

サンプルコードでCopilotを準備する

Copilotを正しいページに導くための1つのコツは、探しているものに近いサンプルコードをコピーして、開いているエディターに貼り付けることです。小さな例を提供することで、Copilotが目的を達成するために必要な言語とタスクに一致する提案を生成するのに役立ちます。Copilotが必要なコードを提供し始めたら、ファイルからサンプルコードを削除できます。これは、Copilotが古いコードの提案をデフォルトで提供している場合に、新しいライブラリバージョンをCopilotに迅速に開始するのに特に役立ちます。

一貫性を保ち、品質基準を高く保つ

Copilotは既存のパターンに従う提案を生成するためにあなたのコードに固執するため、「ゴミはゴミ箱へ」という格言が当てはまります。

常に高い品質基準を維持するには、規律が必要です。特に、何かを動作させるために手早くコーディングしている場合は、「ハッキング」モード中にCopilotの補完を無効にしたい場合があります。Copilotステータスメニューから補完を一時的に無効にできます。Copilotステータスバーの項目を選択して、Copilotステータスメニューのドロップダウンを表示します。

Hover over the Copilot Status bar item displays "Show Copilot status menu"

ドロップダウンから、補完を完全に無効にするか、アクティブなファイルタイプ(たとえばMarkdownファイル)に対してのみ無効にすることができます。

Copilot Status menu dropdown with Disable Completions selected

Copilotチャットを最大限に活用する

また、GitHub Copilot Chat拡張機能をインストールすることにより、チャットインターフェースを介してCopilotから支援を受けることもできます。

チャットを使用してGitHub Copilotと対話する場合、エクスペリエンスを最適化するためにできることがいくつかあります。

チャット参加者とスラッシュコマンドを使用する

チャット参加者は、コードベースまたは特定のドメインやテクノロジーに関する追加のコンテキストを収集するように設計されています。適切な参加者を使用することで、Copilot ChatはCopilotバックエンドに送信するより適切な情報を見つけて提供できます。たとえば、開いているプロジェクトに関する質問をする場合は@workspaceを使用し、VS Codeの機能やAPIの詳細を知りたい場合は@vscodeを使用します。

Asking the @vscode participant how to change the VS Code colors

スラッシュコマンドは、質問をするときにCopilot Chatがあなたの意図を理解するのに役立ちます。コードベースについて学習しているのか(/explain)、問題の修正を手伝ってほしいのか(/fix)、テストケースを作成しているのか(/tests)?Copilot Chatに何をしようとしているかを知らせることで、タスクに合わせて応答を調整し、役立つコマンド、設定、コードスニペットを提供できます。

Inline Chat slash command list

自然言語クエリでプロジェクトのスコープまたは現在のタスクを記述できますが、チャット参加者とスラッシュコマンドを使用する方が簡潔で明示的です。

Copilot Chatのチャット参加者スラッシュコマンドの詳細については、こちらをご覧ください。

コンテキストにチャット変数を使用する

@workspace@vscode のようなチャット参加者は、ドメイン固有のコンテキストを提供するチャット変数を追加できます。チャットプロンプトでチャット変数を参照するには、# 記号を使用します。チャット変数を使用することで、チャットプロンプトに含めるコンテキストをより具体的にすることができます。

たとえば、#file 変数を使用すると、ワークスペース内の特定のファイルをチャットプロンプトで参照できます。これにより、作業中のファイルに関するコンテキストを提供することで、Copilot Chat からの回答がコードにより関連性の高いものになります。「#file:package.json の改善点を提案してください」や「#file:devcontainer.json に拡張機能を追加するにはどうすればよいですか?」のような質問をすることができます。#file 変数を使用することで、Copilot からより的を絞った正確な回答を得ることができます。

チャットビューの コンテキストを添付 ボタンを使用して、チャットメッセージにコンテキストを追加することもできます。その後、現在の選択範囲、ワークスペース内の 1 つまたは複数のファイル、ソースコード内の 1 つまたは複数のシンボルなど、クイックピッカーから特定の種類のコンテキストを選択できます。

Screenshot of VS Code Copilot Chat view, showing the Attach context button and context Quick Pick.

Copilot Chat でのコンテキスト変数の使用について詳しくはこちらをご覧ください。

具体的かつ簡潔に

Copilot に何かを依頼するときは、依頼内容を具体的にし、大きなタスクを個別の小さなタスクに分割してください。たとえば、TypeScript と Pug を使用し、MongoDB データベースからデータを取得する製品ページを備えた Express アプリを作成するように Copilot に依頼しないでください。代わりに、まず Copilot に TypeScript と Pug を使用して Express アプリを作成するように依頼します。次に、製品ページを追加するように依頼し、最後にデータベースから顧客データを取得するように依頼します。

Copilot に特定のタスクを実行するように依頼するときは、使用する入力、出力、API、またはフレームワークを具体的に指定してください。プロンプトが具体的であるほど、結果は良くなります。たとえば、「データベースから製品データを読み取る」のではなく、「カテゴリ別にすべての製品を読み取り、データを JSON 形式で返し、Mongoose ライブラリを使用する」のようにします。

ソリューションを反復する

Copilot Chat に助けを求めている場合、最初の回答に固執する必要はありません。Copilot にソリューションを改善するように促し、反復することができます。Copilot は、生成されたコードと現在の会話の両方のコンテキストを持っています。

これは、インライン チャットを使用してフィボナッチ数を計算する関数を作成する例です。

First response from Copilot for a function to calculate Fibonacci numbers

再帰を使用しないソリューションを好むかもしれません。

Ask Copilot to not use recursion and new result

コーディング規約に従うか、変数名を改善するように Copilot に依頼することもできます。

Ask Copilot to use better variable names and new result

結果を既に受け入れた場合でも、後で Copilot にコードを反復するように依頼することができます。

Copilotのプロンプトに関するその他のリソース

GitHub Copilot の生産的な使用法について詳しく知りたい場合は、これらのビデオとブログ投稿をフォローできます。