反復開発のコツ

「一気に作らない」哲学

バイブコーディングの最大の失敗パターンは、AIに「全部作って」と丸投げすることです。

大きな変更を一度に依頼すると:

• どこで問題が起きたか特定できない
• ロールバックが困難になる
• AIが部分的に正しいコードを生成して全体が壊れる

理想的な開発サイクル

計画（5分）
  ↓
最小の変更を実装（10〜15分）
  ↓
ビルド確認
  ↓
動作確認
  ↓
コミット
  ↓
次の変更へ

このサイクルを繰り返すことで、常に「動く状態」を保ちながら機能を積み上げられます。

コミットの粒度

バイブコーディングでは小さなコミットが重要です。

粒度	例
✅ 適切	feat: ヘッダーコンポーネントを追加
✅ 適切	fix: モバイルでナビが崩れる問題を修正
❌ 大きすぎ	feat: サイト全体を実装

AIに「各ステップが完了したらコミットしてください」と指示すると、自動的に細かいコミットが作られます。

AIとの対話リズム

効果的な対話のリズム:

1. 指示する — 1つの機能・修正を依頼
2. 確認する — ビルドが通るか、動作するか
3. フィードバックする — 「OKです、次は〇〇をお願いします」 or 「〇〇が期待と違います」
4. 繰り返す

AIへの明確なフィードバックが重要です:

• ✅ 「ナビゲーションのホバー色が期待通りです」
• ✅ 「モバイルでボタンが重なっています。スクリーンショットを確認してください」
• ❌ 「なんか違う」

実践的なチェックリスト

各コミット前に確認:

• pnpm build が通る（ビルドエラーなし）
• TypeScript のエラーが 0
• 変更した機能が意図通り動く
• 既存機能が壊れていない

「詰まったとき」の対処法

AIが同じ間違いを繰り返す場合:

1. 会話をリセットして新しいコンテキストで依頼する
2. 問題を小さく分解して一つずつ確認する
3. 「〇〇は正しいですか？」と確認を求める

→ ステップ6: AIとデバッグ