Firebase Studioの始め方｜登録からAIプロトタイプ作成・デプロイまで完全ガイド

本記事は一次情報（Firebase公式ドキュメント、Google Developers Blog、Firebase Blog）に基づき構成しています。Firebase Studioは現在プレビュー段階のため、機能や仕様は今後変更される可能性があります。

• Firebase Studioの準備とアクセス方法
• ワークスペース作成・既存リポジトリのインポート
• Gemini（AIエージェント）の活用ポイント
• Firebaseサービス（Auth／Firestore など）の統合
• プレビューとログ確認方法
• Firebase Hostingへのデプロイ手順
• 制限事項・注意点
• 概要編との連動（全体像の理解）

Firebase Studioの背景や特徴、Project IDXからの進化については前回の記事で解説しています。

→ Firebase Studioとは？AI時代の新しい開発環境を徹底解説

https://lexia-hp.com/blog/what-is-firebase-studio-overview

本記事では、その続編として「実際の操作方法（始め方）」に焦点を当てます。

✅ 動作環境

対応ブラウザ：Google Chrome（推奨）／Edge／Safari（最新版）

Googleアカウント必須

Firebaseプロジェクトを利用する場合は、Firebase Console権限も必要

Firebase StudioはブラウザベースのIDEであり、ローカル環境構築は不要です。

作成されたワークスペースはGoogleアカウントに紐づき、他の端末からもアクセス可能。Firebase Studioでは、最大3つまで無料ワークスペースを保持できます。

参考: Firebase Studio Pricing — https://firebase.google.com/docs/studio/pricing

• 1. https://firebase.google.com/studio にアクセス
• 2. 「Sign in with Google」でログイン
• 3. 左上の Create a new workspace をクリック
• 4. 任意のプロジェクト名を入力（例：my-first-firebase-app）
• 5. テンプレートを選択（例：Next.js、React、Vue、Angular、Flutter、Go、Python）
• 6. 「Create workspace」を押すと、数十秒でブラウザIDEが起動

特殊なネイティブ依存やビルド設定がある場合、dev.nix を編集して環境をカスタマイズ可能です。

参考: Import existing project — https://firebase.google.com/docs/studio/get-started-import

• 1. メニューから Import from GitHub を選択
• 2. リポジトリを選択 → Import
• 3. Studioが自動的に package.json や依存関係を解析し、環境を構築

テンプレートによってはすでにプレビュー設定（.idx/dev.nix）が組み込まれていますが、含まれていない場合は手動で有効化する必要があります。

テンプレート構成：Next.js／React／Vue／Flutterなど

一部テンプレートでは、プレビュー機能が事前設定されていない場合あり

参考: Preview your app — https://firebase.google.com/docs/studio/preview-apps

AIはプロジェクト内の文脈を参照し、コードを提案します。ただし、生成内容は常に検証が必要です。

参考: Gemini safety notice — https://firebase.google.com/docs/studio/ai-assistance

Geminiに「Add Firebase Authentication」などと指示すると、関連する設定ファイル（firebase.json など）、必要な依存パッケージの追加、雛形コードの生成を試みます。

ただし、すべてのケースで完全自動化されるわけではありません。Firebaseプロジェクトの紐付け、環境変数設定、セキュリティルールなどは手動確認が推奨されます。

上部の Preview ボタンで動作を確認できます。

Webアプリ → ブラウザ内プレビュー（Live reload対応）

Flutter（Android） → Androidプレビュー利用可能（β機能）

ログ／ターミナルタブで、ビルド／エラー／出力結果をリアルタイムに確認可能。

参考: Preview your app – Firebase Docs — https://firebase.google.com/docs/studio/preview-apps

StudioからHostingに直接デプロイ可能ですが、高度な設定（CI/CD・複数環境管理）はFirebase CLI併用が推奨されます。

• 1. 右上の Deploy をクリック
• 2. Firebaseプロジェクトを選択（初回のみ紐付け）
• 3. firebase.json が生成・更新され、デプロイ実行
• 4. 完了後、公開URL（例：https://your-app.web.app/）が表示

Firebase Studioは、環境構築不要 × AI統合 × Firebase連携を実現した次世代IDEです。ブラウザだけで設計 → 実装 → プレビュー → デプロイを完結でき、特に個人開発・プロトタイピングに最適です。

ただし、AI生成コードはレビュー必須、プレビュー版特有の不安定さにも注意が必要。今後は正式リリースに向け、Gemini連携やCLI統合の拡充が進む見込みです。

• Firebase Studioとは？AI時代の新しい開発環境を徹底解説
• https://lexia-hp.com/blog/what-is-firebase-studio-overview
• 公式ドキュメント：Get started with Firebase Studio
• https://firebase.google.com/docs/studio/get-started