プロンプトの基本
AIに意図を正確に伝える技術
プロンプトとは
プロンプトとは、AIに対する「指示文」のことです。 バイブコーディングでは、このプロンプトの質が成果物の質を大きく左右します。
バイブコーディングの本質: コードを書くスキル → プロンプトを書くスキル
良いプロンプトの構成要素
1 コンテキスト（背景情報）
プロジェクトの技術スタック、既存のコード構造、制約条件など
"このプロジェクトはSvelteKit + TypeScript + Tailwind CSSです。"
2 タスク（何をしてほしいか）
具体的なアクション、作成してほしいもの
"ユーザー登録フォームを作成して。"
3 要件（詳細な仕様）
機能の詳細、含めるべき項目、動作条件など
"入力項目: 名前、メール、パスワード。
バリデーション: メール形式チェック、パスワード8文字以上。"
4 出力形式（どう返してほしいか）
ファイル名、形式、スタイルなど
"src/routes/register/+page.svelteに作成して。"
良い例・悪い例
❌ 悪いプロンプト
"認証機能を作って"
- • 何の認証？（JWT? セッション? OAuth?）
- • どのファイルに？
- • どんな機能？（ログイン? 登録? 両方?）
✓ 良いプロンプト
"JWTを使った認証APIを作成して。
- POST /api/auth/login: メール+パスワードでログイン
- POST /api/auth/register: 新規登録
- GET /api/auth/me: 現在のユーザー情報
src/routes/api/auth/に作成。Prismaでユーザー管理。"
- • 認証方式が明確
- • エンドポイントが具体的
- • ファイル配置が指定されている
プロンプトテンプレート
# コンテキスト このプロジェクトは [技術スタック] を使用しています。 現在の構造: [関連ファイルや既存の実装] # タスク [具体的にやってほしいこと] # 要件 - [要件1] - [要件2] - [要件3] # 制約 - [守ってほしいルール] - [使わないでほしい技術など] # 出力 [ファイル名/形式の指定]
段階的に詳細化する
一度に完璧なプロンプトを書く必要はありません。会話を重ねて詳細化していくのが効果的です。
1
"ブログ機能を追加したい"
→ AIが質問: "どんな機能が必要ですか？"
2
"記事の作成、編集、削除。マークダウン対応で"
→ AIが実装開始、途中で確認
3
"カテゴリ分けも追加して。あと下書き保存機能も"
→ 追加の要件を反映