バイブコーディングで直面するトラブルに対する傾向と対策
前回は、AIを相棒にして10時間でアプリを形にするためのステップと、必須のコマンド集をお伝えしました。
しかし、現実は甘くありません。 「AIが書いたコードでなんとなく動く状態」から「人様に触ってもらえるサービス」にするまでには、さらに数倍の熱量と「ハマりポイント」が待っていました。
今回は、開発中盤で私が実際に直面した泥臭いトラブルと、それに対する対応方法。そして、AI開発効率化の極意をお話しします。
1. 牙を剥くインフラ：Firebaseの「見えない」エラー
今回、バックエンドにはFirebaseを採用しましたが、ここで最初の大きな壁にぶつかりました。
- エラーの正体がわからない： 画面には「Error」と出るのに、ログを見ても原因が特定できない。
- 原因： Firebaseの権限（Rules）設定不足と、データベースのインデックス未作成でした。
正直、非エンジニアにとってFirebaseのコンソール画面は「情報の密林」です。どのボタンを押せば解決するのかさっぱりわかりません。
【突破術：AIをナビゲーターにする】 私は「エラーログ」と「コンソール画面のスクリーンショット」をそのままAIに投げ、**「このエラーはどうすればいい？ IT初心者でもわかるように教えて」**と泣きつきました。AIに非エンジニアでも理解できるように案内してもらう。これがプロがいな環境でのバイブコーディング流・突破術です。
2. コード肥大化の罠：ファイル整合性の崩壊
開発が進み、機能が増えてくると、npx repomixで出力されるファイルが巨大になり、AIの読み込み限界（コンテキストウィンドウ）を脅かし始めます。
そうなると、コードを「一部だけ」切り取ってAIに渡すことになりますが、ここで悲劇が起きます。 「Aのファイルを直したら、Bのファイルとの整合性が取れなくなって動かなくなった」というキメラ化現象です。
【秘技】AIによる「逆指名リクエスト」
ファイルが大きくなりすぎた時、私は以下の手順で乗り切りました。
- まず、
npx repomix --no-filesで、プロジェクトの全構造（ファイル名一覧）だけをAIに渡す。 - AIに「この機能を追加したいんだけど、関連するファイルはどれ？ 修正に必要なファイルだけを教えて」と聞く。
- AIが指名したファイルだけを
npx repomix --include "src/components/A.tsx,src/hooks/B.ts"のように抽出して渡す。
AIに**「必要な武器を自分で選ばせる」**。このワンステップを入れるだけで、整合性のトラブルは激減します。
3. AIの利用枠が……ない！？
実は今回の開発中、最大のピンチがありました。
本当なら Claude Code のような最新ツールで爆速進められたはずなのですが、実は並行して作っていた**別アプリ『GAIDE』**の開発にトークンを使いすぎて、契約しているAIの利用枠をすべて使い切ってしまったのです（笑）。
結局、手動でrepomixを叩き、ブラウザのチャット欄にコピペする原始的なスタイルで乗り切ることに。しかし、そのおかげで**「便利なツールに頼りすぎず、基礎的なコマンドとrepomixさえあれば、知恵次第でアプリは完成できる」**という自信がつきました。
4. サービス名「Climvy（クライビー）」に込めた想い
サービスを公開する上で、名前は魂です。
- 由来： Climate（気候・状況） + Ivy（ツタ）
- モチーフ： 険しい岩場を登っていく「ヒツジ（登山家）」
Webサイト運営は、まるで天候の変わりやすい山登りです。データという「気候」を読み解き、ツタのように一歩ずつ成果を伸ばしていく。そんな想いを込めて、AIと一緒に100個以上の案から絞り込みました。ロゴもAIとプロンプトを練り上げ、この世界観を形にしました。
5. 「空気を読む」を期待してはいけない
人間なら「新しい画面を作ったから、古い方は消しておいてね」と言わなくてもわかります。しかし、AIは違います。指示しない限り、新旧のコードが共存するカオスな状態を作り上げます。
「AIは、言われたことしかやらない。でも、言われたことはちゃんとやる」 この特性を理解し、「新しい機能を作ったから、不要になったあっちのコードは削除して」と、掃除の指示までセットでする。これがバイブコーダーとしてのマナーです。
次回予告
80%の完成度から、いよいよ世界へ公開。 次回は、**「非エンジニアがAI時代のモノづくりで生き残るための生存戦略」**をまとめます。
お楽しみに！
Seaside Lab
AIとWebで、もっと便利に
