今回の内容は 後編です。
- 前編：Firebaseを使った簡単なアプリの作成
- 後編：Firebase Studioを活用したノーコードアプリ開発
前編を見ていなくても楽しめます！ぜひ最後までご覧ください！
Firebase Studioとは？
2025年4月に発表された 「Firebase Studio」 は、AIに「どんなアプリを作りたいか」を伝えるだけで、プログラミング初心者でもコードを書かずにアプリを開発できる革新的なツールです。 今回は実際にFirebase Studioを使ってToDoアプリを作ってもらいました。
実際に使ってみる
それでは早速 Firebase Studio を使ってみます。
Firebase Studio にアクセスすると、過去に利用した履歴がある場合はプロジェクト一覧のような画面が表示されます。
今回は非常にシンプルに、
「ToDo 管理アプリを作ってください」
とだけ指示してみました。
すると、AIから次のような返答が返ってきます。
- アプリに必要な機能
- デザインやスタイルの方向性
- 使用する技術スタック（言語・フレームワークなど）
といった内容が整理されて提示されました。
右上の Customize を押すことで細かく書き換えることもできますが、今回は何も変更せず Prototype this App をクリックします。
2,3分で完成し、アプリの画面に移動します。
非常にシンプルですが、ToDo の追加・完了ができる管理アプリが自動で作成されています。
初期状態では英語表記だったため、試しに Gemini に
「このアプリを日本語表記に変えてください」
と指示してみました。
すると、少し表現が気になるところはありますが、日本語に変えてくれました。 変更したファイル、変更した箇所も一緒に送ってくれるようです。
「どこがどう変わったのか」が把握しやすい点は非常に便利ですね。
また、右上の コードアイコン をクリックすると、Firebase Studio が生成した実際のコードを確認できます。
今回は触りませんでしたが、
- 自分で直接コードを修正する
- 生成されたコードをベースに本格的な開発に移行する
といった使い方も十分に可能です。
また、開発者ツールのように画面上の要素を選択することもできます。
試しに特定の要素を選択し、
「この背景色を白にしてください」
と指示してみました。
背景色は問題なく変更されましたが、なぜか背景色以外のスタイルも一部追加されていました。
そこで、
「ここの角のまるみ、影を消してください。」
と伝えてみると、今度は意図通りにスタイルを削除してくれました。
このことから、
- スタイルの追加
- スタイルの削除
どちらにも対応できることが分かりました。
多少の試行錯誤は必要ですが、会話ベースで UI を調整できるのは非常に便利です。
続いて、機能実装も試してみます。
前編で作成した ToDo アプリに合わせて、レベル機能を実装してもらうことにしました。
「ToDoを一個完了するごとにポイントがたまり、ポイントに応じてレベルが上がる機能を実装してください」
と指示すると、驚くほどあっさり実装が完了しました。
実際に動かしてみると、ポイントの加算・レベルアップも問題なく動作しています。
しかし、画面左下にエラー表示が出ていることに気づきました。
エラー表示をクリックすると、エラーメッセージが表示されます。
ここで Fix Error を押すだけで、自動的に修正が行われました。
このときに気づいたのですが、仕様を伝えて実装するたびにコミットされているようです。
また、 Githubでログインすればブランチの発行もできるようです。
デバッグ面では、console.log を使った出力は問題なく行えました。
ブレークポイントを設定することもできましたが、実際には停止しませんでした。
この点については、
「AIに指示すればブレークポイントで止まるようにしてくれるのか？」
など、今後検証してみたいポイントです。
まとめ
ノーコード開発というと、これまでは AppSheet のようなツールをイメージしていましたが、 Firebase Studio は 「話すだけで作ってくれる」 という点で、とても新しい体験でした。
今回はコンソールに出力する以外、ほぼコードを書かずにアプリを完成させることができました。
ノーコード開発でなくとも、まず AI にアプリの骨組みを作ってもらい、そこから自分好みに調整していく、という使い方とも非常に相性が良さそうです。
Firebase Studio の今後のアップデートにも、引き続き注目していきたいと思います。
おわりに
KENTEMでは、様々な拠点でエンジニアを大募集しています！ 建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。 recruit.kentem.jp career.kentem.jp
