🧑‍💻

#147 Firebase Studio を使ってみた

に公開
Firebase
Next.js
時事
tech

はじめに

Firebase Studio は、Googleが2025年4月に発表した、AIを活用したクラウドベースの統合開発環境（IDE）です。

このツールは、以前のProject IDXを統合し、FirebaseのGeminiやGenkitなどの機能を組み合わせた、エージェント型の開発プラットフォームであり、アプリケーション開発に必要な機能が一つの環境に統合されています。

Firebase Studioは現在、 プレビュー版（ベータ版） として提供されています。

具体的には、以下のような特徴を持っています：

  • AIを活用したアプリケーションプロトタイプの自動生成：自然言語でアプリの要件を入力することで、Next.jsのアプリケーションプロトタイプを自動生成します。

  • クラウドベースの開発環境：ブラウザ上で開発が完結し、ローカル環境の構築が不要です。

  • 豊富なテンプレートとサンプル：React、Angular、Vue.js、Flutterなど、さまざまなフレームワークや言語に対応したテンプレートが用意されています。

  • Firebaseとの統合：Firebaseの各種サービス（Authentication、Firestore、Hostingなど）とシームレスに連携し、アプリの構築からデプロイまでを一貫して行えます。

  • GeminiによるAIアシスタンス：コードの生成や修正、テストの自動化など、開発プロセス全体をAIがサポートします。

現時点では無料で提供されており、Google Developer Programのメンバーであれば、より多くのワークスペースを利用することが可能です。プレビュー期間中のため、料金体系は変更の可能性があります。

今回はこのFirebase Studioのプロトタイピング機能を使って、PlantUMLを使ったUML図のノート＆プレビューアプリを作成してみました。その手順と所感をまとめてご紹介します。

手順

プロンプトの入力

まず、Firebase Studioのプロンプト欄に以下のような指示文を入力しました。

Next.jsで、PlantUMLを使ったUML図ノート＆プレビューアプリを作ってください。

## 概要
テキストで記述されたUMLコードをリアルタイムでレンダリングして表示するアプリです。

## 必須機能
- 左側にエディタ、右側にプレビューの2ペイン構成
- PlantUML記法でUMLを記述すると即時に図が反映される

## 追加機能（可能であれば）
- ダークモード対応
- 図のPNG/SVGでのダウンロード
- 記述テンプレートの挿入機能（例：ボタンでシーケンス図の雛形を挿入）

入力を終えると、すぐにアプリのプロトタイプが生成されました。
チャット欄から追加の要望を送信することもできますし、IDEから直接コードを編集することも可能です。

エラーの解決

初期状態ではコンソールにエラーが出ており、ページの表示に失敗していましたが、「Fix Error」 ボタンを押すことで自動的に修正が走り、初期表示までできるようになりました。

▼ 初期生成時のエラー

▼ 自動修正後

しかし、まだ各種機能は動かず、それぞれ以下のように修正しました。

ボタンが重なっている

  • 状況：右上のボタン同士が重なってレイアウトが崩れていました。
  • 対応：
    • チャットで「ボタンが重なっている」と送信 → 自動修正が走ったが未解決
    • CSSのwidth指定が極端に小さかったため、手動で修正

UML図が表示されない

  • 状況：テキストを入力してもUML図が表示されない
  • 原因：PlantUMLサーバーが期待する形式（独自の圧縮＆エンコード）ではなくURLエンコードでリクエストしていた
  • 対応：
    • チャットで「UML図が表示されない」と送信 → 自動修正が走ったが未解決
    • チャットで「URLエンコードではなく、plantuml-encoderパッケージを使ってエンコードして」と送信
    • plantuml-encoderを使ってエンコードするように修正されたことで、図が表示されるようになった

ダークモードボタンが効かない

  • 状況：UI上にダークモード切替ボタンはあるが、何も起こらない
  • 原因：ボタンの処理はあるものの、テーマの状態管理の実装が抜けていた
  • 対応：
    • チャットで「ダークモードボタンが効かない」と送信 → 自動修正が走ったが未解決
    • チャットで「テーマの状態管理の実装が抜けている」と送信 → 修正完了

解消後

これらの修正を経て、当初のプロンプトで求めた通りのアプリが完成しました。

▼ シーケンス図の表示例

▼ フローチャートの表示例（ダークモード使用）

  • 画像ダウンロード機能はSVG形式のみ対応
  • テンプレートボタンはクリックするとテキスト欄が丸ごとサンプルコードに置き換わるだけのシンプルなもの

より高度な仕様が必要な場合は、チャットで具体的に指示を出せば対応してくれそうです。

所感

簡単なテキストを入力するだけでここまでのアプリが自動生成されるのは驚きでした。しかも現時点では無料で利用可能です。

ただし、コードの知識が全くない人にはまだ難しいかもという印象を受けました。
自動修正が効かないエラーには、明確な原因をチャットで伝えないと解消されないケースが多く、技術的知識が一定程度必要です。

とはいえ、すでに実用的なプロトタイプを短時間で生成できる点で、非常に有用なツールであることは間違いありません。Next.js以外のフレームワーク対応や、より高度なエラー対応など、今後のアップデートにも注目していきたいと思います。

Discussion