Firebase Studioの始め方｜登録からAIプロトタイプ作成・デプロイまで完全ガイド
こんにちは、LEXIAの齋藤です。
本記事は一次情報（Firebase公式ドキュメント、Google Developers Blog、Firebase Blog）に基づき構成しています。Firebase Studioは現在プレビュー段階のため、機能や仕様は今後変更される可能性があります。
この記事でわかること
- Firebase Studioの準備とアクセス方法
- ワークスペース作成・既存リポジトリのインポート
- Gemini（AIエージェント）の活用ポイント
- Firebaseサービス（Auth／Firestore など）の統合
- プレビューとログ確認方法
- Firebase Hostingへのデプロイ手順
- 制限事項・注意点
- 概要編との連動（全体像の理解）
0. まずは全体像（前編：概要編）
Firebase Studioの背景や特徴、Project IDXからの進化については前回の記事で解説しています。
本記事では、その続編として「実際の操作方法（始め方）」に焦点を当てます。
1. 前提と準備
✅ 動作環境
対応ブラウザ：Google Chrome（推奨）／Edge／Safari（最新版）
Googleアカウント必須
Firebaseプロジェクトを利用する場合は、Firebase Console権限も必要
Firebase StudioはブラウザベースのIDEであり、ローカル環境構築は不要です。
2. Firebase Studioにアクセスしてワークスペースを作成
作成されたワークスペースは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が起動
3. 既存リポジトリをインポートする（任意）
GitHub／GitLab／Bitbucketから既存プロジェクトを取り込むことも可能です。
手順:
特殊なネイティブ依存やビルド設定がある場合、dev.nix を編集して環境をカスタマイズ可能です。
参考: Import existing project — https://firebase.google.com/docs/studio/get-started-import
- 1. メニューから Import from GitHub を選択
- 2. リポジトリを選択 → Import
- 3. Studioが自動的に package.json や依存関係を解析し、環境を構築
4. テンプレートと初期構成を確認
テンプレートによってはすでにプレビュー設定（.idx/dev.nix）が組み込まれていますが、含まれていない場合は手動で有効化する必要があります。
テンプレート構成：Next.js／React／Vue／Flutterなど
一部テンプレートでは、プレビュー機能が事前設定されていない場合あり
参考: Preview your app — https://firebase.google.com/docs/studio/preview-apps
5. Gemini（AIエージェント）を使う
Firebase Studio右上の「Gemini」アイコン、または下部のチャットバーから起動します。AIモデルには Gemini Pro が使用され、コード補完・提案・解説が可能です。
AIはプロジェクト内の文脈を参照し、コードを提案します。ただし、生成内容は常に検証が必要です。
参考: Gemini safety notice — https://firebase.google.com/docs/studio/ai-assistance
| 用途 | 指示例（英語推奨） |
|---|---|
| コード生成 | Create a login page using Firebase Auth |
| エラーハンドリング改善 | Improve error handling in this function |
| テスト作成 | Write a unit test for this component |
| コード解説 | Explain what this function does |
6. Firebaseサービスの統合（Auth／Firestoreなど）
Geminiに「Add Firebase Authentication」などと指示すると、関連する設定ファイル（firebase.json など）、必要な依存パッケージの追加、雛形コードの生成を試みます。
ただし、すべてのケースで完全自動化されるわけではありません。Firebaseプロジェクトの紐付け、環境変数設定、セキュリティルールなどは手動確認が推奨されます。
7. プレビューとログ確認
上部の Preview ボタンで動作を確認できます。
Webアプリ → ブラウザ内プレビュー（Live reload対応）
Flutter（Android） → Androidプレビュー利用可能（β機能）
ログ／ターミナルタブで、ビルド／エラー／出力結果をリアルタイムに確認可能。
参考: Preview your app – Firebase Docs — https://firebase.google.com/docs/studio/preview-apps
8. Firebase Hostingへのデプロイ
StudioからHostingに直接デプロイ可能ですが、高度な設定（CI/CD・複数環境管理）はFirebase CLI併用が推奨されます。
- 1. 右上の Deploy をクリック
- 2. Firebaseプロジェクトを選択（初回のみ紐付け）
- 3. firebase.json が生成・更新され、デプロイ実行
- 4. 完了後、公開URL（例：https://your-app.web.app/）が表示
9. トラブルシュート（よくある事例）
| 症状 | 主な原因 | 対処 |
|---|---|---|
| ワークスペースが開かない | ブラウザ拡張・キャッシュ | シークレットモードで再試行 |
| Geminiが応答しない | 一時的なサーバー制限 | モード切替または時間をおいて再試行 |
| FirestoreやAuthが反映されない | 設定未紐付け／ルールエラー | Firebase Consoleで設定確認 |
| Hostingデプロイ失敗 | 権限不足／プロジェクトID相違 | プロジェクト選択とロール確認 |
| プレビューが動かない | dev.nix設定未適用 | 設定ファイルの有効化またはテンプレート再作成 |
10. 制限と注意点（Preview版）
| 項目 | 内容 |
|---|---|
| 無料ワークスペース数 | 最大3つまで |
| Geminiリクエスト制限 | 過負荷時に制限が発生する場合あり |
| 互換性 | Preview版のため後方互換性非保証 |
| 費用 | Studio自体は無料。Firebaseサービス使用量に応じて課金発生あり |
| 商用利用 | Preview段階では慎重な運用推奨 |
11. まとめと次のステップ
Firebase Studioは、環境構築不要 × AI統合 × Firebase連携を実現した次世代IDEです。ブラウザだけで設計 → 実装 → プレビュー → デプロイを完結でき、特に個人開発・プロトタイピングに最適です。
ただし、AI生成コードはレビュー必須、プレビュー版特有の不安定さにも注意が必要。今後は正式リリースに向け、Gemini連携やCLI統合の拡充が進む見込みです。
関連記事
- 公式ドキュメント：Get started with Firebase Studio
- https://firebase.google.com/docs/studio/get-started
最後までお読みいただきありがとうございます
この記事が参考になりましたら、ぜひシェアや他の記事もご覧ください。
AI・開発作業を快適にするデスク環境
比較ガイドを見る →購入前に比較しやすいよう、用途別の選び方をまとめています。
ブラウザで完結する無料ツール
ツール一覧を見る →LEXIA が制作現場向けに開発した無料ツールです。登録不要・ブラウザ上で処理が完結します。
AIの関連記事
もっと見る →
Open NotebookへPDFや資料を追加できない場合に、対応形式、ファイル容量、処理状態、API接続、Dockerリソースを確認する方法を解説します。
4分
Mac miniでOllamaなどのローカルLLMを運用する際に役立つSSDドック、外付けSSD、UPSの選び方を解説します。
4分新着記事
一覧を見る →
Open NotebookをDockerで起動し、AIプロバイダーを設定して最初のPDFやWebページを資料として追加するまでの流れを解説します。
4分
Ollamaでconnection refusedやlocalhost:11434へ接続できないエラーが出る場合に、サービス・ポート・ログ・接続元を確認する方法を解説します。
3分
Ollamaでディスク容量が不足したときに、モデル一覧、不要モデルの削除、保存先の確認、バックアップ範囲を整理する方法を解説します。
4分
LEXIA BLOG のすべての記事
ブログトップ →- 紙資料をAIノート化する手順｜スキャン・OCR・保存の実践構成
- 非破壊ブックスキャナー3選｜本を裁断せずOpen Notebookへ
- OCR精度を上げる8つの方法｜傾き・解像度・文字化けを減らすコツ
- Open Notebook向けドキュメントスキャナー3選｜紙資料をAIノートへ
- Open NotebookでPDFを読み込めないときの確認項目｜形式・容量・処理状態
- Mac miniでローカルLLMを使う周辺機器3選｜SSD・ドック・UPS
- Open Notebookの使い方｜Dockerで起動して最初の資料を追加するまで
- Ollama用外付けSSD 3選｜モデル保存と速度の考え方
- Ollamaに接続できないときの直し方｜localhost:11434の確認手順
- Ollama用ミニPCの選び方｜メモリ・SSD・冷却から考える3候補
- Ollamaの容量不足を解消する方法｜モデル削除・保存先変更の確認手順
- Macの音声入力用マイク4選｜USB-C接続と設定の確認点
- Ollamaが遅い原因は？モデル・メモリ・GPUを順番に確認する方法
- 音声入力ヘッドセット3選｜長時間でも距離が変わりにくい選び方
- 音声入力で句読点・改行を入れる方法｜Mac・Windowsの話し方一覧
- 生活音に強い音声入力マイク3選｜空調・タイピング対策
- Windows 11で音声入力が使えないときの直し方｜Win＋Hが反応しない原因
- 音声入力用USBマイク4選｜精度を上げる選び方と置き方
- Macで音声入力が使えない・反応しないときの確認手順
- 音声入力の誤変換を減らす7つの対策｜原因を30秒で切り分ける方法
- Amicalの音声入力用マイク4選｜環境別の選び方と設定のコツ
- NotebookLMの代替5選｜無料・セルフホストのオープンソース版まとめ【2026年最新】
- Ollamaの使い方｜ローカルLLMをMac・Windowsで無料で動かす手順【2026年最新・初心者向け】
- Valkeyとは？Redisから分かれたOSSの正体｜ライセンス・互換性・移行の判断材料
- Claude Codeの料金は結局いくら？Pro・Max・API課金とコスト最適化【2026年版】
- Mac mini複数台でClaude Codeを並列運用する方法｜構成・費用・セキュリティ
- Tursoとは？SQLiteをRustで書き直す“次世代の組み込みDB”の全貌
- OpenMontageとは？AIエージェントが“制作チーム”になる次世代の動画生成システム
- Penpotとは？Web標準で“デザイン=コード”を実現するオープンソースのFigma代替
- Firecrawlとは？Webを“LLMが使えるデータ”に変えるAI時代のスクレイピングAPI
- Web制作の現場で話題の「shadcn/ui」シャドシーエヌユーアイとは？メリット・デメリットをわかりやすく解説
- 最近よく聞く「Godot Engine」って何？初心者が調べてわかったこと
- 完全無料で独自ドメインが取れる「DigitalPlat FreeDomain」って怪しい？メリットと注意点を解説
- パソコンの操作、AIが代わりにやってくれる時代が来た…？話題の「UI-TARS」について調べてみた
- Claude-MemでAIに「記憶」を持たせる：使い方と他AIとの比較
- Sipeed PicoClaw 完全ガイド：10ドルのハードウェアで動く、超軽量AIエージェントの世界へようこそ
- superpowers フレームワークによる「ジュニアエンジニア」からの脱却
- Rorkとは？文章だけでアプリが作れるって本当？
- Supermemoryとは？AIが忘れる理由や記憶を補う仕組み
- Amical（アミカル）とは？無料AI音声入力の使い方・日本語精度を徹底解説【2026年最新】
- Moltbot（モルトボット）とは？できることと安全に使うための注意点
- LobeHubとは？LobeChatから進化したAIエージェントワークスペースを紹介
- YOLOとは何か？物体検出をリアルタイムかつ高速に行う近未来AIについて
- MiroThinkerとは？検索しながら考えるAIを実際に触ってみた感想
- Dyadとは？ローカルでWebアプリを作れる次世代ビルダー徹底解説
- Bun v1.3なにが変わった？公式動画から読み解く最新アップデート
- OpenAIの新モデル「GPT-5.2」とは？
- exoとは？余ってる端末が“ひとつのAIクラスター”になるOSSを解説
- SAM Audio（サム・オーディオ）とは？｜音を自由に切り取る次世代AIをわかりやすく解説
- A2UIは実際にどう使われる？想定ユースケースを具体例で解説
- A2UIとは？AIエージェント向けUI標準化プロジェクトを徹底解説
- Sim.aiって何？視覚的にAIエージェントを設計できるOSSワークフロー基盤
- adk-go とは？Goで始める実務向けAIエージェント開発
- GensparkのAI Developerとは？GensparkのAI Developerを使って安全な便利ツールを作ってみた
- v0ってどこまで実用的なアプリ作れる？
- ローカルファーストは良いぞって話
- コマンドラインでMarkdownを美しく読む：glowの使い方と魅力
- Onlookとは？：Subframe・Tempo・v0・Boltなど、デザイナーと開発者のための次世代UIツール徹底比較
- Open Notebookとは？セルフホストでNotebookLMを自前運用する方法【2026年最新】
- もう.envを手動で共有しない！Infisicalが変えるシークレット管理の新常識
- LanceDBとは？クラウドに頼らない次世代ベクトルデータベースを調べてみた
- Lobe Chatとは？OpenAI・Claude・Geminiを一括管理できる最強AIフレームワーク
- Bunとは？：もうnpmには戻れないかも。かわいい顔した爆速JS
- Firebase Studioとは？Googleが描くAI時代の新しい開発環境
- Stremioの運営元・収益構造を含む「危険性」のリアルな見方：使う前に知っておきたいポイント
- AIでWebアプリを自動生成！Lovableとは？
- Generative AI for Beginners 最新版（21 レッスン版）を徹底解説
- OpenHands（旧OpenDevin）とは？AIが自動で開発を進める時代の幕開け
- Bolt.newとは？ブラウザで動くAI開発エージェントの使い方と特徴を解説
- Stremio / stremio-web とは？危険性と合法性を調査 — 将来性も含めて
- Claude Code入門：ターミナルで動く“エージェント型”コーディングアシスタント
- Stagehandとは？E2Eテストが超楽になる！？“AIブラウザ自動化”の衝撃
- STUDIOアップデート総点検：あと「STUDIO AI」どこ行った？