Google AI Studio で Gemini を使用してバイブコーディングを行う

1. 概要

この Codelab では、音楽プレーヤーが統合されたレトロなスネークゲーム「Snake & Beats」ウェブアプリケーションを作成します。Gemini を使用してネオン風の単一ファイル React アプリケーションを生成し、バージョン管理して Cloud Run にデプロイします。

演習内容

Build & Prompt: Google AI Studio の「Build」モードを使用して、1 つのプロンプトから動作するゲームを生成します。
システム指示で調整する: 今後の編集のために永続的なペルソナを設定して、AI の「感覚によるチェック」を行います。
GitHub に保存: AI Studio から直接新しいリポジトリをブートストラップします。
Cloud Run にデプロイ: ワンクリックでゲームを Google Cloud Run にリリースします。

学習内容

Google AI Studio のビルドモードを使用してアプリのプロトタイプを迅速に作成する方法。
システム指示を使用して、イテレーション中に一貫した「コーディングの雰囲気」を維持する方法。
Google AI Studio を GitHub と Cloud Run に接続する方法。

必要なもの

Chrome ウェブブラウザ
Gmail アカウント
課金が有効になっている Cloud プロジェクト
Gemini API キー
GitHub アカウント

2. 始める前に

Google Cloud コンソールのプロジェクト選択ページで、Google Cloud プロジェクトを選択または作成します。
Cloud プロジェクトに対して課金が有効になっていることを確認します。詳しくは、プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。

3. ビルドとプロンプト（コア）

まず、アプリケーション全体を一度に構築します。Google AI Studio にログインし、ビルドインターフェースにいることを確認します。

ビルドプロンプトを入力する: 次の詳細なプロンプトをチャットボックスに貼り付けます。

Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.

モデルを選択: 右側の設定パネルで、コード生成を最速で行うために Gemini 3.0 Pro（または最新のプレビュー版モデル）が選択されていることを確認します。
実行: ビルド をクリックします（または Cmd + Enter キーを押します）。
プレビュー: Gemini がコードを生成し、通常は右側にライブプレビューが表示されます（下図を参照）。

4. アノテーション、画像、音声で絞り込む

視覚的な変更を言葉で説明するのは難しい場合があります。アノテーションモードでは、アプリのプレビューに描画して、ビジョンを瞬時に伝えることができます。

アノテーションモードを使用する

アノテーションモードを有効にする: AI Studio のインターフェースで（プレビューウィンドウの左側のサイドパネルまたは下部のツールバーを確認）、アノテーションツールまたは調整ツールを選択します。

アプリをマークアップする:

描画: ボックスツールを使用して、スコアカウンターの周りに長方形を描画します。
コメント: ボックスに「このフォントを大きくして、デジタルでグリッチ風にしてください」というプロンプトを入力します。
スケッチ: 矢印ツールを使用して、再生/一時停止ボタンを指します。
コメント: 「これらのアイコンを光るネオンアイコンに変更してください。」

反復: [チャットに追加] をクリックし、[プロンプトを送信] をクリックします。Gemini は、視覚的なマークとテキストコマンドを解釈してコードを更新します。
確認: プレビューアップデートをライブで確認します。これで、ビジュアルフィードバックがコードに反映されます。

音声入力（The Spoken Vibe）

「雰囲気」は、書くよりも口で言う方が簡単な場合があります。

アクション: 入力バー（+ ボタンの横）にあるマイクアイコンをクリックします。

「ヘイ、蛇のアニメーションが遅すぎる。スピードを上げて、尾が光る軌跡を残すようにして。」
送信: Gemini が音声をテキストに変換し、変更を適用します。

5. システム指示を設定して再構築する

通常のプロンプトとは異なり、システム指示はセッション全体で保持されます。コーディング標準、命名規則、変更すべきでない特定のビジュアルペルソナを定義するのに最適な場所です。

[Open Advanced Settings]: Google AI Studio インターフェース（ビルドモード）で、[System Instructions] ボックスを探します。表示されていない場合は、チャットパネルの上部または横にある [設定]（歯車アイコン）または [詳細設定] をクリックします。

「雰囲気」の指示を追加する: 次の指示をテキストボックスに貼り付けます。これは、ゲームの「グリッチアート」ペルソナを定義します。

You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.

変更のトリガー: システム指示を変更しても、コードは自動的に書き換えられません。Gemini にこれらの新しいルールを適用するよう指示する必要があります。

設定パネルを閉じます。
[Chat/Prompt] 入力に「Rebuild the application UI to strictly follow the new System Instructions.」と入力します。
[実行 / 送信] をクリックします。

更新を確認する: Gemini が変更を認識します。

6. GitHub に保存する

ファイルをダウンロードしてコマンドラインを操作する代わりに、組み込みの GitHub 統合を使用してリポジトリを瞬時にブートストラップします。

統合を見つける: Google AI Studio インターフェースの上部ツールバーで、[ダウンロード] アイコンと [デプロイ] アイコンの間にある GitHub アイコンを探します。

Connect Your Account（アカウントを接続）: アイコンをクリックします。初めての場合は、Google AI Studio が GitHub アカウントにアクセスすることを承認するよう求められます。
リポジトリを作成する: [Fill out the information below to create your repo] というタイトルのダイアログボックスが表示されます。

リポジトリ名: 名前を入力します（例: 「React を使用して AI で生成されたスネークゲーム」）。
リポジトリの説明: リポジトリの説明を入力します。
公開設定: [公開]（簡単に共有できるようにするため）または [非公開] を選択します。
GitHub に push: [Git リポジトリを作成] ボタンをクリックします。

7. Cloud Run にデプロイする

アプリケーションの準備が整い、GitHub に保存されたので、Cloud Run にデプロイしましょう。

デプロイを開始: 下のハイライト表示されたボタンをクリックします。このボタンは、AI Studio ページの右上にあります。

プロジェクトを選択: [クラウドプロジェクトを選択] プルダウンをクリックし、プルダウンからプロジェクトを選択します。

トラブルシューティング: プルダウンでプロジェクトが見つからない場合は、[プロジェクトをインポート] をクリックし、[プロジェクトをインポート] ペインでプロジェクトを選択します。
課金の確認: プロジェクトを選択すると、プロジェクトで課金が有効になっていることが確認されます。「始める前に」セクションで請求先アカウントをプロジェクトに関連付けたため、この確認は自動的に完了します。
デプロイ: [アプリをデプロイ] ボタンをクリックし、アプリケーションが Cloud Run にデプロイされるまで待ちます。注: Cloud Run サービス名は自動的に生成されます。
デプロイは数分で完了し、アプリの URL が表示されます。URL をクリックすると、デプロイされたウェブアプリケーションがインターネット上でライブ表示されます。

8. クリーンアップ

この投稿で使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の操作を行います。

Google Cloud コンソールで、[リソースの管理] ページに移動します。
プロジェクトリストで、削除するプロジェクトを選択し、[削除] をクリックします。
ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

9. 完了

おめでとうございます！AI Studio でアプリケーションのバイブコーディングを行い、Cloud Run にデプロイできました。

AI Studio は、アプリケーションの開発とテストに最適なプラットフォームです。ユーザーは、設計をすぐに可視化して動作を確認できます。

AI Studio と Cloud Run のシームレスな統合により、ユーザーはアプリケーションを Google Cloud に簡単に直接デプロイできます。Cloud Run を利用すると、サーバーレス環境のすべてのメリットを享受でき、インフラストラクチャ管理の複雑さとオーバーヘッドが抽象化されます。