VS Code の Copilot を使いこなすためのヒントとコツ

この記事では、Visual Studio Code で GitHub Copilot を使用する際の開発エクスペリエンスを最適化するためのヒントとコツを紹介します。

VS Code で Copilot を使用するためのチェックリスト

Copilot を最大限に活用するには、以下のチェックリストを使用してください

1. 適切なツールを選択する。 編集、質問、またはコード記述の流れを維持するのに最適化されたツールを使用します。

2. Copilot をパーソナライズする。 カスタム指示を使用して、自分のスタイルやコーディング規約に合ったコード候補を取得します。

3. 効果的なプロンプトを作成し、コンテキストを提供します。 最も関連性の高い応答を得ることができます。

4. ワークスペースをインデックス化する。 コードベースに関する質問に対して正確な応答を受け取ります。

5. AI モデルを選択する。 高速コーディングまたは計画/推論に適したモデルを選択します。

6. プロンプトを再利用する。 チーム全体でタスク固有のプロンプトを保存して再利用することで時間を節約します。

適切な Copilot ツールを選択する

タスクに応じて、さまざまな Copilot ツールから選択できます。

指示ファイルで Copilot をパーソナライズする

Copilot がコードを生成したり質問に答えたりする際、使用するライブラリや変数名の付け方など、あなたのコーディングの慣行や好みに合わせようとします。しかし、これを効果的に行うための十分なコンテキストが常にあるとは限りません。たとえば、特定のフレームワークバージョンで作業している場合、プロンプトに追加のコンテキストを提供する必要があります。

AI の応答を向上させるには、指示ファイルを使用して、チームのコーディング規約、ツール、プロジェクトの特定の詳細に関するコンテキスト情報を提供できます。これらの指示はチャットプロンプトに添付したり、自動的に適用させたりすることができます。

ワークスペースで指示ファイルを有効にするには

1. コマンドパレットから「チャット: 新規指示ファイル」コマンドを実行します。

   このコマンドにより、.github/instructions フォルダーに .instructions.md ファイルが作成されます。

2. Markdown 形式で指示をファイルに追加します。例

   # Custom instructions for Copilot
   
   ## Project context
   This project is a web application built with React and Node.js.
   
   ## Indentation
   We use tabs, not spaces.
   
   ## Coding style
   Use camelCase for variable names and prefer arrow functions over traditional function expressions.
   
   ## Testing
   We use Jest for unit testing and Playwright for end-to-end testing.
   

3. オプションで、指示を適用するファイルを指定するために、`applyTo` メタデータフィールドにグロブパターンを追加します。

   ---
   applyTo: "**/*.ts"
   ---
   Coding practices for TypeScript files.
   ...
   

VS Code での指示ファイルの使用に関する詳細を確認する。

プロンプトエンジニアリング

効果的なプロンプトを使用することで、Copilot の応答の品質を向上させることができます。適切に作成されたプロンプトは、Copilot があなたの要件をよりよく理解し、より関連性の高いコード候補を生成するのに役立ちます。

• 一般的なことから始め、徐々に具体的にする。

  Generate a Calculator class.
  Add methods for addition, subtraction, multiplication, division, and factorial.
  Don't use any external libraries and don't use recursion.
  

• 何を求めているかの例を示す。

  Generate a function that takes a string and returns the number of vowels in it.
  Example:
  findVowels("hello") returns 2
  findVowels("sky") returns 0
  

• 複雑なタスクをより単純なタスクに分解する。

  Copilot に食事プランナーアプリの生成を依頼する代わりに、それをより小さなタスクに分解する

  • 材料のリストを受け取り、レシピのリストを返す関数を生成する。
  • レシピのリストを受け取り、買い物リストを返す関数を生成する。
  • レシピのリストを受け取り、週の食事計画を返す関数を生成する。

• コードの選択、ファイル、ターミナル出力など、適切なコンテキストを提供する。

  例: #codebase 変数を使用してコードベース全体を参照します

  Where is the database connection string used in #codebase?
  

• プロンプトを繰り返し改善する。

  応答を洗練または変更するために、追加のプロンプトを提供します。例

  • 「数値の階乗を計算する関数を作成してください。」
  • 「再帰を使用せず、キャッシュを使用して最適化してください。」
  • 「意味のある変数名を使用してください。」

• チャット履歴を関連性の高いものに保つ。

  Copilot は会話の履歴を使用してコンテキストを提供します。関連性のない過去の質問や応答は履歴から削除してください。または、コンテキストを変更したい場合は、新しいセッションを開始してください。

プロンプトエンジニアリングの詳細を確認する。

GitHub Copilot ドキュメントで、Copilot とともに使用するためのプロンプトの実践的な例を見つける。

適切なコンテキストとツールを提供する

チャットでより正確で関連性の高い応答を得るために、関連するコンテキストでプロンプトを充実させます。適切なツールがあれば、開発者の生産性を向上させることができます。

• エージェントモードでは、ツールボタンを選択して使用したいツールを設定するか、明示的にプロンプトに追加します。
• #codebase を使用して、Copilot がコード検索を実行することで適切なファイルを自動的に見つけるようにします。
• #fetch ツールを使用してウェブページからコンテンツを取得するか、#githubRepo を使用して GitHub リポジトリでコード検索を実行します。
• #<ファイル名>、#<フォルダー名>、または #<シンボル> を使用して、プロンプト内でファイル、フォルダー、またはシンボルを参照します。
• ファイル、フォルダー、またはエディタータブをチャットプロンプトにドラッグアンドドロップします。
• シナリオ固有のコンテキストのために、問題、テストの失敗、またはターミナル出力をチャットプロンプトに追加します。
• Copilot に画像を分析させるために、プロンプトに画像やスクリーンショットを追加します。
• エージェントモードでは、アプリをプレビューするようプロンプトを出して、組み込みの簡易ブラウザーで直接開くことができます。

エージェントモードを使用すると、Copilot は関連するファイルとコンテキストを自律的に見つけ出します。

チャットプロンプトにコンテキストを追加する方法の詳細を確認する。

再利用可能なプロンプト

プロンプトファイルを使用すると、特定のタスクのプロンプトを、そのコンテキストと指示とともに Markdown ファイルに保存できます。その後、そのプロンプトをチャットに添付して再利用できます。プロンプトをワークスペースに保存した場合、チームと共有することもできます。

再利用可能なプロンプトを作成するには

1. コマンドパレットで「チャット: 新規プロンプトファイル」コマンドを使用してプロンプトファイルを作成します。

   このコマンドにより、ワークスペースのルートにある .github/prompts フォルダーに .prompt.md ファイルが作成されます。

2. Markdown 形式でプロンプトと関連するコンテキストを記述します。

   例として、このプロンプトを使用して新しい React フォームコンポーネントを生成します。

   Your goal is to generate a new React form component.
   
   Ask for the form name and fields if not provided.
   
   Requirements for the form:
   * Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
   * Use `react-hook-form` for form state management:
   * Always define TypeScript types for your form data
   * Prefer *uncontrolled* components using register
   * Use `defaultValues` to prevent unnecessary rerenders
   * Use `yup` for validation:
   * Create reusable validation schemas in separate files
   * Use TypeScript types to ensure type safety
   * Customize UX-friendly validation rules
   

3. オプションで、チャットでプロンプトを実行する方法に関するメタデータを追加します。`mode` フィールドを使用してチャットモードを指定し、`tools` フィールドを使用して使用するエージェントモードツールを指定します。

   ---
   mode: 'agent'
   tools: ['githubRepo', 'codebase']
   description: 'Generate a new React form component'
   ---
   Your goal is to generate a new React form component based on the templates in #githubRepo contoso/react-templates.
   
   Requirements for the form:
   * Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
   * Use `react-hook-form` for form state management:
   * Always define TypeScript types for your form data
   

4. チャット入力フィールドに / と入力し、その後にプロンプトファイル名を入力してコマンドを実行します。

   たとえば、new-react-form.prompt.md という名前のプロンプトファイルを実行するには、/new-react-form と入力します。

プロンプトファイルの利用を開始する。

AI モデルを選択する

Copilot は、選択できるさまざまな AI モデルを提供します。一部のモデルは高速コーディングタスクに最適化されており、他のモデルはより低速な計画および推論タスクに適しています。

チャット入力フィールドのモデルピッカーを使用して、ニーズに最適なモデルを選択してください。

GitHub Copilot ドキュメントで、Copilot Chat 用の AI モデルの詳細を確認してください。

ワークスペースのインデックス作成

Copilot は、コードベースから関連するコードスニペットを迅速かつ正確に検索するためにインデックスを使用します。このインデックスは GitHub によって管理されるか、お使いのマシンにローカルに保存されます。

GitHub リポジトリの場合、GitHub コード検索に基づいて、ワークスペースのリモートインデックスを使用できます。これにより、コードベースが非常に大きい場合でも、Copilot はコードベース全体を非常に迅速に検索できます。

ワークスペースインデックスの詳細を確認する。

関連リソース

• Copilot Chat のプロンプトエンジニアリング
• GitHub Copilot ドキュメントの『GitHub Copilot を使用するためのベストプラクティス』
• VS Code で Copilot をパーソナライズする