「VibeCoding」という言葉をよく見るようになりました。
AIに対して細かく設計するのではなく、雰囲気（Vibe）で開発を進めるスタイルです。
今回、実際にAIと対話しながら ノリ（Vibe）でブラウザ版テトリス風ゲームを作ってみました。
結果としては
- 仕様書作成
- 実装
- バグ修正
- 機能改善
までAIと対話しながら進めることができました。
この記事ではその一連の流れを紹介します。
今回やったこと
AIに対して、最初にこう依頼しました。
ブラウザ上で動作するゲームを作りたいです。
テトリス風のブラウザゲームを考えています。
高品質のゲームにするために、まずは漏れがないように詳しく仕様書を作成してほしいです。
全ての判断を任せるので、質問はせずに仕様書を作り上げてください。
ポイントは
「全部任せる」
という指示です。
AIが作った仕様書
AIはまず テトリス風の詳細仕様書を作成しました。
内容はかなり本格的で、
コアシステム
- 10×20フィールド
- 7種類のブロック（棒状、正方形、T字型、S字型、Z字型、逆L型、L字型）
- SRS回転システム
- 7-Bag生成システム
- ゴーストピース表示
- ホールド機能
ゲームモード
- Marathon（無限モード）
- Sprint（40ラインタイムアタック）
- Ultra（2分間スコアアタック）
スコアリング
- Single / Double / Triple / Tetris
- コンボシステム
- Back-to-Back
- Perfect Clear
UI
- タイトル画面
- モード選択画面
- ゲーム画面
- ポーズ画面
- ゲームオーバー画面
- 設定画面
- ハイスコア画面
など、かなり本格的な設計でした。
次は実装を依頼
続いてAIにこう依頼しました。
仕様書を元に完全版のコードを生成してください。
仕様書をしっかり確認しながら進めてください。
一つのファイルにまとめることが可能であれば
一つのファイルにしてください。
するとAIは
HTML1ファイルで動くテトリス風
を生成しました。
主な実装内容
- ブロック7種
- ゴーストピース
- ホールド
- Next6表示
- コンボ
- Back-to-Back
- Perfect Clear
- LocalStorageによるハイスコア保存
など、かなり完成度の高い内容でした。
実際に動かしてみた
ブラウザで開くだけでプレイできます。
ここでいくつか問題が見つかりました。
問題① Sprintモードで画面が揺れる
Sprintモードを開始すると
画面がブルブル揺れる
現象が発生しました。
AIに相談してみます。
SPRINTモードを開始すると
画面がブルブルと左右にブレる感じが続いてしまいます。
原因を特定して修正できますか？
AIの回答
タイマー表示の数値が変わるたびに文字幅が変化し
レイアウトが再計算されていることが原因
対策として
font-variant-numeric: tabular-nums;
などを追加して
数字の幅を固定
することで問題が解決しました。
問題② 時間表示が細かすぎる
Sprintモードの時間表示が
0:45.327000
のようにマイクロ秒まで表示されていました。
そこで
ミリ秒表記まででもいいのでは？
と提案。
AIはフォーマット関数を追加し
0:45.327
という
分:秒.ミリ秒
形式に修正してくれました。
問題③ 音が鳴らない
設定画面に
音量設定
があるのですが、音が鳴りません。
AIに確認。
音量の設定がありそうですが
音が出ません。
原因はわかりますか？
回答
音声機能はUIだけ存在しており
実際の音声処理は未実装
そこで
Web Audio API
を使った音を追加。
実装された効果音
- 移動
- 回転
- ハードドロップ
- ピース固定
- ライン消去
- レベルアップ
- ゲームオーバー
- コンボ
外部ファイルなしで音を生成する仕組みでした。
問題④ ブロックが30秒くらい固まる
次に発生した問題。
ブロックが地面に着いたあと
30秒くらい次のブロックが出ない
という挙動。
AIに相談すると
ロックディレイの実装ロジックが壊れている
とのこと。
仕様では
500ms
のはずが
正しくカウントされていない
状態でした。
AIが修正したコード
lockDelayMax: 500
これで
0.5秒で次のブロックに移行
するようになりました。
VibeCodingをやってみた感想
今回の体験から感じたこと。
① AIは仕様書から作らせると強い
最初に
仕様 → 実装
の流れにしたのは良かったです。
いきなりコード生成より
圧倒的に精度が高い。
② バグ修正能力はかなり高い
今回AIが解決した問題
- UI揺れ
- 時間フォーマット
- 音声未実装
- ロックディレイ
普通に
デバッグパートナー
として優秀でした。
③ 完璧ではない
ただし
- UIだけ作って機能未実装
- 仕様と実装がズレる
などは普通に起きます。
人間のレビューは必須
です。
まとめ
今回VibeCodingでやったこと
- AIに仕様書を書かせる
- 仕様書から実装させる
- 実際に動かす
- 問題をAIに相談する
- 改善していく
これだけで
ブラウザ版テトリス風
が完成しました。
VibeCodingは
- プロトタイプ開発
- 学習
- 個人プロジェクト
にはかなり向いていると感じました。
今後は
- Claude
- Copilot
- ChatGPT
- Gemini
など複数AIを組み合わせると面白そうです。
もし需要があれば次回は
- AIだけでどこまでゲームを作れるか
- 人間がどこで介入するべきか
あたりも検証してみようと思います。