こんにちは、中山です
近年、生成AI がコードを書く時代が本格的に到来しつつあります
といいますか、そろそろ、AI の進歩の早さに置いていかれそうな感もあります
OpenAI 社や、Claude の Anthropic 社などと同様に、Googleもまた、開発者向けツールとして「Firebase Studio」や「Gemini Code Assist」といった、なんかすごそうなサービスをどんどん投入してきています
今回の記事では、これらの Google 製ツールに、日本の行政機関が公開している「オープンデータ」を用いたシンプルな地図アプリを作らせてみて、その「生成されるコード」「ユーザー体験」などを比較してみようと思います
使用するオープンデータ
今回使用するオープンデータは、弊社の高松オフィスもある、香川県高松市が公開している、市内の ため池一覧 の、GeoJSON 形式のデータです
このデータを使って、地図上にため池の位置をピンで表示し、そのピンをクリックすると、ため池の名称と住所がポップアップ表示されるような、「ため池マップ」ウェブアプリを作ってみます
ちなみに、香川県というところは面積のワリにため池が多いようです
飛行機などで空から見たときには、数多くのため池があるため、平野にポコポコと穴が空いたように見えるかもしれません
使用するツール
今回、Google が提供する、以下 2種類のツールを使って、それぞれ同じウェブアプリを作ってみようと思います
Firebase Studio
公式ページによりますと
「ブラウザから、AI を取り入れたフルスタック アプリのプロトタイプ作成、構築、製品化を迅速かつ効率的に行います」
とのことです Firebase で動くアプリ一式を、プロンプトから作りますよ、みたいなツールのようですGemini Code Assist
これも公式ページによりますと
「Gemini 2.5 を搭載した、ソフトウェア開発ライフサイクル全体のタスクを支援する、安全な生成 AI コーディング支援とエージェント」
とのこと
VS Code のプラグインなどとして導入して使え、自然言語でコードを生成したり、既存のコードの理解・修正・補完をサポートしてくれたりするようです
個人向けには無料で使えます、とのことです
なお 2025年の Google I/O では、Jules という新しいサービスも発表されました
公式ページの説明を掲載しますと
「Jules は、バグ修正、ドキュメント追加、新機能の開発を支援する実験的なコーディングエージェントです。GitHub と統合し、コードベースを理解し、非同期で動作するので、タスクを処理している間、あなたは別の作業を進めることができます。」
とのこと
この Jules も非常に気になるところではありますが、今回は、
「アプリ全体をノーコード・ローコード的なアプローチで全部作ってくれる Firebase Studio」
と
「開発者のソースコード開発をリアルタイムにサポートしてくれる Gemini Code Assist」
との比較、
という形で、詳細を追いかけてみようと思います
作成するアプリの要件
今回作成する「ため池マップ」アプリの要件としては、以下のような感じになります
- 香川県高松市の地図を表示（適切なズームで）
- 市が公開するため池のオープンデータ（GeoJSON）を読み込む
- 地図上の、各ため池の位置にピンを表示
- ピンをクリックすると「名称」と「住所」をポップアップ表示
- JavaScript ベースで、クライアントサイドのみの実装とする
- フレームワークは、特に指定なし（AIに選んでもらう）
使用するデータは前述のとおり、香川県高松市が公開している、市内の ため池一覧 のデータです
このファイル、中身は以下のようになっています
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 134.114020985276, 34.3514581987302 ] }, "properties": { "#property": "1", "code": "372010006", "reservoirName": "新池", "address": "屋島東町明神1055" } }, ・・・
アプリを作成するためのプロンプト
Firebase Studio、Gemini Code Assist ともに、以下のプロンプトを指定します
香川県高松市が公開しているオープンデータ（GeoJSON形式）を使って、地図上にため池の位置を表示する Web アプリを作成してください。 【要件】 - 使用データ： https://opendata.takamatsu-fact.com/reservoir_list/data.geojson - JavaScriptを使用してください - 地図上に香川県高松市を表示（ズームして中心に） - GeoJSONデータを読み込み、ため池の位置にピンを表示 - ピンをクリックすると、ため池の「名称」と「住所」をポップアップ表示 - クライアントサイドのみで完結させてください
Firebase Studio の場合
まずプロンプトをそのまま指定して、
そうしますと、以下のような確認のメッセージが表示されます
プロンプトは日本語で指定しましたが、応答は英語でした
だいたい、内容は伝わってるみたいですので、そのまま「 Prototype this App 」をクリックします
その後、3分くらい待機したあと、一応アプリが完成して起動されたのですが
Configuration Error Google Maps API key is not configured. The map will not load. Please set the NEXT_PUBLIC_GOOGLE_MAPS_API_KEY environment variable.
というエラーで、最初の起動は失敗してしまいました
地図は、Google Maps を採用したようなので、その API キーは手動で設定してみます
なお生成されたコードは、以下のような感じでした（ VS Code ライクなエディタがブラウザ上で開きます）
プロンプトでは「JavaScript で」と指定したのですが、実際には TypeScript + NextJS と、それに加えて Tailwind CSS という構成になっていました
JavaScript と TypeScript という違いはありましたが、一応、すぐに公開も可能な形のアプリに仕上げてもらえたようです
Google Maps の API キーについては、以下のように、プロジェクトディレクトリの直下に「 .env.local 」という名前のファイルを追加して、そこに定義しました
Firebase Studio で作ったアプリは、以下のようになりました
思った以上に「池」多すぎで、正直びっくりしました
ただちょっと残念だったのが、以下のようにピンをクリックしても名称や住所が何も表示されなかったことです
Firebase Studio 先生に、ここ動かないんですが、と再度たずねてみたところ、オープンデータの項目名は合ってるのか？という回答あり（コードの修正まではしてくれなかった）
見直してみますと、確かに
<Card className="w-64 shadow-none border-none"> <CardHeader className="p-3"> <CardTitle className="text-base font-headline">{selectedReservoir.properties.名称}</CardTitle> </CardHeader> <CardContent className="p-3 pt-0"> <p className="text-sm text-muted-foreground"> {selectedReservoir.properties.住所} </p> </CardContent> </Card>
この部分、「名称」「住所」という記載になってたところを、本来の「reservoirName」「address」という項目名に手動で変えてみますと
このとおり、クリックした池の名称・住所が表示されるようになりました
なおこの「三郎池」、香川県で3番目に大きいので「三郎」池です
あと、この池の底には龍が住んでいるとかいないとか
Gemini Code Assist の場合
次に、Gemini Code Assist を使ってみます
Gemini Code Assist は、今回は VS Code のプラグイン（エクステンション）として使います
Firebase Studio のときと同じプロンプトを与えてみますと、約 2〜3分後に以下のように生成されました
これは、Firebase Studio のときと、かなり異なる結果となりました
主な差異としては
- 1ファイルのみの構成で生成された
- プロンプトどおり、 JavaScript が採用された
- 地図ライブラリは Google Maps ではなく、Leaflet（OpenStreetMap） が採用された
- その他のライブラリ・フレームワークは使われず、素の JavaScript + HTML となった
- 日本語で応答が返ってきた
などでした
このアプリ（ html ファイル）をブラウザで開いてみますと、以下のように表示されました
地図上でため池の位置がピン表示されているのは、Firebase Studio の場合と同じでした
しかし、ピンをクリックしても名称・住所が表示されないのも、これも Firebase Studio と一緒・・・
このため、Gemini Code Assist に不具合の原因調査と修正を依頼してみました
その結果がこちら
修正の方向としては正しいのですが、具体的な項目名は誤っています
おそらく、最初のプロンプトの指示の段階で、このデータのフォーマットの情報もいっしょに渡しておくのがベストなのでしょう
上記を参考に、手動でコードを修正してみましたところ、以下のように、ポップアップも表示できるようになりました
ここで表示されている「喧嘩池」は、そのむかし、馬と牛がここでケンカしていたから「喧嘩池」となった、という、まんが日本昔ばなしレベルの伝説の残る池なのですが、今となっては本当のことは知る由もございません
まとめ
Firebase Studio と Gemini Code Assist で同じ要件のアプリを作ってみた結果、以下のような特徴が見えてきました
| 比較観点 | Firebase Studio | Gemini Code Assist |
|---|---|---|
| 日本語対応 | 完全ではなさそう | 日本語ですべてやり取りできている |
| 生成までの時間 | 3分前後 | 3分前後 |
| 生成されたファイル | TypeScript + NextJS + Tailwind CSS のファイル一式（アプリとしてすぐ公開できる形） | JavaScript + html の 1ファイル（プロンプトに忠実？） |
| 地図ライブラリ | Google Maps | Leaflet（OpenStreetMap） |
| アプリの UI デザイン | リッチ（ Tailwind 利用） | シンプル（プロンプトに忠実？） |
| 初期生成後の不具合修正 | （今回は）問題箇所の特定のみ | 問題箇所の特定と修正案の例示あり |
Firebase Studio のほうは、とにかく、すぐにでもアプリとして公開できるファイル一式を生成してくれる、という印象
プロトタイプを素早く作成する、みたいな用途では、かなりの効果を発揮するのではないでしょうか
一方で、最初に「ノーコード・ローコード的なアプローチで」と書きましたが、これはちょっと正確ではなくて、生成されたアプリをブラッシュアップしていく過程では、AI のパワーを借りながら、であっても、やはり実際のコードは見ていかないといけないわけで、プログラミング知らなくてもいけますよ、というよりは、プログラミングわかっていると、より便利に使えますよ、みたいなツールなのかなと感じました
Gemini Code Assist は、Firebase Studio よりも、プロンプトに忠実に動いてくれるイメージでした
たぶん、プロンプトは最初に1回、というのではなくて、開発の作業の中で、都度、プロンプトに問い合わせながら、AI といっしょにアプリを作っていく、育てていく、みたいな感じではないかと感じました
といいますか、やはりびっくりしていますのは、個人利用で、という前提はあるものの、今回の利用の範囲では全然料金がかかっていないこと、です
Google の Gemini は、いつも OpenAI や Claude の影に隠れていて、どちらかというと 3番手的なイメージを勝手に持っていましたが、一般的な用途の範囲では、十分な精度を出してくれていますし、コストもあんまりかからないし、無視できないな、という感想を持ちました
Firebase Studio、Gemini Code Assist とも、それぞれ特徴があり、シーンに応じて使い分けていったらよいのではと思いますが、どっちを使うにしても、もし同じことを AI 使わずにイチから手動でやるというのを考えると、莫大な労力節約につながることだけは確かです
今後も積極的に、普段の作業に取り入れていきたいと考えさせれられるツールでした
