はじめに
前回は、AIバイブコーディングにおけるマインドセットについて解説しました。
今回は、そのマインドセットを具体的な行動に落とし込むための、プロンプトの「型（パターン）」を紹介します。
この「型」を身につけるだけで、AIとの対話が驚くほどスムーズになり、手戻りが激減します。
パターン1：キックオフ・プロンプト（文脈定義）
開発の最初に投げるプロンプトは、その後のすべての品質を決定づける最も重要なものです。
ここで「何を作りたいか」だけでなく、「どういう役割で」「どういう制約で」作るかを定義します。
以下のテンプレートを参考にしてください。
# 役割
あなたは世界最高峰のフロントエンドエンジニアです。
可読性が高く、保守しやすいコードを書くことに長けています。
# ゴール
個人用のシンプルな「Markdownエディタ」を作成したいです。
# 技術スタック
- Framework: Next.js (App Router)
- Styling: Tailwind CSS
- State Management: React Hooks (Context API if needed)
- Icons: Lucide React
# 制約条件・要件
- デザインは「Notion」のようなミニマルでクリーンなものを目指す
- データの永続化は今回は不要（オンメモリでOK）
- TypeScriptを使用し、型定義を厳密に行うこと
- ファイル構成はコロケーション（機能ごとにまとめる）を採用すること
ポイント：
- 役割（Persona）: AIに専門家としての振る舞いを強制します。
- 技術スタック: 明確に指定しないと、古いライブラリや学習データで頻出する（が、今回は使いたくない）技術を選ばれることがあります。
- 制約条件: 「やらないこと（永続化は不要など）」を明示することで、AIの迷いを断ち切ります。
パターン2：ステップ・バイ・ステップ実装
キックオフの直後に「じゃあ全部作って」と言ってはいけません。
AIは一度に大量のコードを出力すると、整合性が取れなくなったり、省略したりする傾向があります。
以下のように、工程を細かく切って指示を出します。
Step 1: プロジェクト構造の提案
まずは、この要件に基づいたディレクトリ構成と、主要なコンポーネントの設計案を提示してください。
コードはまだ書かなくていいです。
Step 2: 基盤部分の実装
設計案、良いですね。
では、まずはレイアウトファイル（layout.tsx）と、共通のヘッダーコンポーネントだけを実装してください。
Step 3: 機能の実装
次に、メインのエディタ部分（Editor.tsx）を実装します。
まずはテキストエリアに入力できるだけの、最小限の機能を実装してください。
ポイント：
- 「コードはまだ書かなくていい」: 最初に設計だけを出力させることで、認識のズレを早期に発見できます。
- 小さく作る: 1回のプロンプトで1つのコンポーネント、あるいは1つの機能に集中させます。
パターン3：エラーハンドリング・プロンプト
開発中にエラーが出たとき、単にエラーログを貼り付けるだけでは不十分な場合があります。
AIは「文脈」を忘れている可能性があるからです。
以下のエラーが発生しました。
# エラー内容
[エラーログを貼り付け]
# 発生した状況
`npm run dev` でサーバーを起動し、エディタ画面を開いた瞬間に発生しました。
# 試したこと
`node_modules` を削除して再インストールしましたが、改善しませんでした。
このエラーの原因と、修正案を提示してください。
修正案は、変更するファイル名と、変更前後の差分（diff）で示してください。
ポイント：
- 発生状況: 「いつ」「何をしたとき」に起きたかは、デバッグの重要な手がかりです。
- 試したこと: AIが無駄な提案（再インストールなど）をするのを防ぎます。
まとめ
- キックオフで「役割・技術・制約」をガチガチに固める
- ステップ・バイ・ステップで、設計→基盤→機能の順に小さく作る
- エラー報告にも「状況」と「試したこと」を含める
これらを意識するだけで、AIは「指示待ちの新人」から「頼れるシニアエンジニア」へと進化します。
次回は、開発が佳境に入ったときの「デバッグとリファクタリング」のテクニックについて解説します。