はじめに
GitHub Copilot は、Visual Studio Code (以下、VS Code) で提供される AI を活用したプログラミングツールで、VS Code上で拡張機能としてインストールすることで使用できます。
主な機能として、コードを編集中のファイルに対して続きのコードを提案してくれる Completions や、 自然言語でプログラミングをサポートする Chat があります。
今回は、GitHub Copilot の Chat を使う上で知っていると便利な知識を紹介します。
GitHub Copilot Chat のモードを使い分ける
GitHub Copilot Chat にはいくつかのモードがあり、用途に応じて適切な mode を選択することで効率的に作業を進めることができます。
| モード名 | 説明 | 使い道 |
|---|---|---|
| Ask | プロジェクトのコードや使用技術に対する質問に回答してくれる | コードのロジックがどう動いているのかを聞く、設計の壁打ちなど。 |
| Edit | プロジェクト内の複数ファイルに対して編集を行う | 機能追加、バグ修正、リファクタリングなど。 |
| Agent | コーディングエージェントとして自律コーディングを行う | 新機能の追加を自律的に実装させる。コードに問題が発見されると都度その問題を解決しながら実装を進めてくれる。 |
Edit モードは基本的に選択したファイル内で必要なコーディングを実行してくれます。
一方、Agent モードは渡されたプロンプトを達成するために複数のファイルを編集・新規作成してくれます。また、実装中にlintや実行エラーが発生した際にも自ら修正を行なってくれます（TypeScript の型エラーを any で解決してしまうこともあるため、プロンプトの調整が必要です。）。
Instruction files を活用する
具体的な指示やコンテキストを Markdown で GitHub Copilot に与えることができます。
Instruction files の種類
| ファイル名 | 機能 |
|---|---|
| .github/copilot-instructions.md | このファイルが保存されているワークスペースに特化した指示や情報を GitHub Copilot に与える。すべての Chat に自動的に反映される。 |
| .instructions.md | 特定のタスクに特化した指示や情報を GitHub Copilot に与える。個別の Chat ごとにこのファイルを添付することが可能。 |
Instruction files の構成
.instructions.md はxxx-yyy.instructions.md のようにsuffixとしてファイル名につけることで特定のタスクごとに複数ファイルを作成でき、大きく分けて以下の二つのセクションで構成されます。
- メタデータ（Front Matter）
-
applyTo: 指示を適用したいファイルの拡張子を指定できます。特に指定しない場合は**にします。
-
- ボディ
- 指示の内容を Markdown で書きます。
- 他の
.instructions.mdを Markdown のリンク記法を使って参照することができます。
（例）ファイル末尾に 'Contains AI-generated edits.'というコメントを残す指示
./sample.instructions.md
---
applyTo: "**"
---
# Project coding standards
Apply the [general coding guidelines](./general-coding.instructions.md) to all code you generate.
## Guidelines
- Add a comment at the end of the file: 'Contains AI-generated edits.'
.instructions.md の使用方法
Chat の Add Context > Files & Folders... からファイルを選択すると適用されます。
以下は.instructions.mdを読み込ませた上で、TypeScriptのファイルで関数を生成してもらう様子です。通常は Union types で生成してくれるのですが、差がわかるように敢えて Enum で型を定義するように.instructions.mdで指示しています。
Prompt files (experimental) を活用する
先述した Instruction files は Chat に渡す自然言語のプロンプトにルールや追加情報を与えて補助する役割でしたが、Prompt files を活用するとプロジェクト情報やコンテキストが含まれたプロンプトそのものをファイルとしてメンバーと共有することができます。
Prompt files の種類
VS Code は以下の二つのスコープで prompt files をサポートしています。
| 種類 | スコープ |
|---|---|
| Workspace prompt files | Workspace 内でのみ有効。.github/prompts フォルダに保存する。 |
| User prompt files | 複数 Workspace で有効。VS Code profile に保存する。 |
Prompt files の構成
.prompt.md は xxx-yyy.prompt.md のように suffix としてファイル名につけることで特定のタスクごとに作成でき、大きく分けて以下の二つのセクションで構成されます。
- メタデータ（Front matter）
-
mode: プロンプトを実行する際の Chat モード。ask,edit,agentのうちどれかを選択でき、デフォルトはagent。 -
tools: mode が Agent の場合に使用してほしいツール名。使用可能なツールの一覧は Chat で#を入力するか、 Chat のAdd Context...>Tools...から確認可能。 -
description: プロンプトの簡単な説明。
-
- ボディ
- 指示の内容を Markdown で書きます。
- 他の
.prompt.mdを Markdown のリンク記法を使って参照することができます。
（例）React のコンポーネントを新規作成するプロンプト
.github/prompts/sample-prompt-file.prompt.md
---
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.
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
Prompt files の使用方法
Chat の入力欄で / を入力すると候補が表示されるので、任意の Prompt files を選択することで適用されます。
まとめ
VS Code の公式拡張機能が Fork されたエディタでは使用できなくなったこともあり、最近はVS Codeのフォークエディタから VS Code への回帰もあるかと思います。
AIによるコーディングツールも群雄割拠しているので、常にアップデートしていきたいですね。
Microsoft Cracks Down On VS Code Forks – YouTube
Views: 1
