プロンプトの基本｜AIへの指示の出し方

バイブコーディングの成否はプロンプトで決まります。AIに正しく伝える技術を身につけましょう。

プロンプトとは

AIに対する「指示」のこと。日本語で書けます。

例：
「ToDoアプリを作って」
「このエラーを修正して」
「ログイン機能を追加して」

良いプロンプトの3原則

1. 具体的に書く

❌ 悪い例: 「アプリを作って」
✅ 良い例: 「タスクの追加、完了、削除ができるToDoアプリを作って」

2. 技術を指定する

❌ 悪い例: 「ログイン機能を追加して」
✅ 良い例: 「Supabase Authを使ってメール/パスワードのログイン機能を追加して」

3. 期待する結果を伝える

❌ 悪い例: 「ボタンを修正して」
✅ 良い例: 「ボタンをクリックしたらモーダルが開くようにして」

プロンプトの基本構造

[何を] + [どのように] + [追加条件]

例:
「ユーザー登録フォームを」+「React Hook Formで」+「バリデーション付きで作って」

シーン別プロンプト例

新規作成

「Next.js + TypeScriptでToDoアプリを作って。
Tailwind CSSでスタイリング。
タスクの追加、完了、削除ができるように。」

機能追加

「このアプリにダークモードを追加して。
- トグルボタンを右上に配置
- システム設定に従う初期値
- ローカルストレージで設定を保存」

バグ修正

「以下のエラーを修正して：

TypeError: Cannot read property 'map' of undefined
at ProductList.tsx:42

期待する動作: 商品一覧が表示される
実際の動作: 白い画面でエラー」

リファクタリング

「このコンポーネントをリファクタリングして：
- TypeScriptの型を追加
- 関数を分割
- エラーハンドリングを追加」

よくある失敗と対策

失敗1: 曖昧すぎる

❌ 「かっこよくして」
✅ 「背景をダークグレー、ボタンにグラデーションを追加して」

失敗2: 一度に多くを頼む

❌ 「認証、決済、管理画面を作って」
✅ 「まず認証機能を作って」→「次に決済機能を追加して」

失敗3: コンテキストがない

❌ 「このバグを直して」
✅ 「ログインボタンを押しても画面が変わらない。
    コンソールには 'auth failed' と出ている」

プロンプトの改善サイクル

1. プロンプトを書く
2. 結果を確認
3. 期待と違えば追加指示
4. 繰り返し改善

上級テクニック

コンテキストを与える

「このプロジェクトはECサイトです。
ユーザーは商品を閲覧し、カートに入れ、購入できます。
今、決済機能を実装しています。
Stripeを使った決済フローを作ってください。」

参照を活用（Cursor）

@components/Button.tsx このボタンと同じスタイルで、
Cardコンポーネントを作って

段階的に構築

ステップ1: 「まずUIを作って」
ステップ2: 「APIと接続して」
ステップ3: 「エラーハンドリングを追加して」
ステップ4: 「ローディング状態を追加して」

まとめ

ポイント	説明
具体的に	「何を」「どのように」を明確に
技術指定	使用する技術を伝える
段階的に	一度に多くを頼まない
繰り返し	結果を見て追加指示

次のステップ

• コピペで使えるプロンプトテンプレート集
• 30分で最初のアプリを作る方法