バイブコーディングしてみた

どうも、海外向けアニメ配信サービスを開発しているsazです

今回は、新規機能開発を全てバイブコーディングで実装してみたのでその時のお話をしようかなと思います。
ちなみに、cursor使いました

新規機能

今回実装するのは、アニメのエピソードへのコメント機能です
エピソードに対してコメントを書いたり、他のユーザのコメントを見たり...
運用の観点でいくと、コメントをレビューする機能も必要です

バイブコーディングの流れ

全体のざっくりとした流れはこんな感じ

• バックエンド
  • 要件定義
  • API設計
  • テーブル、モデル設計
  • 実装の流れの確認
  • タスク進捗チェックリスト作成
  • 実装
• フロントエンド
  • 要件定義
  • API情報の連携
    • こういうapiがあって、こういうレスポンス返ってくるよって教える
  • UI設計
  • コンポーネント設計
  • タスク進捗チェックリスト作成
  • 実装

今回重視したのはとにかく色々ドキュメントで整理・管理しておくこと
AIでコーディングしてると、作業が進むにつれて要件が一部漏れたり設計が破綻したりすることがちょいちょい発生します
ドキュメントで情報管理しておくことで、AIが必要な情報を逐一確認できるようにしてます

タスクもドキュメント化しておくことで、AIが一気にコーディングしようとするのを防ぎつつ、順序立てて実装させるのに効果的かなと
こっちも作業の流れとか把握しやすくて結構助かります

ドキュメントの管理

最終的なドキュメント管理は大体こんな感じになりました
プロダクトでバイブコーディングを実践したのは初めてだったので、ドキュメントのファイル名とかはAIに完全に任せてます
バックエンド

backend/
└── prompts/
    └── comment/
        ├── requirements.md        # 要件 / API設計 / 実装の流れ
        ├── tasks.md               # タスク管理
        ├── migration_note.md      # テーブル設計のあれこれ
        └── ui.md                  # 管理画面のワイヤーフレーム

frontend/
└── prompts/
    └── comment/
        ├── requirements.md        # 要件
        ├── ui.md                  # 画面設計
        ├── design.md              # コンポーネント設計とか
        └── task.md

※ドキュメントはgitignoreして邪魔にならないようにしてます

タスクはこんな感じ

ファイルの中身全部載っけるとすごい量になるので...
とりあえずフロントエンド側のタスクだけ紹介
こんな感じになりました

- [x] 1. 設計ドキュメント・要件ドキュメントの最終確認
- [x] 2. API仕様の再確認（パラメータ・レスポンス・認証）
- [x] 3. 既存画面（[id].vue）の該当箇所の構造把握
- [x] 4. コメント機能用の状態・型定義の追加
- [x] 5. コンポーネント大枠（雛形）の作成
- [x] 6. コメント取得API連携の実装
- [x] 7. 最新コメント1件の表示（Preview部）の実装
- [x] 8. コメント取得APIを呼び出し、Previewに反映する処理の実装
- [x] 9. コメント一覧展開・閉じるUI（アコーディオン動作）の実装
- [x] 10. コメント一覧表示（List部）の実装
- [x] 11. コメント投稿フォーム（Form部）の実装
- [x] 12. コメント投稿API連携・バリデーション・notify実装
- [x] 13. コメント削除ボタン・削除API連携・notify実装
- [x] 14. ローディング・エラー・空状態のUI実装
- [x] 15. UI文言・アイコンの最終調整
- [x] 16. コメント欄展開時の高さ調整（画面サイズや親要素のレイアウトに応じて、コメント欄の高さが最適化されるように調整。スマホ・PC両対応、既存UI/UX・他要素とのバランスを損なわないこと）
- [x] 17. コメント欄展開時のスクロール制御（コメント欄展開中はbody等のスクロールを無効化し、コメント欄内のみスクロール可能にする。閉じたら元に戻す。スマホ・PC両対応、既存UI/UXを損なわないこと）
- [x] 18. 動作確認（動作確認項目に基づく手動テスト）
- [x] 19. コード整理・リファクタリング
    - [x] 19-1. コンポーネント責務分離・単一責任原則の徹底（Container/List/Formの役割明確化）
    - [x] 19-2. props・emit・命名の明確化（不要なprops/emitやロジックの排除）
    - [x] 19-3. CSS/クラス設計の整理（Quasar/cinnamonカラーのクラス統一、カスタムCSSの最適化）
    - [x] 19-4. UI構造の重複排除（ラッパーや背景色・高さ指定の整理）
    - [x] 19-5. コメント・型定義・関数分割・可読性向上
    - [x] 19-6. 不要なconsole.logやデバッグコードの削除
- [x] 20. ドキュメント最終更新・タスク完了報告

フロント側は一つずつ動きを確認したいということもあって、結構細かくタスクブレイクしました
タスクのチェックはAIにつけてもらってます

実際にやってみて...

バイブコーディングでの実装めちゃくちゃ早いな...ってなりました

バックエンド

合計5つくらいのapiを作りましたが、テスト込み込みで1,2時間くらいで完成しました。（多分）
ドキュメントで事前にどうやって実装するつもりなのかの確認もある程度してたので、
AIが実装したあとはほとんど手戻りもない感じでした

フロントエンド

大まかなデザインは結構すんなりと実装してくれます
ただし、デザインの微調整をAIに任せるのは結構きつかったです
AIがというより、デザインの微妙な差異とかを明確に言語化するのが難しい

これから

今後はドキュメントのテンプレ化とかしてドキュメント自体の生成スピードを早めるのと質をあげることで、バイブコーディングの力をより発揮させるように工夫していこうかなと思います