最近話題の「バイブコーディング」を試してみたくて、GeminiのCanvasを使ってブラウザゲームを作ってみました。今回はその体験をQiita記事としてまとめます。
🧪 やってみたこと
テーマは「ちょっとカオスなテトリス」。
通常のテトリスに以下の要素を加えました。
- 一定時間でミノが爆発する
- 上からランダムにミノが降ってくる（NPC的なやつ）
- スマホでも操作できるようにタッチ操作対応
いわゆる「考えるより先に作る」スタイル、いわゆるバイブコーディングです。
🧾 使ったプロンプト
実際に投げたプロンプトはこんな感じです。
1. 一定時間でミノが爆発し、上からランダムにミノが振ってくるテトリス
2. スマホはタッチでテトリミノ操作できるようにして
かなりシンプルです。
細かい仕様は詰めず、「とりあえず動くものを出してもらう」ことを優先しました。
🎮 実際にできたもの
- HTML + Canvas + JavaScriptで構成されたブラウザゲーム
- タッチ操作・キーボード操作どちらにも対応
- 爆発エフェクトやパーティクルもそれっぽく実装
正直、「ここまで出るのか」という驚きはありました。おもしろいですね。
⚠️ 課題
ただし、触ってみるといくつか問題も見えてきました。
1. 突然ゲームオーバーになる
- お邪魔ミノの挙動や当たり判定の関係で、理不尽に終わることがある
2. ルールが視覚的に伝わりづらい
- 爆発すること自体は分かるが、「いつ爆発するのか」が直感的に分かりにくい
3. 思ったコンセプトにまだ届いていない
- 「カオスで楽しい」よりも「理不尽でよく分からない」に寄っている印象
🔧 今後の方針
このままバイブで進めるのではなく、一度立ち止まって整理します。
- 設計書を起こす
- バグ修正（特にゲームオーバー周り）
- コンセプトが実現できているか再確認
- テストをちゃんとやる
🤔 反省
実は以前、別の記事で「AI駆動開発は出力ガチャになりがち」と批判したことがあります。
https://qiita.com/K_san0219/items/7560c513b7cd88b19411
……が、今回まさに自分がそれをやっていました。
- プロンプトは雑
- 出てきたものに対して後付けで調整
- なぜそうなったかの理解は浅い
完全に「ガチャを回している状態」です。
🧭 次に活かすこと
次回以降バイブコーディングをするなら、以下を意識したいです。
- 最初にプロンプト設計をしっかり考える
- 「どういう体験を作りたいか」を言語化する
- AIに丸投げではなく、意図を持って使う
✨ まとめ
バイブコーディングは確かに楽しいし、スピードも出ます。
ただし、
何を作りたいかが曖昧なままだと、結果も曖昧になる
という当たり前のことを改めて実感しました。
とはいえ、「とりあえず形にする」という用途ではかなり強力です。
今後は「ノリ」と「設計」のバランスを取りながら使っていきたいと思います。
ここまで読んでいただきありがとうございました 🙌
ソースコード等を掲載したリポジトリはこちら：
https://github.com/Ksan260307/Explosion-Tetris