バイブコーディングワークフロー

バイブコーディングには、**効率的な開発の「型」**があります。

このワークフローをマスターすれば、AIとスムーズに開発できます。

全体の流れ

1. 計画フェーズ: 何を作るか決める
2. 環境構築: プロジェクトをセットアップ
3. 実装フェーズ: 機能を1つずつ作る
4. テストフェーズ: 動作確認・修正
5. デプロイ: 本番公開
6. 改善: フィードバックを受けて改善

フェーズ1: 計画

やること

1. 作りたいものを明確にする
2. 必要な機能をリストアップ
3. 技術スタックを決める
4. MVPの範囲を決める

AIへの相談例

以下のサービスを個人開発したいです。
技術スタックと必要な機能を提案してください。

【サービス概要】
会議の録音から自動で議事録を作成するWebアプリ

【ターゲット】
週に3回以上会議がある会社員

【予算】
できるだけ無料で

アウトプット

プロジェクト定義書（シンプルに）

サービス名: MeetingAI
概要: 録音から議事録を自動生成

技術スタック:
- Next.js + TypeScript
- Supabase（認証・DB）
- Vercel（ホスティング）
- OpenAI Whisper API（文字起こし）

MVP機能:
1. ファイルアップロード
2. 自動文字起こし
3. 要約生成

フェーズ2: 環境構築

やること

1. プロジェクト作成
2. 必要なパッケージのインストール
3. 環境変数の設定
4. 基本的なファイル構成

AIへの指示

Next.js + TypeScript + Tailwind CSSのプロジェクトを
作成してください。

以下のパッケージもインストールして:
- @supabase/supabase-js
- lucide-react

フォルダ構成も整えて。

チェックポイント

- [ ] npm run dev で起動するか
- [ ] ブラウザで http://localhost:3000 が開くか
- [ ] エラーが出ていないか

フェーズ3: 実装

鉄則: 1回1機能

❌ 悪い例: 「認証と決済とダッシュボードを作って」
✅ 良い例: 「まずログイン機能を作って」

実装の流れ

1. 機能の説明をAIに伝える
2. 生成されたコードを確認
3. 動作確認
4. 問題があれば修正依頼
5. 動いたら次の機能へ

AIへの指示テンプレート

【機能名】
ログインフォーム

【詳細】
- メールアドレス + パスワードでログイン
- Supabase Authを使用
- ログイン後は/dashboardにリダイレクト

【技術的な要件】
- React Hook Formでフォーム管理
- バリデーションあり
- ローディング状態を表示

【参照ファイル】
@lib/supabase.ts

進め方の例

Day 1:
- 環境構築
- ログイン/サインアップ

Day 2:
- ファイルアップロード
- 文字起こしAPI連携

Day 3:
- 要約生成
- 結果表示

Day 4:
- UI調整
- バグ修正

Day 5:
- デプロイ
- 微調整

フェーズ4: テスト

基本テスト

各機能を実装したら必ず確認:

1. 正常系: 想定通りの操作で動くか
2. 異常系: エラー時に適切な表示が出るか
3. エッジケース: 極端な入力でも壊れないか

AIでデバッグ

【エラー内容をコピペ】

以下のエラーが出ています。修正してください。

Error: Cannot read property 'map' of undefined
at Dashboard.tsx:25

【関連ファイル】
@components/Dashboard.tsx

よくあるエラーと対処

「モジュールが見つからない」
→ パスを確認、インストールを確認

「Hydrationエラー」
→ サーバーとクライアントの不一致、日付処理を確認

「APIエラー」
→ 環境変数、認証を確認

フェーズ5: デプロイ

Vercelへのデプロイ

1. GitHubにプッシュ
2. Vercelでインポート
3. 環境変数を設定
4. デプロイ実行

AIへの指示

Vercelにデプロイするための準備をしてください。

- 環境変数が.env.exampleに記載されているか確認
- ビルドエラーがないか npm run build で確認
- 不要なconsole.logを削除

デプロイ後の確認

- [ ] 本番URLでアクセスできるか
- [ ] 全機能が動くか
- [ ] スマホで見れるか
- [ ] 読み込み速度は許容範囲か

フェーズ6: 改善

フィードバック収集

- SNSで告知して反応を見る
- 友人に使ってもらってフィードバックを得る
- Google Analyticsでユーザー行動を分析

改善サイクル

1. フィードバックを収集
2. 優先順位をつける
3. 1機能ずつ改善
4. デプロイ
5. 繰り返し

ワークフローのコツ

1. 小さく始める

機能を詰め込まず、最小限でリリース
→ フィードバックを得て改善

2. 動く状態を維持

大きな変更の前にコミット
→ 壊れても戻れる

3. ドキュメントを残す

AIへの指示で使った良いプロンプトを保存
→ 次のプロジェクトで再利用

4. 定期的に整理

実装が進んだら:
- 不要なコードを削除
- コンポーネントを整理
- 命名を統一

チェックリスト

実装前

- [ ] 作るものが明確か
- [ ] 技術スタックを決めたか
- [ ] MVPの範囲を絞ったか

実装中

- [ ] 1機能ずつ進めているか
- [ ] 動作確認してから次に進んでいるか
- [ ] エラーを放置していないか

デプロイ前

- [ ] 全機能が動くか
- [ ] エラーが出ていないか
- [ ] 環境変数を設定したか

まとめ

バイブコーディングワークフローのポイント：

1. 計画→実装→テスト→デプロイの流れを守る
2. 1回1機能で進める
3. 動く状態を常に維持
4. フィードバックを得て改善

次のステップ

• バイブコーディングとは
• 失敗パターンを学ぶ
• プロンプト集を見る