レッスン 10: 高度なプロンプト パターン — スラッシュ コマンド、参加者、変数

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

パート 3: コードの迅速なエンジニアリング

xdev.asia

1. スラッシュコマンド

スラッシュコマンドは、 ショートカット 一般的なタスク用。種類 / チャットでリストを表示するには:

コマンド	機能	たとえば
/初期化	プロジェクトのカスタム指示を作成する	/初期化 (コードベースを分析し、copilot-instructions.md を作成します)
/修正	現在のコードまたはエラーを修正する	/fix TypeError: 未定義のプロパティ 'id' を読み取れません
/テスト	コードの単体テストを生成する	UserService クラスの /tests
/doc	ドキュメントの生成	このファイル内のエクスポートされたすべての関数の /doc
/説明する	コードの説明	/explain #selection
/クリア	チャット履歴をクリアする	/クリア

1.1. /init — プロジェクトの AI をセットアップする

最も重要なスラッシュコマンド!走る /初期化 プロジェクトで Copilot の使用を開始する場合:

// Trong Chat view, gõ:
/init

// Copilot phân tích codebase và tạo:
// .github/copilot-instructions.md với:
// - Project structure description
// - Tech stack
// - Coding conventions phát hiện từ codebase
// - Testing patterns
// - Naming conventions

1.2. /fix — クイックフィックス

// Copy error từ terminal hoặc Problems panel:
/fix npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from [email protected]

1.3. /tests — テストを自動的に生成します

// Mở file cần test, rồi:
/tests for all public methods, include edge cases and error scenarios.
Use Jest with describe/it blocks.

2. チャット参加者

チャット参加者（から始まる） @) は特定のドメインの「専門家」です。

参加者	専門知識	いつ使用するか
@ワークスペース	コードベース全体を理解する	プロジェクトの構造について質問し、関連するコードを見つける
@ターミナル	ターミナルコマンド	コマンドの説明、ターミナルエラーを修正
@vscode	VS コードの機能	設定、ショートカット、拡張機能について質問する

2.1. @workspace — コードベースのエキスパート

@workspace Where is the database connection configured in this project?
@workspace How is error handling done across API routes? Show me the pattern.
@workspace What testing framework and patterns are used? Show examples.

2.2. @terminal — ターミナルヘルパー

@terminal How to find all processes using port 3000 and kill them?
@terminal Explain this command: find . -name "*.ts" -exec grep -l "TODO" {} ;
@terminal The last command failed with permission denied. How to fix?

2.3. @vscode — IDE エキスパート

@vscode How to configure auto-format on save for TypeScript files?
@vscode What's the shortcut to split editor vertically?
@vscode How to create a launch.json for debugging Node.js?

3. パターンの組み合わせ — 本当の力

スラッシュ コマンド、参加者、およびコンテキスト変数を組み合わせて、強力なプロンプトを作成します。

パターン 1: 修正 + コンテキスト

/fix #terminalLastCommand
Look at #file:src/services/OrderService.ts and fix the failing test.
The error seems related to the mock setup.

パターン 2: テスト + ファイル参照

/tests for #file:src/utils/validation.ts
Follow the same pattern as #file:tests/utils/string.test.ts
Include these scenarios: empty input, null, unicode, SQL injection attempts

パターン 3: ワークスペースの検索 + 実装

@workspace Find all API endpoints that don't have rate limiting.
Then add rate limiting middleware to each one, using the same
configuration as #file:src/middleware/rateLimit.ts

4. 個人用プロンプト ライブラリを構築する

よく使用されるプロンプト テンプレートのコレクションを作成します。

4.1.プロンプト ファイルをプロジェクトに保存する

フォルダーの作成 .github/プロンプト/ ファイル付き .prompt.md:

<!-- .github/prompts/new-api-endpoint.prompt.md -->
---
description: Create a new REST API endpoint
---
Create a new API endpoint for {{resource_name}}.

Requirements:
- CRUD operations (GET list, GET by id, POST, PUT, DELETE)
- Zod validation for request bodies
- Prisma queries following our repository pattern
- Error handling with our AppError class
- Authentication middleware on all routes
- Pagination for list endpoint (cursor-based)

Follow patterns in:
- Route: src/routes/userRoutes.ts
- Service: src/services/UserService.ts
- Schema: src/schemas/userSchema.ts

4.2.プロンプトファイルを使用する

チャットで、プロンプト ファイルを参照します。

#file:.github/prompts/new-api-endpoint.prompt.md
resource_name = "products"

5. 高度なテクニック

5.1.否定的なプロンプト

Create a user registration form.
DO NOT:
- Use any CSS framework (no Tailwind, no Bootstrap)
- Add client-side validation (we handle it server-side)
- Include social login buttons
- Use any external dependencies

5.2.出力仕様

Generate a database migration for adding an "orders" table.
Output format:

Prisma schema addition (for schema.prisma)
SQL migration file (for manual review)
Seed data TypeScript file (5 sample records)

5.3.比較分析

I need a caching solution for our API responses.
Compare these approaches with code examples for each:
1. In-memory cache (node-cache)
2. Redis cache
3. HTTP cache headers
For each, show: setup code, cache hit/miss handling,
cache invalidation strategy. Recommend which to use
for our use case: 100 RPS, data changes every 5 minutes.

6. まとめ

ツール	プレフィックス	こんな方に最適
スラッシュコマンド	/	クイックアクション: 修正、テスト、ドキュメント、初期化
チャット参加者	@	専門分野: ワークスペース、ターミナル、vscode
コンテキスト変数	#	特定のコンテキストを添付: ファイル、選択、コードベース
プロンプトファイル	.prompt.md	定期的なタスク用の再利用可能なテンプレート

すべてを組み合わせると、1 つになります プロンプトツールキット 効果的なバイブコーディングを実現します。パート 4 からは、Copilot の機能をカスタマイズして拡張します。 カスタム命令、カスタム エージェント、および MCP サーバー。