アプリ構築エージェント「Firabase Studio」がアプリ開発を劇的に変える

公式ページでは以下のように説明されています。

Firebase Studio は、API、バックエンド、フロントエンド、モバイルなど、本番環境品質のフルスタック AI アプリを構築してリリースするのに役立つエージェント型のクラウドベースの開発環境です。Firebase Studio は、Project IDX と、Firebase の Gemini による専用の AI エージェントとアシスタントを統合し、アプリケーション開発に必要なものがすべて揃った、どこからでもアクセスできるコラボレーション ワークスペースを提供します。さまざまな言語とフレームワークをサポートするテンプレートを使用して、既存のプロジェクトをインポートすることも、新しいプロジェクトを開始することもできます。

ブラウザ上で稼働するIDE(統合開発環境)で、AIとやりとりをしながら、アプリケーションの開発を行うことが出来るサービスです。Geminiによる自然言語サポートは、プロトタイプの開発からエラー解消、エンハンスまで広く利用可能であり、システム開発の中で幅広く活用できます。

また、Firebaseはアプリをデプロイするのが非常に簡単であり、アプリのモニタリングもデフォルトで行えるようになっており、Google Cloud環境へのデプロイをするところまで一貫してFirebaseでやり切ることが出来ます。

構築デモ

今回は、アプリのデプロイは含まず、アプリを作ってみるところにフォーカスして構築の様子を紹介します。

ブループリントの構成

トップ画面にて、どんなアプリを作りたいかをプロンプトで指示できます。既にあるリポジトリを取り込んだり、プロンプト指定でなく単に開発用の環境を払い出すこともできます。

今回は、画像からカロリーを算出するアプリを作っていることにします。

プロンプトに「食べ物の画像からそのカロリーを推測するアプリ」と入れてみました。

このように、アプリの名前、どんな機能を持っているか、どんなデザインか、どんな技術を使うかを挙げてくれます。画像をアップロードさせ、それをAIで画像認識してカロリー推測する、という風に、必要な機能をしっかり挙げてくれました。

このブループリントに対しては独自に修正も可能です。今回は追加機能として、カロリー推測をした結果をSNSにシェアする、をプロンプトに追加しました

この状態で[Prototype this App]をすると、アプリのプロトタイプが作られます。

コードが生成されていく様子が見られます。しばらく待ちます

5分程度で完了し、プロトタイプが完成しました！

ほぼ完成したような気もしてしまいそうですね。

アプリのエンハンス

基本的なところは作れたので、あとは動きを見ながら、修正をしたり機能追加をしていきます。

まず実際に動かしてみると、画像のアップロードをして計算はしてくれましたが、アップロード画像がプレビュー表示されないバグがありました。

こういった時の修正も、プロンプトで指示することが出来ます。

右側のチャットでのやり取りもできますし、

UIとして修正したい部品を選択してそこに対して指示を出すこともできます。

ちなみに修正は一発では成功しなかったものの、「アップロードしたが表示されない」と2~3回伝えていたら無事に修正されました。何度かやっても成功していないことを受け、AI側で修正アプローチを見直したりして正解にたどり着いたのでしょう。

機能追加もしてみます。

色が見づらかったので、テーマカラーを変える機能を雑に依頼してみました。

「こういう修正をします」と宣言をしたうえで実装してくれて、期待通りの機能が実現できています。

エラー修正

SNSシェア機能のボタンを押すと、エラーになってしまいました。

こういう場合にも、チャットが即座に拾ってくれます。右側に出てきた指示に従いFix Errorをするとエラーの原因を特定し、修正をしてくれます。

「Perimission denied」エラーがより適切に処理されという出力で、実際にシェアをしようとしたらPermissonエラーですというメッセージになり実際の機能実現までは至っていませんが、アプリエラー自体は解消してくれています。ここについては、他サービスへの接続を必要とするため単純なプログラム修正だけで済む部分ではないかもしれないですね。

コードでの修正

ここまではすべてGUI上で、コードを1行も書かずにやってきました。しかし、プロンプトでの指示が難しくなってきたり、実際にコードを見て対応したほうが良いとなることもあるでしょう。そうなった場合でも、コード編集モードに切り替えたうえで操作することが出来ます。コードを操作しつつもアプリプレビューが横に出ているので、画面の行き来やデバッグが煩雑になることも少ないでしょう。

デモの内容としてはここまでです。

なお、デモアプリを何にするかを思いついてから最後の状態になるまで、所要時間はわずか50分程度でした。

活用方法

デモを踏まえて、どういった時にこのFirebase Studioの活用が良さそうか、大きく2パターンがあると考えます。

非プログラマによるアプリ開発

アプリ開発の大半を自然言語による指示だけで完結させることが出来ましたので、プログラミングに長けていない方でも、思いついたアプリを簡単に構築することが出来ます。これまではローコード/ノーコードツールを作った構築していたものもあるかもしれませんが、それらのツールの場合はどうしてもツール自身の技術制約が生じてしまいます。アプリとして開発すればそのような制約なく、しかしコードが書けなくても構築できることになります。

簡単なアプリとして全てプログラミング無しで作るも良し、プログラマに詳細やエンハンスは任せるもののプロトタイプとして渡すも良し、という使い方ができます

とにかくすぐにアプリを作りたい

コーディングスキルのあるプログラマだとしても、ゼロからアプリ構築をするとなると多少なりとも時間がかかります。フレームワークをインストールしてトップページを作ってフォルダ構成を考えて...という、アプリの仕様やロジックを組み込む以前のところの作業も多いでしょう。Firebase Studioであれば、「〇〇するアプリを作りたい」という指示をするだけで、それらの初期実装をすることなく、かつ必要な最小限の機能のものについてはすぐに構築できます。

デプロイしてサービスとして公開したいわけではないけれどちょっと手元で複雑な動きをするツールを用意したい、みたいな場合にも、労力をかけることなく作れるので良さそうです。

注意事項

あくまで「開発支援」なので、すべては任せられない

AIサービス全般に言えることですし、Firebase Studioの画面にも出ますが、Geminiも間違えることはあります。

徐々にアプリ自体の機能が増えたり複雑化してきた後は、自然言語による指示での修正が的を射ていないものになることがありました。また、提案してきた修正内容をなにも見ずにそのまま反映させたらアプリが動かなくなることもありました。

まったくコードが読めないようですと、どこを修正されるのが正しいのかも判断が出来ませんし、AIの間違え方をもとにより良い指示を出すことも難しくなるでしょう。

まとめ

統合開発環境や開発関連ツールをPCにインストールしたり、開発用にDocker環境をPCに用意したり、ということからは解放され、インターネットにつながるブラウザ上であれば開発ができるようになりました。そこに強力なAIまでが組み込まれることで、これまでとは比較にならないほどアプリ開発が簡単に迅速にできるようになりました。

私自身、Google Cloud Nextの発表を聴いて使えそうだなと簡単に思っていたものの、実際に開発をしてみたら想像以上に機能が強力であり、非常に驚きました。これについては実際に体験してみていただくのが一番です。

2025/05/20時点ではプレビュー版として提供されており、無料での利用が可能です。ただし、アプリを実際にデプロイするとGoogle Cloud上に構築されることになり、課金されるようになりますのでご注意ください(※ その前に案内はあります)。

アプリ開発に何らかのハードルを感じている方、もっと楽にアプリを作りたいと感じている方は、是非こちらをお試しください。

参考

• Firebase Studio
• Firebase Blog

Google Cloud、Google Workspace に関するご相談はXIMIXへ！

Google Cloud、Google Workspaceに関する お問い合わせはこちら