Gemini で子供向けゲームを Vibe-code して、Firebase で公開する

1. はじめに

2025 年 3 月 25 日、Google は Gemini 2.5 をリリースしました。このリリースの最も印象的な点の 1 つは、誰もが「高度なコーディング」機能 [動画] を試せるようになったことです。

この Codelab では、一般的なプロンプトから始めて、自分の好みに合わせてカスタマイズする、シンプルな子供向けアプリの「バイブコーディング」について学びます。p5.js でアプリをテストします。最後に、これらの変更を Firebase Hosting に push します。この最も素晴らしい点は、スタック全体が現在無料であることです。

学習内容

Gemini 2.5 を使用してゲームアプリをバイブコードします。
p5js.org でコードをテストする
プロンプトやアプリをイテレーションして改善する方法。
Firebase で静的アプリケーションをホストする方法

注: この Codelab では AI 生成コードを使用しています。これは非決定的であるため、この Codelab にはガイドラインが含まれています。これは、出力が作成者にとって不明であるためです。また、このコードは本番環境では使用しないでください。

2. 前提条件

この Codelab は 2 つのフェーズに分かれています。

ウェブのみの開発。ここが一番楽しいところで、コーディングのスキルは必要ありません。このため、Gemini UI（gemini.google.com）と p5.js を使用します。
ローカルコーディング環境。ここでは、コーディング / スクリプト作成のスキルと、npm / npx のインストールと使用、vscode や IntelliJ などのローカルエディタのインストールと使用が必要です。この 2 番目の部分は省略可能です。アプリケーションを永続化して、友人や家族がモバイルやパソコンからプレイできるようにする場合にのみ必要です。

フェーズ 1 の前提条件は、ブラウザとパソコンのみです（大画面があると便利です）。フェーズ 2 については、以下をご覧ください。

Gemini UI

gemini.google.com は、最新の Gemini モデルをすべて試すことができる優れたプラットフォームです。独自の画像や動画を作成することもできます。Google マップ、ホテル、フライト、レビューなどの Google サービスとの連携機能が充実しているため、次の休暇の計画を立てるのに最適です。

ヒント: コーディングに興味がある場合は、同様のインターフェースである AI Studio もお試しください。ここでは、LLM のインタラクション（画像の作成など）のプロトタイプを作成し、ページから Python コードをすぐに取得できます。

p5.js

p5.js は、アーティスト、デザイナー、教育者など、あらゆる人がクリエイティブコーディングにアクセスして利用できるようにする、無料のオープンソース JavaScript ライブラリです。Processing 言語に基づいており、ウェブブラウザでコードを使用してインタラクティブなビジュアルコンテンツやインタラクティブなコンテンツを作成するプロセスを簡素化します。

ローカルコーディング [省略可]

アプリケーションを永続化する場合は、さらに設定が必要です。

ローカルコードエディタ（Visual Studio Code、IntelliJ など）
コードを永続化する git アカウント（github / gitlab / bitbucket）。
npm ローカルにインストールされている。ユーザー空間（npx または同等の技術経由）にあることが望ましい。

また、後で Firebase アカウントを設定します。

また、次のようなコーディングスキルも必要です。

npm パッケージをインストールする機能
ファイルシステムを操作できる（フォルダとファイルを作成できる）
git（git add、git commit、git push）とやり取りできること。

難しいと感じた場合は、LLM が役立つことを思い出してください。たとえば、「Gemini 2.0 flash」または同等のモデルを使用して、提案を取得できます。それでも難しい場合は、フェーズ 2 を完全にスキップできます。フェーズ 1 は十分にやりがいのあるものになるはずです。

3. 最初のゲームを作成しましょう。

gemini.google.com を開き、コード対応モデル（2.5 など）を選択します。この選択肢は、空き状況、費用、日付によって異なる場合があります。執筆時点では、次の選択肢が最適です。

Gemini 2.5 Flash（高速イテレーション）
Gemini 2.5 Pro（出力の改善）。

Gemini モデルの詳細については、こちらをご覧ください。

最初のゲームのプロンプト

こちらの動画でご覧いただけるように、最初のプロンプトは次のように簡単なもので構いません。

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

必要に応じて、この部分をカスタマイズしてください。

中世 / 未来 / サイバーパンクの設定
絵文字が多すぎるのか、特定の絵文字が多すぎるのか
黄色や紫色のさまざまな色合いが好き。
お子様がユニコーン、恐竜、ポケモンが好きかもしれません。

プロンプトをブラウザに貼り付けると、Gemini が思考していることがわかります。Gemini 2.5 は思考モデルであるため、時間の経過とともに変化を確認できるタスクがいくつか開始されます。変更中のプルダウンをクリックして何が起こっているかを確認することも、結果を待つこともできます。

最終的に、動作する JavaScript が作成されます。

上部のコピーボタンをクリックできるようになりました。

p5.js でゲームをテストする

それでは、ゲームをテストしてみましょう。

p5.js エディタを開きます: https://editor.p5js.org/
既存の sketch.js コードを選択して削除します。
コードを貼り付け

ページは次のようになります。

最後に、[再生] ボタンを押します。

コードが動作するか、失敗するかのいずれかになります。それぞれのケースに応じて、以下の手順に沿って対応します。

コードが失敗する
コードが 1 回で動作しました。

次の 2 つの段落で、両方の条件を管理する方法を見てみましょう。

（ケース 1）コードが失敗する

このようなエラーが表示された場合は、コピーして Gemini に貼り付けるだけで、コードの修正は彼にお任せください。

（ケース 2）コードが機能する

コードが正常に動作していれば、ページの右端にゲームが表示されます。

👏 おめでとうございます。これで最初の AI ゲームを実行できました。

注: コードがある間、アプリはブラウザでのみ動作します。アプリを家族や友人に公開する場合は、ホスティング ソリューションが必要です。幸いなことに、最適な方法があります。読み進めてください。

これで、次の章に進む準備が整いました。

さらなるイテレーション

コードを壊してしまった場合に備えて、コードをどこかに保存しておきましょう。必要に応じて、1 回だけ繰り返すことができます。たとえば、著者がスーパーマリオのダブルジャンプを気に入っている場合は、次のような内容を追加できます。

The game is great, thanks! Please allow for my character to double jump.

自由に調整できます。たとえば、スコアが高いときにキャラクター名を保存したり、難易度を上げるために時間の経過とともに速度を上げたりできます。プロンプトは英語で入力してください。

ヒント: Gemini は、適用する必要がある変更のみを提示する傾向があります（例: これは関数 XYZ の変更です）。次のように、更新されたコード全体を取得するようにプロンプトを設定することもできます。

"Please give me the entire updated code, not just the changed function"

これにより、切り取りと貼り付けが簡単になります。

注意点

Gemini とのチャットをブックマークすることもできます。たとえば、「p5js my first game」という名前に変更したり、後で参照できるように Gemini のパーマリンク（https://gemini.google.com/app/abcdef123456789 など）を書き留めておいたりできます。

4. このコードをローカルで実行してみましょう。

この時点で、次のようになっているはずです。

Gemini のブラウザウィンドウが開いており、コードがいくつか表示されている。
動作するゲームが表示された p5.js ブラウザウィンドウ
npm がインストールされているローカルコーディング環境。

この Codelab の難しい部分です。基本的なコーディングの経験が必要です。

依存関係のインストール

npm と node が見つからない場合は、nvm などのバージョンマネージャーを使用して npm をインストールすることをおすすめします。オペレーティングシステムのインストール手順に沿って操作します。

また、コーディング IDE を使用していることも前提としています。スクリーンショットと例では Visual Studio Code を使用しますが、他のものでも構いません。

ローカル環境を設定する

ここで独自のファイル構造を作成できます。

設定スクリプトは説明のために提供されています。フォルダとファイルを作成することで、手動でこれを行うことができます。

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

最終的なフォルダ構造は次のようになります。

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

この情報もこちらで確認できます。

任意のコードエディタ（code my-first-vibecoding-project/ など）を開き、editor.p5js.org のコンテンツを public/ の 3 つのファイルに貼り付けます。

README.md ← ここに Gemini Chat のパーマリンクを入れ、ここにアプリのリリース時のランディングページを入れます。
PROMPT.md ← ここに、H2 段落で区切られたすべてのプロンプトを追加します。特定のプロンプトを指定した理由を説明する場合は、プロンプトを 3 つのバッククォートで囲みます（例）。
**public/index.html** ← ここに HTML コードをコピーします
**public/sketch.js** ← ここに JS コードをコピーします
**public/style.css** ← CSS コードをここにコピーします

公開フォルダには、カスタム PNG などの追加アセットがホストされている場合があります。

5. Firebase を設定してデプロイする

Firebase を設定する（初回のみ）

マシンに npm がインストールされていることを確認します。

ターミナルで、次のいずれかを入力します（どちらでも機能します）。

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

これで、firebase コマンドを呼び出すことができるはずです。問題が発生した場合は、公開ドキュメントをご覧ください。

Firebase の初期化

このセクションでは、Firebase Hosting を設定します。これは非常にシンプルなフローですが、初めての場合は慣れるまでに時間がかかることがあります。

ファイルを含む public/ ディレクトリの直上のディレクトリにいることを確認します。リスト（ls -al または dir）には次のように表示されます。

$ ls 
PROMPT.md
README.md
public/

[ステップ 1] コンソールで「firebase init」と入力します。

カーソルを下に移動して [Hosting: ..] に合わせ、スペース キーを押してから Enter キーを押します。（なぜですか？（複数選択なので、選択して次のページに進む必要があります）
[ステップ 2] 既存のプロジェクトを選択するか（オプション 1）、新しいプロジェクトを作成します（オプション 2）。

注: 既存の Cloud プロジェクトは Firebase プロジェクトではない可能性があります。Firebase プロジェクトは GCP プロジェクトのサブセットです。Firebase プロジェクトにするには追加作業が必要です。これが（オプション 3）の目的です。
まだ決まっていない場合は、[Create a new project] を使用して、「p5js-YOURNAME-YOURAPP」（例: 「p5js-riccardo-tetris」）のような名前を追加します。

[ステップ 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
Enter キーを押します。

[ステップ 4] ? What do you want to use as your public directory? (public)
Enter キーを押します（public/ は意図的に設定しました）。

[ステップ 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
Enter キーを押します（いいえ）。

[ステップ 6] ? Set up automatic builds and deploys with GitHub? No
ENTER - NO

[ステップ 7] ? File public/index.html already exists. Overwrite? (y/N)
Enter キーを押します（いいえ）。
警告これはエラーが発生しやすい可能性があります。上書きすると、新しい index.html が p5js と互換性がなくなります。

すべてが正常に動作すると、次のように表示されます。

これらのアクションにより、いくつかのファイルが作成されます。

.firebaserc
.gitignore
firebase.json
public/404.html

特に、.firebaserc にはプロジェクト ID が含まれている必要があります。これは、cat .firebaserc | jq .projects.default -r を使用してプログラムで取得できます。

警告: index.html を確認してください。16 行より長い場合や、firebase という単語が含まれている場合は、p5js ファイルを誤って上書きしています。問題ありません。git または p5js エディタから古い index.html を取得してください。

ローカルテスト

フィードバックループのレイテンシを短縮するには、まずローカルで試してみることをおすすめします。

これを行うには、Firebase チームの強力な CLI スイートを試すことができます。次に例を示します。

$ firebase emulators:start

これにより、ポート 5000（http://127.0.0.1:5000/）でウェブサーバーが起動し、プッシュする前にローカルでテストできます。

Firebase にデプロイする

最後に、次のコマンドを実行します。

$ firebase deploy

これにより、さまざまなアクションがトリガーされます。最後の数行は次のようになります。

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

これでホスティング URL が表示されます。試してみる

デプロイが成功したにもかかわらず、空白のページが表示されたり、デプロイが破損しているように見える場合は、次の操作を行います。

ブラウザの [デベロッパーツール] を開き、エラーを見つけて、次のようなプロンプトで Gemini に修正を依頼します。

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

♾️ 繰り返す

これらの手順は、必要に応じて何度でも繰り返すことができます。結果に満足するまで、プロンプトを続行できます。

次の点に注意してください。

Gemini > p5.js > Gemini ループでは、Gemini > ローカルホスト > Cloud Run へのデプロイ > ブラウザでのアプリのテスト（更新）よりもイテレーションループがはるかに高速です。
プロンプトとコードの両方のバージョン管理に git を使用します。プロンプト N とコード N に戻れるようにすることをおすすめします。特に、バグが潜んでいる可能性があるため、プッシュするすべての sketch.js を git commit します。

一部のゲームはキーボードではうまく動作するものの、マウスやスマートフォンでのタップではうまく動作しないことがあります。コードを改善する絶好の機会です。

6. プロンプトに関するヒント

すでに多くのゲームを作成した経験から得たヒントをいくつかご紹介します。

プロンプトをバージョニングする

元のプロンプトに誤りがある可能性があります。git バージョンがある。ここでは、いくつかのコードパスがあります。

表示された内容が気に入って、後続のサブプロンプトで Gemini を使用して反復処理を行う場合は、それらをすべてどこかに記録しておくと便利です（プロンプト 1、2、3 - 3 ショットの例 1 - example2）。
prompt1 で作成されたアプリにこだわらない場合は、プロンプトを完成させてコードを破棄し、変更されたコードで再開することをおすすめします（prompt 1 v1、prompt1 v2、prompt1、v3 など）。

もちろん、この 2 つのアプローチを組み合わせることもできます。

Mobile 機能

作成するゲームによっては、ユーザーとのインタラクションが必要になることがあります。この操作にキーボードは必要ですか？それとも、画面をタップするだけで使用できますか（モバイルなど）？プロンプトでこの点を明示してください。キーボードにボタンを作成する必要がある場合があります（Tetris 3D の例を参照）。dungemoji のモバイル互換性に関する問題もご覧ください。

Gemini に直接 Javascript エラー / スクリーンショットのフィードバックを送信

Gemini は p5js とのやり取りを確認できないため、JavaScript エラーが発生した場合は Gemini に貼り付けてください。Gemini はマルチモーダルであるため、UI の変更（タイトルを小さくする、スコアを下げるなど）がある場合は、ゲームのスクリーンショットを添付することもできます。コーディングのフィードバックがこんなに楽しくなったのは初めてです。

7. 完了

🎉 これでこの Codelab は完了です。

Gemini を使用してゲームを簡単に作成する方法と、Firebase がゲームを保存して他のユーザーと共有するための簡単なホスティングソリューションを提供する方法について説明しました。

学習した内容

Gemini 2.5 でゲームを作成します。
Firebase にデプロイする

では、👥 自慢しましょう。最新のゲーム（your-project.web.app）を LinkedIn や Twitter でハッシュタグ #VibeCodeAGameWithGemini を付けて共有してみませんか（LinkedIn で作成者をタグ付けすることもできます）。この Codelab の人気度を把握し、今後このような Codelab を作成する際の参考にさせていただきます。

もっと詳しく知りたい

その他のリソースについては、以下のゲームとプロンプトをご覧ください。

週末に Gemini 2.5 と p5.js を使って子供向けのゲームを 5 つ作成しよう！この記事では、6 つの例を挙げて、ゲームのバイブコーディングの思考プロセスについて説明します。
palladius/genai-googlecloud-scripts（約 10 個のアプリを含む GitHub リポジトリ - コードとプロンプト）: テトリス、パックマン、四目並べ、さらには懐かしの Rogue クローンもあります。これには、これらのゲームのプロンプトが含まれています。お気に入りのプロンプトを選んで、プロンプトを調整して、楽しんでください。

作成できるゲームの例:

最終的なゲームは次のようになります。

3D テトリス
言語ゲーム
不正なクローン
パックマンのクローン。

英語が上限です。

🎉 コーディングをお楽しみください。