レッスン 11: カスタム命令 — コーディング スタイルに従って AI を教える

GitHub Copilot を使用した Vibe コーディング: 基本から高度まで

パート 4: コパイロットのカスタマイズと拡張

xdev.asia

1. カスタム命令とは何ですか?

カスタム手順は、 静的ルール Copilot が自動的に適用するように作成したもの あらゆるやりとり プロジェクトで。プロンプトを表示するたびに規則を繰り返す必要はなく、一度記述すれば、Copilot はその規則に従います。

Không có instructions:
  Prompt: "Create a function to validate email"
  → AI dùng style riêng, có thể khác conventions của bạn

Có instructions:
  Prompt: "Create a function to validate email"
  → AI tự động tuân theo: TypeScript strict, Zod validation,
    custom error class, JSDoc comments, đặt tên theo camelCase

2. カスタム命令の種類

2.1.プロジェクトレベル: .github/copilot-instructions.md

申し込む プロジェクト全体、Git 経由でチーム全体と共有されます。

# Project Coding Guidelines

## Tech Stack
- Next.js 15 with App Router
- TypeScript 5.x (strict mode)
- Prisma ORM with PostgreSQL
- NextAuth v5 for authentication
- Zod for validation
- TailwindCSS for styling

## Code Style
- Use functional components with arrow functions
- Prefer `const` over `let`, never use `var`
- Use TypeScript strict mode, no `any` type
- Use named exports, not default exports
- Error handling with custom AppError class

## Naming Conventions
- Files: kebab-case (user-service.ts)
- Components: PascalCase (UserProfile.tsx)
- Functions/variables: camelCase
- Constants: UPPER_SNAKE_CASE
- Database tables: snake_case
- API routes: kebab-case (/api/user-profiles)

## Testing
- Use Vitest for unit tests
- Test files alongside source: `*.test.ts`
- Use describe/it blocks with clear descriptions
- Mock external dependencies, not internal modules

## API Conventions
- RESTful endpoints with proper HTTP methods
- Response format: { data, error, meta }
- Pagination: cursor-based with `nextCursor`
- Error responses: { error: { code, message, details } }

## Git
- Conventional commits: feat|fix|docs|refactor|test(scope): message
- Branch names: feature/xxx, fix/xxx, docs/xxx

2.2.ファイルタイプ固有: .instructions.md

申し込む 特定のファイルタイプ に基づいて 申し込む パターン:

<!-- .github/instructions/react-components.instructions.md -->
---
applyTo: "src/components/**/*.tsx"
---
# React Component Guidelines

- Use arrow function components
- Props interface named `{ComponentName}Props`
- Destructure props in function parameter
- Use `cn()` utility for conditional classNames
- Memoize with React.memo only when necessary
- Extract hooks logic to custom hooks in src/hooks/

<!-- .github/instructions/api-routes.instructions.md -->
---
applyTo: "src/app/api/**/*.ts"
---
# API Route Guidelines

- Always validate request body with Zod
- Use try-catch with AppError for error handling
- Return proper HTTP status codes
- Include rate limiting middleware
- Log all requests with structured logging

2.3.ユーザーレベルの指示

申し込む すべてのプロジェクト コンピューター上 (VS Code 設定):

{
  "github.copilot.chat.codeGeneration.instructions": [
    { "text": "Always use TypeScript, never plain JavaScript" },
    { "text": "Prefer functional programming patterns" },
    { "text": "Include error handling in every function" }
  ]
}

3. /init を使用して命令を自動的に作成します

最初から書くのではなく、実行してください。 /初期化 チャットビュー:

1. Copilot はコードベース全体をスキャンします
2. パターン、慣例、技術スタックを検出する
3. 作成 .github/copilot-instructions.md 現在のコードに基づいて
4. 見直して調整するのは

// Trong Chat view:
/init

// Copilot output:
"I've analyzed your codebase and created .github/copilot-instructions.md
with the following conventions detected:
- Next.js 15 App Router with TypeScript
- Prisma ORM patterns...
- Testing with Vitest...
Please review and adjust as needed."

4. 指示を効果的に構成する

✅ やるべきこと:

• 短くて具体的: 「検証に Zod を使用する」は、「適切に検証することを確認する」よりも優れています。
• 実用的なルール：AIがすぐにフォローできる
• 参照ファイル: "src/services/UserService.ts のパターンに従います"
• セクションごとに分ける: スタイル、テスト、API、Git

❌ してはいけないこと:

• 長すぎます: > 2000 ワードはコンテキスト ウィンドウを無駄にします
• 一般的すぎる: 「クリーンなコードを書く」 — AI はコンテキスト内で「クリーン」が何を意味するのかを知りません
• 矛盾している: 「クラスを使用する」+「関数型プログラミングを使用する」
• 時代遅れ: 命令が現在のコードと一致しません

5. チームへの指示

チームとして働くときはコミットする .github/copilot-instructions.md リポジトリに移動します。

project/
├── .github/
│   ├── copilot-instructions.md      ← Main instructions
│   ├── instructions/
│   │   ├── react.instructions.md    ← React-specific
│   │   ├── api.instructions.md      ← API-specific
│   │   └── testing.instructions.md  ← Testing-specific
│   ├── prompts/
│   │   ├── new-feature.prompt.md    ← Prompt templates
│   │   └── code-review.prompt.md
│   └── agents/
│       └── Reviewer.agent.md        ← Custom agents

メンバー全員が Copilot を使用すると、 全員が同じ指示を受ける → より一貫性のあるコード。

6. 練習問題

1. 走る /初期化 現在のプロジェクトで
2. 生成された指示ファイルを確認します。
3. 追加: 命名規則、エラー処理戦略、テスト手法
4. 作成する .instructions.md 特定のファイルタイプ (コンポーネントまたは API) 用
5. テスト: コード作成のプロンプト → AI が指示に従うかどうかを確認

7. まとめ

種類	ファイル	範囲
プロジェクトレベル	.github/copilot-instructions.md	プロジェクト全体、Git 経由で共有
ファイルの種類	.github/instructions/*.instructions.md	特定のファイル パターン (applyTo)
ユーザーレベル	VS コードの設定	デバイス上のすべてのプロジェクト

カスタム手順は次のとおりです 1回限りの投資 後続のすべてのプロンプトにより、より良い結果が得られます。次の曲はカバーになります カスタムエージェントとエージェントスキル — タスクごとに特化した AI を作成します。