⛑️
VSCodeとGithub Copilotを連携してRules for AIを作成した

2025/04/20に公開
VS Code
Copilot
Model Context Protocol
Cursor
rfai
tech
 動機近年、AI の進化は目覚ましく、開発の現場にも急速にその波が押し寄せています。特に最近では、AI Agentにほぼすべてのコーディングを任せてアプリを開発していく、いわゆる Vibe Coding という手法が話題になっています。この新しい開発スタイルを耳にしたとき、私は「この流れに乗らなければ時代に取り残されてしまうのではないか」と強く感じました。
そこで、以前から気になっていた agent モードについて、本格的に調査してみることにしました。

まず最初に手を付けたのは、今話題沸騰中の AI コーディングエディタ、Cursor です。
特に私の興味を引いたのは、**プロジェクトごとにユーザーがカスタムルールを設定し、AI の挙動をコントロールできる「Cursor Rules」**という機能でした。これを使えば、プロジェクトごとにコーディング規約や使用する技術スタックを事前に AI に認識させることができ、チーム開発における統一感をぐっと高めることが可能になります。

実際の運用フローとしては、プロジェクトを開始する際にあらかじめ「Cursor Rules」を設定し、それを agent に読み込ませることで、より意図に沿ったアシストを受けることができる、というイメージです。
Cursor Rules の公式ドキュメントはこちらになります。

👉 Cursor Rules: https://docs.cursor.com/context/rules
なお、今回は「MCP (Multi-context Prompting) の設定方法」や「GitHub Copilot の基本的な使い方」など、すでに多くの記事で取り上げられている内容については割愛させていただきます。興味のある方は、別途調べてみてください。

 vscode で実装してみたい「Cursor は魅力的だけど、やっぱり私は vscode が好きだ！」

そんな気持ちが拭えず、Cursor を使わずに、vscode 上で同じような仕組みを実現できないか？ と考えるようになりました。
意気揚々と調べ始めたものの、思った以上に情報が少ない……。

それでも何とか見つけた参考になりそうな情報を以下にまとめます。

Custom instructions for GitHub Copilot in VS Code

　（公式ドキュメント。Copilot にカスタム指示を与える方法）

第二版 VSCode の Rules for AI 全体のルール設定 翻訳 GitHub Copilot

　（日本語解説。公式ドキュメントの要点をわかりやすくまとめてくれている）

VSCode の copilot に複数の instructions ファイルを読み込ませる

　（Copilot への複数ルール適用方法について詳しく解説）

github: cursorrules 「v5」

　（Cursor Rules を VSCode 用にアレンジしたツールのリポジトリ）
これらの情報をもとに、私なりにわかりやすく整理して解説していきます。

ただし、現時点では実際にプロダクションレベルの開発に適用した経験はなく、情報もまだ発展途上の段階です。

そのため、誤った情報が含まれている可能性が高いことをあらかじめご承知おきください。私自身も現在進行形で勉強中ですので、もし間違いや補足情報があれば、ぜひコメント欄で教えていただけると嬉しいです！
では、早速いってみましょう！

 フォルダ構造今回、試すにあたって使ったリポジトリです。具体的なファイルの中身や全体像の把握に参考にしてください。
https://github.com/lvncer/copilot-RfAI
まず、全体のフォルダ構成としては以下の通りです。
├── .github/
|   └── prompts/ #プロンプトファイル用のフォルダ
|   |   ├── todo.md
|   |   └── ...
|   ├── completes/ #実装が終わったプロンプトファイルを入れるフォルダ
|   |   ├── 20250419-001-code-style-doc.prompt.md
|   |   └── ...
|   ├── copilot-instructions.md  #全体の指示書
|   ├── memory.md #メモリーファイル
|   ├── task-list.prompt.md #タスクリストファイル
|   ├── .copilot-commit-message-instructions.md
|   ├── .copilot-pull-request-description-instructions.md
|   ├── .copilot-review-instructions.md
|   ├── .copilot-test-instructions.md
|   ├── .copilot-codeGeneration-instructions.md
├── .vscode
|   ├── mcp.json
|   └── settings.json
├── design
|   └── design.md
├── README.md
└── todo.md

 それぞれのファイルについて
 copilot-instructions.md
デフォルトで参照してくれます。このファイルが非常に重要で、具体的には大きく分けて以下の項目に分けて書かれています。

ただし、これはテスト用に github copilot に読み込みができているか聞いたときの返答なので、欠けていたり間違えているかもしれません。参考程度に。
## プロジェクトの進行手順

設計書を基にタスク分解し、タスクリストファイルに登録。
各タスクに対応するプロンプトファイルを作成し、詳細な実装情報を記載。
プロンプトファイルを元にコードを生成し、技術的負債がないか確認。
実装後、テスト（ユニット、結合、E2E）を実施し、必要に応じてリファクタリング。
ソースコードの批判・分析を行い、レビューを実施。

## ファイル管理

設計書: design フォルダに保存。
タスクリストファイル: task-list.prompt.md にタスクを管理。
プロンプトファイル: 各タスクごとに作成し、命名規則に従う。
メモリーファイル: memory.md に進捗や技術的判断を記録。

## 技術的負債の解消

コードの重複、複雑さ、テスト不足、ドキュメント不足、パフォーマンスやセキュリティ問題を解消。

## 使用技術スタック

フロントエンド: Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, Radix UI, Clerk。
バックエンド: Prisma, SQLite。
ユーティリティ: date-fns, Zod。
開発ツール: ESLint, PostCSS, Autoprefixer。

## UI 設計の指針

shadcn/ui をベースにし、カスタマイズは最小限。
Tailwind CSS を使用し、モバイルファーストでレスポンシブデザインを実現。
アクセシビリティ、エラーメッセージ、ダークモード対応を重視。

## セキュリティとドキュメント

.env\* ファイルは Git 管理禁止。
README.md に使い方や変更内容を記載。

## MCP 設定

mcp.json に MCP 設定を記載。
このファイルを有効化するために、.vscode/setting.jsonに以下の設定を追加します。
"github.copilot.chat.codeGeneration.useInstructionFiles": true,

 memory.md
github copilot が、コード生成や、チャットで決めてきた仕様を記録するファイルです。メモリーファイルを利用することで、途中から再開することが容易くなります。以下の項目とフォーマットに分けて書かれます。
開発環境、使用技術
システムの構成、技術的判断、設計パターン
プロジェクトの目的、解決する問題、期待される挙動
現在作業中の内容、最近の変更点、次のステップ
完成済みの機能、進捗状況、残りの作業
[開発環境、使用技術]

[システムの構成、技術的判断、設計パターン]

[プロジェクトの目的、解決する問題、期待される挙動]

[現在作業中の内容、最近の変更点、次のステップ]

[完成済みの機能、進捗状況、残りの作業]


 task-list.prompt.md
github copilot が設計書を元に、1 機能単位にタスク分解を行い、現在のタスク、これから行うタスク、完了したタスクを記録します。このタスクに含まれていないものを上書きすることを防いだり、コードが変更された際に更新されるようになります。

以下は私が実際に todo アプリを作成するときに作成してもらったものです。フォーマットの参考にしてください。
# タスクリスト

## 未着手

- [ ] タスクモデルの設計と Prisma スキーマ作成
- [ ] タスクの追加機能の実装
- [ ] タスクの一覧表示機能の実装
- [ ] タスクの編集機能の実装
- [ ] タスクの削除機能の実装
- [ ] タスクの完了状態切り替え機能の実装
- [ ] UI デザインの作成 (shadcn/ui, Tailwind CSS)
- [ ] ユニットテストの作成
- [ ] 結合テストの作成
- [ ] E2E テストの作成

## 作業中

- なし

## 完了

- なし

 その他の指示出しファイルこれらは現状、2025/4/20 現在でカスタム指示ファイルとして公式に用意されているすべてのファイルです。

vscode のユーザー設定の settings.json にて調べました。ただし、デフォルトで読み込んでくれているのかどうかは未検証です。毎回、このファイルを指定して読み込ませ、要約したものを見せてもらっています。
.copilot-codeGeneration-instructions.md: コード生成用のカスタム指示ファイル
ここに適用したいコーディング規約やセキュリティ事項などを書き込むとよいと思います。ここら辺は copilot-instrucions に書くべきなのか、よくわかっていません。適用できるならお好きな方でいいと思います。
.copilot-commit-message-instructions.md: コミットメッセージ生成用のカスタム指示ファイル
私は Conventional Commits 形式を採用しました。詳しくはファイルを見てください。
.copilot-pull-request-description-instructions.md: プルリクエストの説明文生成用のカスタム指示ファイル
.copilot-review-instructions.md": コードレビュー用のカスタム指示ファイル
.copilot-test-instructions.md: テストコード生成用のカスタム指示ファイル
これらを適用するために.vscode/settings.jsonに以下のように記載します。
"github.copilot.chat.codeGeneration.instructions": [
  {
    "file": ".copilot-codeGeneration-instructions.md"
  }
],
"github.copilot.chat.testGeneration.instructions": [
  {
    "file": ".copilot-test-instructions.md"
  }
],
"github.copilot.chat.reviewSelection.instructions": [
  {
    "file": ".copilot-review-instructions.md"
  }
],
"github.copilot.chat.commitMessageGeneration.instructions": [
  {
    "file": ".copilot-commit-message-instructions.md"
  }
],
"github.copilot.chat.pullRequestDescriptionGeneration.instructions": [
  {
    "file": ".copilot-pull-request-description-instructions.md"
  }
]

 prompts/github copilot が、1 タスクの詳細を書いたファイルです。プロンプトファイルは、具体的な実装を書いたファイルです。

プロンプトファイルのフォーマットは以下の通りです。
`.github/prompts/[YYYYMMDD]-[タスク id]-[タスク名]-[タスクの種類].prompt.md`

例: 20250401-123-loginFeature-feat.prompt.md

feat: 機能開発（新しい機能の追加）
fix: バグ修正
test: テスト関連
doc: ドキュメント関連
refactor: リファクタリング
style: スタイル調整
私が todo アプリを作成してもらうときに作成してもらった「タスクモデルの設計と Prisma スキーマ作成」のプロンプトファイルは以下の通りです。。
20250420-001-taskModel-feat.prompt.md
# タスクモデルの設計と Prisma スキーマ作成

## 要件

- タスクモデルを設計し、Prisma スキーマを作成する。
- タスクモデルには以下のフィールドを含む:
  - id: string (UUID)
  - title: string
  - completed: boolean
  - createdAt: Date

## 実装手順

1. Prisma スキーマファイル (`prisma/schema.prisma`) を編集。
2. タスクモデルを追加。
3. Prisma CLI を使用してマイグレーションを実行。

## 完了後の処理

- `task-list.prompt.md` の該当タスクを完了にマーク。
- `memory.md` に進捗を記録。

 completes/github copilot が、実装が終わったプロンプトファイルを入れる場所です。基本的なフォーマットはprompts/と同じなため割愛します。

 design/どうやら設計書を書くフォルダらしいです。私が今までに経験してきたプロジェクトではこのようなフォルダを作ったことがなかったのですが、AI に指示だしするには有効だと思ったので、これからは適用していこうと思います。フォーマットに関してはまったくわからないので、必要ならここも AI と要件定義を済ませた後に、ここにまとめて記載するのがよいかと思います。
要件定義をせずに todo アプリの作成を依頼した際に、copilot が作成してくれたものを一応、以下に書いておきます。参考程度に。
design/todo-app-design.md
アプリの目的: シンプルなタスク管理アプリ。
必要な機能: タスクの追加、編集、削除、完了状態の切り替え。
UI デザイン: モバイルファースト、レスポンシブ対応。
データ構造: タスクの ID、タイトル、完了状態、作成日。
使用技術: Next.js, TypeScript, Tailwind CSS, Prisma, SQLite。

 最後に todo アプリを作ってもらうとしたら、、、作成をお願いしたとしたらどう進めるかを、規約を適用しながら進めてもらう時の手順の説明をお願いしました。

すでに上記で記載した、設計書の作成、タスクリストファイルの作成、プロンプトファイルの作成が完了した後の手順になります。
4. 実装
   プロンプトファイルに従い、1 タスクずつ実装。
   実装後、以下を実施:
   ユニットテスト、結合テスト、E2E テストを作成・実行。
   技術的負債がないか確認し、必要に応じてリファクタリング。
5. UI デザイン
   shadcn/ui を使用して UI コンポーネントを作成。
   Tailwind CSS を用いてレスポンシブデザインを実現。
   アクセシビリティ、ダークモード対応を考慮。
6. ドキュメント作成
   README.md に以下を記載:
   アプリの概要。
   セットアップ手順。
   使用技術スタック。
   実装した機能一覧。
7. デプロイ
   Vercel を使用してアプリをデプロイ。
8. コードレビューと改善
   ソースコードをレビューし、技術的負債を解消。
   必要に応じてリファクタリングを実施。
   この手順を繰り返し、todo アプリを完成させます。---

9. 実装
   プロンプトファイルに従い、1 タスクずつ実装。
   実装後、以下を実施:
   ユニットテスト、結合テスト、E2E テストを作成・実行。
   技術的負債がないか確認し、必要に応じてリファクタリング。
10. UI デザイン
    shadcn/ui を使用して UI コンポーネントを作成。
    Tailwind CSS を用いてレスポンシブデザインを実現。
    アクセシビリティ、ダークモード対応を考慮。
11. ドキュメント作成
    README.md に以下を記載:
    アプリの概要。
    セットアップ手順。
    使用技術スタック。
    実装した機能一覧。
12. デプロイ
    Vercel を使用してアプリをデプロイ。
13. コードレビューと改善
    ソースコードをレビューし、技術的負債を解消。
    必要に応じてリファクタリングを実施。
    この手順を繰り返し、todo アプリを完成させます。

 終わりに以上で私がいろいろなサイトを調べながら、雑ではありますが作成した、「Rules for AI in VSCode」になります。

参考になりましたらうれしいです。また、これらの情報は間違えている可能性が高いので、ほかの情報としっかり精査しながら、私もさらに開発を続けていく中で慣れていきたいと思います。
VSCodeとGithub Copilotを連携してRules for AIを作成した

動機

vscode で実装してみたい

フォルダ構造

それぞれのファイルについて

`copilot-instructions.md`

`memory.md`

`task-list.prompt.md`

その他の指示出しファイル

prompts/

completes/

design/

最後に todo アプリを作ってもらうとしたら、、、

終わりに

Discussion
