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

残り 29 分

この Codelab について

最終更新: 5月 13, 2025

作成者: Riccardo Carlesso

1. はじめに

2025 年 3 月 25 日、Google は Gemini 2.5 をリリースしました。このリリースで最も印象に残ったのは、すべてのユーザーが「高度なコーディング」機能を試すことができる点でした [動画]。

この Codelab では、一般的なプロンプトから始め、好みに合わせてカスタマイズして、シンプルな子供向けアプリを「雰囲気重視でコーディング」する方法を学びます。アプリは p5.js でテストします。最後に、これらの変更を Firebase Hosting にプッシュします。この際、スタック全体が現在無料です。

学習内容

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

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

この Codelab がお役に立ちましたら、ぜひ 🔥 Firebase Studio もご覧ください。洗練された統合されたビビッドコーディング体験を提供します。

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 でゲームをテストする

では、ゲームをテストしましょう。

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

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

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

コードが機能するか、機能しないかの 2 つの結果が考えられます。それぞれのケースに応じて手順を実施します。

コードが失敗する
コードが 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 Chat をブックマークしておくと便利です。名前を「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 を使用しますが、他の IDE でも構いません。

ローカル環境を設定する

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

設定スクリプトは説明のみを目的としています。フォルダとファイルを作成することで、手動でこの作業を行うことができます。

# 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 チャットの固定リンクをここに配置できます。アプリがリリースされたら、ここにアプリのランディングページを配置します。
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: ..] まで移動し、SPACE キーを押してから ENTER キーを押します。（なぜこれは複数選択なので、選択して次のページに移動する必要があります）。
[ステップ 2] 既存のプロジェクトを選択するか（オプション 1）、新しいプロジェクトを作成します（オプション 2）。

注: 既存の Cloud プロジェクトが Firebase プロジェクトではない場合があります。Firebase プロジェクトは GCP プロジェクトのサブセットです。Firebase プロジェクトにするには追加作業が必要です。そのために（オプション 3）があります。
まだ決めていない場合は、[新しいプロジェクトを作成] を使用して、「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 キーを押します - いいえ

[ステップ 7] ? File public/index.html already exists. Overwrite? (y/N)
Enter キーを押します（いいえ）。
警告: 上書きすると、新しい index.html が p5js と互換しなくなります。

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

これらの操作により、次のファイルが作成されます。

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

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

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

ローカルテスト

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

そのためには、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 つのアプローチを組み合わせることもできます。

モバイル機能

作成するゲームによっては、ユーザーとのやり取りが必要になる場合があります。この操作にキーボードは必要ですか？または、画面をタップするだけで使用できますか（モバイルなど）？プロンプトでこの点を明確にしてください。キーボードにボタンを作成しなければならない場合があります（テトリス 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 の魅力を把握し、今後の作成に役立てるために使用します。

もっと知りたい

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

Gemini 2.5 と p5.js を使って 1 週間で 5 つの子供向けゲームをコーディングするこの記事では、6 つの例を使って、ゲームのバイブコーディングの考え方について説明します。
palladius/genai-googlecloud-scripts（10 個ほどのアプリ（コードとプロンプト）を含む GitHub リポジトリ）: テトリス、パックマン、コネクト 4、懐かしの Rogue のクローンも！ここに、これらのゲームのすべてのプロンプトが含まれています。お気に入りの曲を選んで、プロンプトをアレンジして、気分を高めましょう。

ここまでの作業が大変に感じられる場合は、Firebase Studio を試してみるのもおすすめです。アイデア > プロンプト > コード > アプリのループがすべて 1 つのブラウザウィンドウに含まれています。