GitHub Copilotをプロジェクトの書き方に合わせる：instructionsファイルの活用法

GitHub Copilotはデフォルトでは汎用的なコードを提案しますが、プロジェクト固有の規約やパターンまでは理解していません。

instructionsファイルを使えばこの課題を解決できます。実際に設定した手順と効果を解説します。

instructionsファイルの仕組み

instructionsファイルは、AIにプロジェクトの文脈・制約・品質基準を伝える設定ファイルです。プロジェクト固有の書き方やルールをAIに教えることで、より適切なコード提案を受けられるようになります。

instructionsファイルの詳細や公式の仕様については、以下のドキュメントを参照してください。

実際の効果

実際に設定すると、以下のような改善が見られました。

プロジェクトで使っている技術スタックやアーキテクチャパターンを理解したコード提案が増え、命名規則や文体も統一されました。例えば、設定前はButtonコンポーネントをclass属性で実装する提案が出ていましたが、設定後はプロジェクトの規約に沿ったTailwind CSSを使った提案に変わりました。

テストやアクセシビリティの考慮も自動的に含まれるため、手直しの回数が減りました。

VS Code設定の確認

この機能はデフォルトで有効になっていないため、VS Codeでの設定が必要です。

設定画面で「copilot instruction」を検索し、GitHub › Copilot › Chat › Code Generation: Use Instruction Files（github.copilot.chat.codeGeneration.useInstructionFiles）にチェックを入れます。この設定が無効だと、ファイルを作成してもCopilotに認識されません。

ファイルの配置

instructionsファイルは特定の場所に配置する必要があります：

プロジェクトルート/
├── .github/
│   └── copilot-instructions.md  ← ここに配置
├── src/
├── package.json
└── README.md

ファイル名は copilot-instructions.md でなければなりません。VS Codeがこの名前で認識するため、他の名前では機能しません。

ファイルの書き方

instructionsファイルはMarkdown形式で書きます。実際に使っている構成例を紹介します：

---
mode: agent
---

# プロジェクト向けCopilot指示書

## プロジェクト概要

このプロジェクトは、Next.js + TypeScriptで構築されたWebアプリケーションです。

### 技術スタック
- Next.js 15（App Router）
- TypeScript
- Tailwind CSS
- Playwright（E2Eテスト）

## コーディング規約

### ファイル命名規則
- コンポーネント: PascalCase（例: `UserProfile.tsx`）
- ユーティリティ: camelCase（例: `dateUtils.ts`）
- ディレクトリ: kebab-case（例: `user-profile/`）

### 品質基準
- すべてのコンポーネントにはPropsの型定義を必須とする
- アクセシビリティ（WCAG 2.1 AA）準拠
- レスポンシブデザインの実装

ファイルの先頭に mode: agent を指定することで、Copilot Agent用の指示であることを明示します。

まとめ

instructionsファイルを設定すると、Copilotがプロジェクト固有の書き方を理解してくれました。初期設定は少し手間がかかりますが、長期的には開発効率の向上につながります。

プロジェクトの規模や複雑さに応じて、instructionsの内容を調整していくのが現実的なアプローチです。まずは基本的な設定から始め、必要に応じて詳細を追加していくとよいでしょう。