AIとペアプロ開発記：Firebase Studioと挑んだFirestoreの壁
title: "AIとペアプロ開発記：Firebase Studioと挑んだFirestoreの壁"
emoji: "🤖"
type: "tech"
topics: ["firebase", "nextjs", "genkit", "aipairprogramming", "firebasestudio"]
published: false
はじめに
この記事は、Googleの新しい開発環境 Firebase Studio を使って、AI搭載のレシピ提案アプリ「MealMaestro」を開発した際の、とある「壁」との格闘の記録です。
僕が開発したのは、手持ちの食材を伝えるだけでAIがオリジナルのレシピを考えてくれる、というシンプルなアプリ。主役は、コーディングパートナーであるFirebase StudioのAI。僕はほとんど日本語で「こんな機能が欲しい」と伝えるだけ。すると、AIがNext.js、TypeScript、ShadCN、Genkitを使ったモダンなコードをどんどん書き上げてくれます。
開発は驚くほど順調に進み、「これならすぐ公開できるぞ！」と意気込んでいました。しかし、最後の最後で、ある致命的な問題にぶつかったのです。
ぶつかった壁：「共有URL」が機能しない！
MealMaestroには、AIが作ったレシピを他の人に共有できる機能があります。ユニークなURL（例: https://.../recipes/xxxx）が生成され、誰でもそのレシピを見られる、という想定でした。
しかし、実際にそのURLにアクセスしてみると、表示されるのは無情にも「レシピが見つかりません」の文字。
ここから、僕とAIパートナーとの長いデバッグ作業が始まりました。
AIの最初の診断:
「これはNext.jsのキャッシュか、サーバーサイドでのレンダリングに問題がありそうです。ページを動的にレンダリングするよう修正しましょう！」
→ 修正を試みるも、結果は変わらず。
AIの次の診断:
「すみません、Firestoreのセキュリティルールが原因でした！ログインユーザーしかレシピを読めない設定になっていました。誰でも読めるように修正します！」
→ 修正を試みるも、まだ見つからない...。
何度か修正を繰り返すも、問題は解決しません。AIも少し混乱している様子。コード上はレシピが生成され、画面にも表示されているのに、なぜか共有ページだけが存在しない。まるで幽霊のようなレシピです。
"レシピが作られていない気がする" - 問題の核心
ここで僕は、AIとの対話ログとFirestoreのコンソールをじっと見比べて、ふとある違和感に気づきました。
「もしかして、Firestoreにレシピのデータがそもそも保存されていないのでは？」
この直感をAIに伝えたところ、彼（彼女？）の診断は一気に核心へと向かいました。
AIの回答:
「おっしゃる通りです！お客様のご指摘は完全に正しく、鋭いご指摘でした。私の診断が浅く、遠回りさせてしまいました...。問題の本当の原因はサイレントエラーです。」
サイレントエラーの正体
問題の根本的な原因は、こうでした。
- AIがレシピを生成した後、そのデータをFirestoreに保存する処理がサーバー側で動いていた。
- しかし、Firestoreのセキュリティルールでは**「認証されたユーザー」**にしか書き込みを許可していなかった。
- サーバー側で動く処理は当然「未認証」なので、セキュリティルールに弾かれて書き込みは静かに失敗していた。
- しかし、このエラーを検知する仕組みがなかったため、プログラムは処理を「成功」として続行。僕の画面にはレシピが表示され、あたかも全てが上手くいっているように見えていた。
これが、レシピが幽霊のように存在しているように見えた原因でした。画面上にはいるけれど、データベースには存在しない。だから共有URLにアクセスしても「見つからない」のは当然だったのです。
解決策：クライアント側での安全な書き込み
原因が分かれば、解決はシンプルです。AIは即座にアーキテクチャの変更を提案してくれました。
旧アーキテクチャ:
サーバー → AIに依頼 → レシピ生成 → サーバーがDBに保存（ここで失敗！）
新アーキテクチャ:
サーバー → AIに依頼 → レシピ生成 → レシピをクライアントに返す → **クライアントが認証情報を使ってDBに保存**
この修正により、認証とデータベースへの書き込みが正しく連携し、レシピは確実に保存されるようになりました。そして、ついに共有URLも期待通りに機能し始めたのです！
学びとまとめ
この一連の出来事から、AIと共同で開発する上で非常に重要な学びがありました。
- 最終的なアーキテクチャの判断は人間が持つべき: AIはコードを書くのは得意ですが、認証やデータの流れといったアプリケーション全体の設計については、まだ人間の監督が必要です。
- AIへの「的確な質問」がデバッグを加速させる: 今回、「レシピが作られていない気がする」という僕の直感的なフィードバックがなければ、解決にはもっと時間がかかったかもしれません。AIの提案を鵜呑みにせず、対話を通じて一緒に考えるパートナーとして接することが重要です.
- Firebase StudioはUI開発だけじゃない: UIのプロトタイピングツールとして非常に強力ですが、今回のようにバックエンドのセキュリティやデータベース設計まで含めて、一気通貫で相談できる「フルスタック開発アシスタント」としての可能性を強く感じました。
AIとのペアプログラミングは、まだ発展途上の技術です。しかし、お互いの長所を活かし、短所を補い合う「良き相棒」になれるポテンシャルを秘めています。今回の失敗談が、これからAIと一緒にものづくりに挑戦する誰かの助けになれば幸いです。
最後まで読んでいただき、ありがとうございました。
Discussion