Firebase Studioでのバイブコーディング

• ユーザ間でデータを共有するアプリの構築に向いているかなと思っていろいろ試しています。うまくいくこともありますが、エラーが続いて、それほど簡単ではないこともあります。

• Firebase Studioは、まだpreviewなので、今後いろいろ変わるはず。

2025/11/16

使い方

1. Firebase Studioをクリック

2. Googleアカウントでログイン

3. 初めての場合は、利用規約への同意画面が表示されるので、同意にチェックして、（その他の項目のチェックはお知らせが不要であったり、興味がなければチェックは外して、）「Confirm（確認する）」ボタンを押す

4. アプリ構築のしかたは、いくつかありますが、ひとつは以下の方法

5. 「Prototype an app with AI（AIを使ったアプリのプロトタイプをつくる）」の入力窓に、作りたいものを言葉で入力する（日本語で大丈夫）

6. 必要なら、「improve prompt（プロンプトの改善）」をクリックしてプロンプトを改良する（このステップは省略可能；複数回改善することもできるはず）

7. 「Prototype with AI→（AIを使ったプロトタイプをつくる→）」をクリック

8. プロトタイプの特徴やスタイル・ガイドラインが表示される（2025年11月時点では、英語で作成されるようです）

9. 必要なら、右上部の「Customize（カスタマイズ）」ボタンを押して、特徴やスタイル・ガイドラインを追加・削除・修正（このステップは省略可能）

10. 右下部の「Prototype this App（このアプリのプロトタイプをつくる）」ボタンを押す

11. AIが頑張ってコーディングしてくれるのでしばらく待つ

12. コーディング完了すると、画面の左側にアプリのプレビュー画面が表示されるので、適宜操作して動作確認

13. エラーが出た場合は、画面左下隅に赤地で「1 issue（1件の問題）」などと表示されるので、それをクリックすると、エラーの内容が表示されるとともに、右側のチャット枠のすぐ上に赤地で「I've detected an error. Want me to help fix it?（エラーを検出しました。修正をお手伝いしましょうか？）」というメッセージが英語で出る。メッセージ中の「Fix Error（エラーの修正）」ボタンを押すと修正してくれる（繰り返しエラーが出ることもある；エラーが繰り返し出てもエラーの内容がそのつど変わる場合はそのまま続けていけばよいが、同じエラーが多数回続く場合は、あきらめて一から作り直した方が多分よい）

14. 思っていた仕様と違うとき（例：アプリの画面が英語表示の時は、日本語化するように頼むとよい）や、改良したいときは、右下の入力窓にその依頼を言葉（日本語OK）で入力し、右端の送信ボタン（紙飛行機アイコン）を押す

15. 完成したら、プレビュー画面（左側の画面）の右上部の鎖アイコン（プレビューリンクの共有）を押す

16. 表示された画面の最上部の「Make Previw Public（プレビューを公開する）」をクリック（再度押すと非公開に戻せる）

17. 表示された場面の上から2番目の部分「Copy Preview URL（プレビューURLをコピー）」をクリックして共有リンクをコピー（または、表示されたQRコードをスマホで読み取る）

18. コピーしたリンクまたはQRコードを共有する