コード生成だけじゃない！Google AI Studioでアプリ開発から動作確認まで完結！

はじめに

皆さんこんにちは、佐々木です。
このブログはTeam xG Advent Calendar 2025 21日目の記事になります。

最近、AIを使ったコーディング支援ツールが次々と登場していますが、Googleが提供するGoogle AI Studioがさらに進化しているのをご存知でしょうか？

単にAIとチャットしてコードを生成するのみでなく、「その場で動かして見せてくれる」という体験が、驚くほどスムーズにできるんです。

今回は、Google AI Studioの概要と、注目の「Build機能」を使って実際にWebアプリケーションを作って動作確認まで実施する様子をご紹介します。

Google AI Studioとは？

Google AI Studioは、GoogleのAI「Gemini」の性能をフル活用できる、Webベースの開発ツールです。
プロンプトの作成からテスト、実際のアプリへの組み込み（API連携など）まで、ブラウザひとつで完結します。

また、特に大きな特徴としてGemini 3.0など、最新かつ高性能なモデルをいち早く試せるうえに、Googleアカウントさえあれば無料で利用できちゃいます。

主に開発者向けのプロトタイピングツールとしてアイデアを形にする頼れる相棒のような存在です。

コード生成だけじゃない！「Build」機能のここが凄い

今回特に紹介したいのが、単なるコード生成を超えたBuild（ビルド）機能です。

対話型のAIでコーディングの支援をしてもらうとき、こんな手順を踏んでいませんか？

1. 生成AIにコードを生成してもらう
2. コードをコピーする
3. 自分のPCのエディタ（VS Codeなど）に貼り付ける
4. アプリをビルドして動作確認する

これ、地味に手間ですよね。「コードは書いてくれたけど、エラーが出て動かない…」なんてこともよくあります。

そこで紹介したいのが、今回ご紹介するGoogle AI StudioのBuild機能です。
この機能では生成されたコードを、ブラウザ上のプレビューウィンドウで即座にレンダリング（表示・実行）してくれます。
単なるコード生成のみでなく、実際にアプリを動かすところまでできるという点が注目の機能です。

また、最近はGeminiのCanvas機能で同等のことができるようになりましたが、Google AI Studioではプレビュー機能にて、スマホやタブレット表示のモードがあったりと、開発で利用する上で便利な機能が備わっています。

ついでにコードエディタの画面がVSCodeっぽい点も開発者にとっては馴染みやすくていいなあと個人的に感じました。

実際にアプリを作って動かしてみた

それでは、実際にアプリを作ってみましょう。

今回は、「日本の歴史クイズアプリ」というお題で、スマートフォンにも対応したWebアプリを作ってもらいます。手順と詳細は以下の通りです。

1. Google AI StudioのBuild画面にアクセス
   
   以下のURLからGoogle AI Studioにアクセスします。
   https://aistudio.google.com/
   
   その後、左メニューから「Build」を選択し、下図の画面にアクセスします。
   
2. Buildメニューを選択し、以下のプロンプトを入力
   
   「日本の歴史」をテーマにしたクイズアプリを以下の条件で生成してください。
   ・デザインはモダンで、スマートフォンでも見やすくしてください。
   ・クイズは全部で3問、3択形式にしてください。
   ・ユーザーが回答を選ぶと、すぐに「正解」「不正解」を表示し、解説も出してください。
   ・最後に3問中の正解数を表示してください。
   
   
3. プレビューで生成されたアプリを確認し動かしてみる
   
   1分程度でコードが生成され、画面右側にアプリのプレビューが表示されます。
   （プレビューが表示されない場合は「Preview」ボタンを押してください）
   
   
   プレビュー画面では先述の通り、生成されたアプリを実際に動かすことができます。
   
   
   
   3問とも正解できました！（問題が簡単過ぎた）
   
   
4. さらに修正してみる
   
   先ほどの問題は簡単過ぎたので、難易度を選択できるように機能を追加してみたいと思います。
   画面左下の入力フォームに以下のプロンプトを入力してみました。
   
   最初の画面で難易度を3種類選べるようにしてください。
   その難易度に合った問題を出題するようにしてください。
   
   
   
   
   プロンプト通り修正されたことがプレビューで分かると思います。
   また、画面右上あたりの「Device」ボタンからスマホ表示も確認してみましたが、綺麗に表示されてますね。
   
   ちなみにこの後、難易度を上級にしてクイズに挑んでみましたが、めでたく全問不正解でした！

まとめ

今回は、Google AI StudioのBuild機能を使って、Webアプリの生成から動作確認までを行ってみました。

これまでの開発フローでは、コードを生成しても「環境構築」や「コピペ作業」という壁がありましたが、Google AI Studioを使えば、ブラウザひとつでアイデアを即座に動く形にできることがお分かりいただけたかと思います。

特に以下の点で、開発者にとって強力な武器になると感じました。

• 検証サイクルの高速化：コード生成→即実行のループが爆速で回せる
• 環境構築不要：ブラウザさえあれば、どこでも開発・確認ができる
• 最新モデルの活用：Geminiの高性能な推論能力をフルに活かせる

「コードを書く」だけでなく「コードを動かして確認する」手間までAIが肩代わりしてくれる時代になりました。この爆速開発体験、まだの方はぜひ一度体験してみてください。