バイブコーディング失敗パターン5選

バイブコーディングは便利ですが、やり方を間違えると時間を浪費します。

この記事では、よくある失敗パターンと対処法を紹介します。

失敗パターン1: プロンプトが曖昧すぎる

何が起きるか

❌ 悪い例: 「アプリを作って」

AIは何を作ればいいか分からず、見当違いのものを作ってしまいます。

対処法

✅ 良い例:
ToDoリストアプリを作ってください。

【機能】
- タスクの追加
- タスクの削除
- タスクの完了/未完了切り替え

【技術スタック】
- Next.js + TypeScript
- Tailwind CSS
- ローカルストレージで保存

ポイント:

• 何を作るか明確に
• 機能を箇条書きで
• 技術スタックを指定

---

失敗パターン2: 一度に全部作ろうとする

何が起きるか

❌ 悪い例:
「認証機能、決済機能、管理画面、ダッシュボード、
 ユーザー管理、通知機能を全部作って」

AIが混乱して、中途半端なコードが大量に生成されます。

対処法

✅ 良い例:
まず認証機能だけ作ってください。
- メールアドレス + パスワードでログイン
- Supabase Authを使用

ポイント:

• 1回の指示で1機能
• 動くまで次に進まない
• 小さく作って、少しずつ拡張

---

失敗パターン3: エラーを放置する

何が起きるか

AIが生成したコードにエラーがあっても、そのまま次の機能を追加しようとする。

結果、エラーが積み重なって、収拾がつかなくなります。

対処法

✅ エラーが出たら:
以下のエラーが出ました。修正してください。

Error: Cannot find module '@/components/Button'
at Object.<anonymous> (/src/app/page.tsx:3:1)

ポイント:

• エラーメッセージをそのままコピペ
• エラーを解決してから次に進む
• 「動く状態」を常に維持

---

失敗パターン4: コンテキストを伝えない

何が起きるか

❌ 悪い例: 「ボタンを追加して」

AIはどんなボタンを、どこに追加すればいいか分かりません。

対処法

✅ 良い例:
@src/app/page.tsx

このページに「ログイン」ボタンを追加してください。
- 右上に配置
- クリックで/loginに遷移
- 既存のスタイルに合わせて

ポイント:

• @ファイル名で参照を追加
• 場所を指定
• 動作を明確に

---

失敗パターン5: AIを信じすぎる

何が起きるか

AIが生成したコードをそのまま本番に使って、セキュリティホールやバグを作ってしまう。

よくある問題

• 認証のチェックが甘い
• 環境変数がハードコードされている
• エラーハンドリングがない
• SQLインジェクションの脆弱性

対処法

本番に出す前に確認すること:

1. 認証・認可

   • ログインしていないユーザーがアクセスできないか
   • 他人のデータが見えないか

2. 環境変数

   • APIキーがコードに直書きされていないか
   • .envファイルが.gitignoreに入っているか

3. バリデーション

   • ユーザー入力がチェックされているか
   • 想定外の入力でエラーにならないか

---

失敗を防ぐチェックリスト

プロンプトを書く前

• 何を作りたいか明確になっているか
• 1つの機能に絞っているか
• 技術スタックを決めているか

プロンプトを書くとき

• 機能要件を箇条書きにしたか
• 参照ファイルを@で指定したか
• 期待する動作を書いたか

コードを受け取ったあと

• エラーなく動くか確認したか
• セキュリティ上の問題はないか
• 既存の機能が壊れていないか

---

まとめ

バイブコーディングの失敗を防ぐポイント：

1. プロンプトは具体的に
2. 1回1機能
3. エラーは即修正
4. コンテキストを伝える
5. AIを盲信しない

次のステップ

• プロンプトの書き方を学ぶ
• バイブコーディングとは
• Cursor入門