はじめに
みなさん、GitHub Copilotとは仲良しですか？私は仲良しです。
気軽に相談しやすいですし、なにより自分の想像した通りの内容を返答してくれます。
本記事ではその秘訣をみなさんに伝授します。
モデルはClaude Sonnet 4を使用しています！
こんなことができます
Before
After
instructionsファイルを書こう！
instructionsファイルは、GitHub Copilotに対してあらかじめプロンプト（指示）を与えられるファイルです。プロジェクトの中に特定のファイルを作成し、保存するだけで、自動的に Copilotがそのファイルを参照してコード提案をしてくれるようになります。
主な種類
- copilot-instructions.md - プロジェクト全体に適用される基本的な指示
- .instructions.md - 特定のファイルパターンに適用される詳細な指示
ファイル名を間違えると自動で参照されないので注意！
copilot-instructions.mdファイル
配置場所
プロジェクトのルートディレクトリ（.github/ フォルダ内）に配置します：
your-project/
├── .github/
│ └── copilot-instructions.md
├── src/
└── README.md
基本的な書き方
# プロジェクト名のCopilot指示
## 基本方針
- TypeScriptを使用する
- ESLintのルールに従う
- 関数型プログラミングを優先する
## コーディングスタイル
- 変数名はcamelCaseを使用
- 関数は純粋関数として作成
- 型注釈を必ず付ける
上記のGifはこのような内容を与えました。
ギャルとのペアプロができるようになるようです。
# プロジェクト内の指示
- ギャルのように話して
詳細なinstructionsファイル（パターンマッチング）
より細かく制御したい場合は、特定のファイルパターンに対してのみ適用される指示ファイルを作成できます。（.github/instructions/ フォルダ内）
ファイル構成例
your-project/
├── .github/
│ └── instructions/
│ ├── api.instructions.md # API関連ファイル用
│ ├── component.instructions.md # React component用
│ └── test.instructions.md # テストファイル用
├── src/
│ └── components/
│ └── hoge/
│ ├── sample.tsx
パターンマッチング指示ファイルの書き方
applyTo: のように書くことで、src/components/**/*.tsxファイルを編集する際に、Copilotが指定したスタイルやルールに従ってコードを提案してくれます。
---
applyTo: "./src/components/**/*.tsx"
---
# React Component用の指示
## 役割
Reactコンポーネントの作成・編集を支援する
## 指示
- 関数コンポーネントを使用する
- TypeScriptで型安全に書く
- propsの型定義を必ず行う
- styled-componentsを使用してスタイリング
- デフォルトexportを使用する
## コード例
```typescript
interface Props {
title: string;
onClick: () => void;
}
export default function Button({ title, onClick }: Props) {
return (
<StyledButton onClick={onClick}>
{title}
</StyledButton>
);
}
効果的な使い方のコツ
1. チーム共通のルールを明文化
チーム開発では、コーディング規約をinstructionsファイルに書くことで、全員が同じスタイルでコードを書けるようになります。
# チーム共通ルール
- 変数名は意味が分かるものにする
- コメントは日本語で書く
- 関数は1つの責任のみ持つ
- マジックナンバーは定数として定義する
2. プロジェクト固有の要件を盛り込む
使用しているライブラリやフレームワークに合わせた指示を書きましょう。
# Next.js プロジェクト用
- pages/api/ 配下はAPI Routesとして作成
- getServerSidePropsを適切に使用
- next/imageを使って画像を最適化
- next/linkを使ってルーティング
活用メリット
- 効率性: 毎回説明しなくても、Copilotが適切なコードを提案
- 品質向上: プロジェクト固有のベストプラクティスを自動で適用
- 学習効果: 新しいメンバーがプロジェクトのコーディング規約を自然に学べる
- メンテナンス性: コードレビューの時間短縮と統一された可読性の高いコード
- エラー減少: プロジェクト特有の落とし穴やアンチパターンを事前に回避
- ドキュメント化: コーディング規約が明文化され、プロジェクトの資産として蓄積
- カスタマイズ性: プロジェクトの成長に合わせて指示内容を柔軟に更新可能
注意点とベストプラクティス
やってはいけないこと
❌ 指示が曖昧すぎる
- いい感じにコードを書いて
- バグがないようにして
❌ 指示が多すぎる
100行以上の長大な指示
推奨されること
✅ 具体的で明確な指示
- 変数名はcamelCaseを使用する
- 関数の戻り値には型注釈を付ける
- エラーは適切にthrowする
✅ コード例を含める
以下のようなパターンでAPI呼び出しを実装してください：
```typescript
async function fetchData(): Promise<ApiResponse> {
try {
const response = await fetch('/api/data');
return await response.json();
} catch (error) {
throw new Error('データ取得に失敗しました');
}
}
まとめ
GitHub Copilotのinstructionsファイルは、AIペアプログラミングをより効果的にするための強力なツールです。
上手に書くことで、自分の指示通りの実装が手軽にできたり、ノリの合う友達にできたりできます。
ぜひGitHub Copilotと仲良くなりましょう！