レッスン 8: コードのプロンプトを書く技術 — 漠然としたものから正確なものまで

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

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

xdev.asia

1. Vibe コーディングにとってプロンプト エンジニアリングが重要なのはなぜですか?

バイブコーディングでは、 プロンプトはあなたのコードです。出力品質はプロンプト品質に直接依存します。適切なプロンプトは何時間もの反復作業を節約できますが、悪いプロンプトは完全に間違ったコードにつながります。

❌ Prompt tồi:  "Make a login page"
✅ Prompt tốt:  "Create a login page with email/password fields using React Hook Form,
                 Zod validation, error messages below each field, submit button
                 disabled until valid, loading spinner during API call,
                 redirect to /dashboard on success. Use our existing AuthContext
                 and api/auth endpoint. Follow the design system in styles/theme.ts"

2. 優れたコードプロンプトの構造

効果的なプロンプト コードには 5 つのコンポーネントがあります。

┌─────────────────────────────────────────────────┐
│           PROMPT STRUCTURE                       │
├─────────────────────────────────────────────────┤
│                                                  │
│  1. CONTEXT     → Bối cảnh (tech stack, codebase)│
│  2. TASK        → Yêu cầu cụ thể                │
│  3. CONSTRAINTS → Ràng buộc (patterns, limits)   │
│  4. EXAMPLES    → Ví dụ input/output mong muốn  │
│  5. OUTPUT FORMAT → Định dạng kết quả           │
│                                                  │
└─────────────────────────────────────────────────┘

応用例：

// CONTEXT
We have a Next.js 15 app with App Router, TypeScript, Prisma ORM,
and PostgreSQL. Authentication uses NextAuth v5 with JWT strategy.
// TASK
Create an API route handler for creating blog posts.
// CONSTRAINTS

Use Zod for request body validation
Return proper HTTP status codes (201 created, 400 validation error, 401 unauthorized)
Only authenticated users with "author" role can create posts
Slug should be auto-generated from title (URL-safe, Vietnamese diacritics removed)
Include created_at timestamp

// EXAMPLES
Request body:
{
"title": "Hướng dẫn Docker",
"content": "Nội dung bài viết...",
"tags": ["docker", "devops"]
}
Expected response (201):
{
"id": "clx...",
"title": "Hướng dẫn Docker",
"slug": "huong-dan-docker",
"content": "Nội dung bài viết...",
"tags": ["docker", "devops"],
"author_id": "user123",
"created_at": "2026-03-31T12:00:00Z"
}
// OUTPUT FORMAT
Create the file at src/app/api/posts/route.ts following our existing API patterns.

3. コードのプロンプトパターン

3.1.ゼロショット — ゼロ 例

// Đơn giản, nhanh. Phù hợp khi task rõ ràng:
Create a TypeScript utility function to deep merge two objects,
handling arrays by concatenation and nested objects recursively.

3.2.少数のショット — 例があります

// Cung cấp examples để AI hiểu pattern mong muốn:
Create a validation function following this pattern:
// Example 1:
validateEmail("[email protected]") → { valid: true }
validateEmail("invalid") → { valid: false, error: "Invalid email format" }
// Example 2:
validatePhone("+84912345678") → { valid: true }
validatePhone("abc") → { valid: false, error: "Invalid phone number" }
// Now create:
validateUsername(username) with rules:

3-20 characters
Only alphanumeric and underscore
Cannot start with number

3.3.思考の連鎖 — 段階的な推論

// Yêu cầu AI "think step by step":
Design a rate limiter middleware for Express.js.
Think step by step:
1. First, decide on the algorithm (token bucket vs sliding window)
2. Then, choose the storage (in-memory vs Redis)
3. Implement the middleware with configurable options
4. Add proper error responses and headers
5. Write unit tests for edge cases

3.4.ロールベース — AI のロールを設定します

// Cho AI một persona:
Act as a senior security engineer reviewing this authentication code.
Identify all security vulnerabilities and suggest fixes with code examples.
Focus on: injection attacks, token handling, password storage, rate limiting.

4. 反復的なプロンプト — 段階的な改善

効果的なバイブコーディングはその1つです 会話、単一のプロンプトではありません:

// Round 1: Tạo cơ bản
Create a search component for our blog with debounced input.

// Round 2: Cải thiện
Good, but add these improvements:
- Show loading skeleton while fetching
- Handle empty results with a friendly message
- Add keyboard navigation (arrow keys to select, Enter to open)

// Round 3: Edge cases
Now handle these edge cases:
- Search query less than 3 characters → show "Type at least 3 characters"
- API error → show retry button
- Very long results → add pagination with "Load more"

// Round 4: Polish
Finally, add proper ARIA attributes for accessibility
and transition animations for smooth UX.

5. よくある間違いとその修正方法

間違い	たとえば	修正
曖昧すぎる	「ダッシュボードを作る」	メトリクス、グラフ、データ ソース、レイアウトを指定する
長すぎます	1 つのプロンプトで 500 以上の単語	複数の反復に分割
文脈がありません	「認証を追加」	フレームワーク、戦略、既存のコードを指定する
矛盾している	「REST を使用しますが、リアルタイムで使用します」	明らか: リアルタイムのための REST + WebSocket
制約なし	「APIを作成する」	エラー処理、認証、検証を指定する
ベトナム語と英語	「妥当性をチェックする関数を作成する」	一貫性: 完全な英語または完全なベトナム語

6. プロンプトテンプレートが利用可能

テンプレート: 新機能

Create [FEATURE_NAME] for our [FRAMEWORK] app.
Context:

Tech stack: [STACK]
Current architecture: [PATTERN]
Related files: [FILE_PATHS]

Requirements:

[REQUIREMENT_1]
[REQUIREMENT_2]
[REQUIREMENT_3]

Constraints:

Follow [PATTERN_NAME] pattern
Use [LIBRARY] for [PURPOSE]
Handle errors with [STRATEGY]
Include [TEST_TYPE] tests

テンプレート: バグ修正

Fix this bug: [BUG_DESCRIPTION]
Error message: [ERROR_MESSAGE]
Steps to reproduce:

[STEP_1]
[STEP_2]

Expected behavior: [EXPECTED]
Actual behavior: [ACTUAL]
Relevant files: [FILE_PATHS]

テンプレート: リファクタリング

Refactor [CODE_DESCRIPTION] to improve [QUALITY_ATTRIBUTE].
Current issues:

[ISSUE_1]
[ISSUE_2]

Target state:

[DESIRED_STATE_1]
[DESIRED_STATE_2]

Constraints:

Don't change the public API
Maintain backward compatibility
Keep test coverage above [X]%

7. プロンプトでの英語対ベトナム語

AI モデル (GPT、Claude) は主に英語でトレーニングされるため、次のようになります。

• 英語でのプロンプト 多くの場合、コードにより良い結果が得られます
• 丁寧なベトナム語 OK: 説明、ドキュメント、コメント
• 混合 (ベトナム語 + コード用語英語) も Copilot とうまく連携します

// OK - Mixed language:
Tạo một middleware xử lý rate limiting cho Express.js,
sử dụng sliding window algorithm với Redis.

// Better - Full English cho complex code tasks:
Create a rate limiting middleware for Express.js using
sliding window algorithm with Redis backend.

8. まとめ

パターン	いつ使用するか
ゼロショット	タスクはシンプルかつ明確です
数ショット	特定のパターンに従って出力する必要がある
思考の連鎖	複雑なロジック、設計上の決定
役割ベースの	セキュリティレビュー、コードレビュー、特定の専門知識
反復的	すべてのタスク (常に使用する必要があります)

次の記事ではさらに深く掘り下げていきます コンテキスト管理 — AI がコードベースを理解できるように適切なコンテキストを提供する方法。