初めまして！こんにちは。このサイトを運営するTomoyaです。これから個人開発を発信していく上で始めに使うツールや流れを紹介していきそれを基に実践を行っていきます。その第３弾になります。
今日は前回ご紹介した【Google AI Studio】(前回の記事）からもう一つの開発環境として使っていく【Google Firebase Studio】をご紹介していきたいと思っています。
前回からの続きでご覧になった方は大変ありがとうございます。まだ前回の記事を見ていないよって方は以下の関連記事からご覧ください。
1. 導入：環境構築の「絶望」からの解放
初めにPC内の「黒い画面（ターミナル）」や「環境構築時のエラー」を経験したことがありますか？
私は、以前プログラミングを学ぼうと思い参考書を買ったりProgate(プロゲート）というプログラミング学習サービスを受講していました。始めは見た事のない文を正しく記入する事でターミナルやweb画面に表示されたりした事を喜んでいました。
そして実際に自分のPCで行ってみようとした時に問題が発生しました…
それが【環境構築】です。
始めは、Ruby言語で行おうと決めて参考書も購入しました。しかしいくらやってもサーバーが立ち上がらずwebで調べてもエラーが解消されない地獄の時間になってしまい一時は恐怖を感じていました。やがていじっているとサーバーが起動して表示されましたが環境構築だけで時間を費やしてしまった事に後悔をしています。ここをクリアできていればコーディングに集中できてやる気を持って向き合えた感じがあったからです。
いわば環境構築は初歩の作業です。ここに私は躓いて抜け出せなくなったのです。
この現代で、そんな地獄の時間は読んでくれている読者の方にしてほしくないので、
今回は、環境構築も含めて行ってくれる開発場所である「 Firebase Studio」を紹介したいと思います。
2.Firebase Studio（旧 Project IDX）とは？
Firebase Studioとは、Googleが提供するAI（Gemini）を統合したクラウドベースのフルスタック開発環境（IDE）です。
※フルスタックとは、ITシステムやWeb開発において、フロントエンドからバックエンド、データベース、インフラ(GCPなど)まで、開発に必要なすべての工程（層）を一人で、あるいは一つのチームで完結できる状態やスキルのことを指します。
私は、このFirebase Studioに対してブラウザだけですぐに開発・プレビュー・公開ができ、全体の管理を一貫性を持って行える点でFirebase Studioは革命的な便利さを持っていると感じています！
コードの記入だけでなくプレビュー[モバイル/webサイト]で動作を確認できたりFirebase機能を使ってセキュリティやログイン機能(バックエンド)を取り付けデプロイ(公開)する事も可能になるオールインワンを提供している場所です。
Firebase Studioを利用することで「余計な手間を最小限にして最新の開発環境が揃っている」というイメージだと思ってください。
- Vibe Codingに最適：
-
AIエージェントだけでなくその場でプレビューできたり画像を使って指示・自力でのコードの編集・バックエンドとの連携が柔軟に行えるので開発環境としては十分なくらい揃っているといえます。
- AIがパートナー:
-
「チャットアプリを作って」と自然言語で指示するだけで、AIがUIやプログラムのコードを生成します。
- 環境構築不要:
-
URLにアクセスするだけですぐに開発を始められます。
AIに始めの一歩を作成してもらう事で面倒なソフト・パッケージ・ライブラリなどのインストールは不要になり立ち上げまでの環境構築を行ってくれるので作成に集中できます。
- その場で公開:
-
デプロイもボタン一つで行ってくれます。
※バックエンド機能を使ってデプロイする場合は有料プラン(Blaze)へのアップグレードが必要です。
- 共同作業もできる
-
Googleドキュメントのようにリンクを共有するだけで、友人と一緒にコードを編集したり、画面を見ながら会議ができます。
さすがに良い事ばかりでなくデメリットもあります。
- コストが発生する可能性がある：
-
開発自体は無料ですが、アプリを公開して運用する場合（Google Cloud）は従量課金となります。
特にAI機能（Gemini API）は、「開発・テスト段階」ならAI StudioのAPIキーで無料で使えますが、「本番公開」して多くのユーザーに使わせるならVertex AIとの連携（有料）が必要になります。
※Google Cloudには無料枠もあるので、個人開発レベルなら過度な心配は不要ですが、「使う分だけお金がかかる」ことは意識しておきましょう。
- AIの限界と「無限エラーループ」：
-
Vibe Codingは魔法ではありません。複雑な指示を出すと、見た目はすごくても「動かないコード」が出力されることがあります。それを直そうとAIに指示しても、同じエラーを繰り返す（ループする）こともよくあります。
「AIは常に正しい」という幻想は捨て、「どう指示を変えれば直るか？」を工夫したり、時には自分でコードを修正する泥臭さも必要です。
- オフラインでは使えない：
-
クラウドベースでの利用になるのでインターネットがないと利用できません。
※参考ドキュメント/出典元
FirebaseとFirebase studioの違いは？
こういった疑問を抱くと思いますがFirebaseとFirebase Studioの決定的な違いは、
「サービスの集合体（インフラ）」か、それらを使ってアプリを作るための「開発環境（ツール）」かという明確な違いがあるので分けて認識する必要があります。
- Firebase:
-
アプリのバックエンド機能（データベース、認証、ホスティングなど）を提供するBaaS（Backend as a Service）プラットフォームです。開発者が自分でサーバーを構築せずに済むための「部品」や「インフラ」を提供します。
- Firebase Studio:
-
AI（Gemini）を統合したクラウドベースの統合開発環境（IDE）です。Firebaseの機能を利用したフルスタックアプリを、ブラウザ上で設計・コーディング・デプロイするための「作業場」です
| 特徴 | 従来のFirebase開発 | Firebase Studioでの開発 |
|---|---|---|
| 作業場所 | ローカル環境 （自分のPCに入れたVS Codeなど） | クラウド環境 （ブラウザ上のVS Codeベースのエディタ） |
| 環境構築 | Node.jsなどのソフトインストールやSDKの設定など、手動でのセットアップが必要 | ブラウザを開くだけで環境が整っており、セットアップ不要 |
| コーディング | 人間がコードを書き、Firebase SDKを組み込む | 自然言語でAIに指示し、AIがコード生成・修正・提案を行う（人間は監督・調整）。コード編集も可能 |
| インフラ連携 | Firebaseコンソールとエディタを行き来して設定。（Firebaseで作成・設定→自身のエディタに連携） | エディタ内のチャットやボタン操作でシームレスに連携・設定 |
※参考ドキュメント/出典元
料金体系は？
Firebase Studio（旧Project IDX）を利用する上で、知っておくべきプランは大きく分けて2つです。非常に明確です。
1. Spark Plan（無料プラン）
- 概要: 登録直後のデフォルトの状態です。
- できること: 開発の練習、コードの保存、静的なWebサイトのホスティングなど。
- 制限: 外部API（Google以外のAIや他社サービス）への接続や、高度なバックエンド機能（Cloud Functions等）に制限があります。あくまで「お試し・練習用」と考えてください。
2. Blaze Plan（従量課金プラン）
- 概要: 本格的なアプリを公開・運用するためにアップグレードするプランです。
- 重要: 「従量課金」ですが、「アップグレード＝即課金」ではありません。 Blazeプランの中にも「これくらいまでは無料」という寛大な無料枠が設定されています。
個人開発レベルの小規模なアプリであれば、Blazeプランでも実質0円で運用できることが多いです。 - なぜ必要なのか: Vibe Codingで作るような高機能なAIアプリや、Google Mapsなどの特定機能を使うには、Google Cloudとの連携が必須になるため、このプランへの変更が必要になります。
※参考ドキュメント/出典元
ワークスペース（開発部屋）の数について
Firebase Studioでは、同時に持てるプロジェクト（ワークスペース）の数に限りがあります（初期は3つ程度）。
もしもっとたくさんのアプリを同時に作りたい場合は、「Google Developer Program」に登録（基本無料）することで、作成可能なワークスペース数を増やすことができます。
※さらに大規模な利用やチーム開発の場合は、別途追加オプションが必要になる場合があります。
まとめ：
- 練習中は Spark (無料) でOK。
- 「よし、世界に公開しよう！」となったら Blaze (従量課金) に変更。
- ただし、Blazeにしても無料枠内なら0円で済むので過度な心配は不要。
私が実際にFirebase Studioを使ってみた感想
少し不便なところはあるが満足レベルの高いサービスだなと感じています。
アイデアを形にするVibe Codingを行えるので数分待つだけでプロトタイプが完成するところは十分に感じました。AIエージェントに指示をするだけでコードを追加したり編集・削除を行ってくれるので優秀な部下ができたような感覚になります。
しかしエラーが出た時、簡単なエラーならいいですが内容によってはうまく条件分岐や設定ができておらずそれによって同じ行動とエラーがループする問題があるのが致命的だなと感じました。私はその場合、該当箇所のコードをコピペして他のAIサービスで原因を調査してもらう事で解決しました。
作成の際は計画的に少しずつ修正したり機能を追加していくのが良いなと感じる。
同じところをぐるぐるしていてもイライラしてくるだけなので部分的なエラー修正は他のAIに任せたり知識があれば自身でコード編集するのが良いと思います。
画像編集で「ボタンをもっと立体的に」や「配置を変更」と図や線などで指示を与える事でも修正してくれるのでGeminiのマルチモーダル機能の使い勝手の良さを感じます。
まとめ
今回は、個人開発を行う上でのもう一つの開発環境として【Firebase Studio】をご紹介しました。
初心者泣かせの環境構築の手間がほぼなくなる点やFirebese Studioの紹介を含めて最後に私の使った感想を紹介してきました。
今後このFirebase Studioを主戦場にVibe Codingを行い個人開発を行って公開、運用を行っていける発信をしていきます。
次回は、Firebase Studioを実際に始める方法を画像を使って説明していこうと思います。とても簡単なので誰でもすぐにスタートできると思います。お楽しみに
ここまで読んでいただきありがとうございました。
まだ前回の【Google AI Studio】の記事を読んでいない方はこちらからどうぞご覧ください。
コメント
コメント一覧 （1件）
[…] Googleサービスもう一つの開発環境(Firebase Studio)と私が使った感想 […]