先日、コードレビューをゲーム化した「Code Review Game」を公開したのですが、今回はコードのバグを探す「Bug Sniper」というゲームを作りました。
Code Review Gameは元々、カンファレンスブースなどで、参加者の方に遊んでもらうために作っていたのですが、割とガチでレビューしないといけないものになってしまっていました。これはこれで、コードレビューについて学ぶという点においては良かったのですが、PC前提になっている点も含め、もっとカジュアルに遊べるものが欲しいなと思い、Bug Sniperを作りました。
Bug Sniperの遊び方
Bug Sniperは、60秒間コードのバグを見つけ続けるゲームです。1つの問題の中には、1〜2個程度のバグが含まれています。
例えば、以下のようなコードです。
function getLastElement(arr) {
// Initialize variables
const index = arr.length;
return arr[index];
}
これは、関数名が getLastElement であるにもかかわらず、配列の最後の要素を正しく取得できていないバグが含まれています。正しくは const index = arr.length - 1; とする必要があります。
こんな感じの問題がレベル1〜3まで用意されています。問題はランダムで出てきます。連続正解すると、コンボでスコアが上がります。ミスすると -1 点されます。正解、またはミスしたあとはその問題をスキップできます。
完了時
60秒経つと自動的に終了します。終了時には、以下のような画面が表示されます。ここではCloudflare D1に結果を保存しています。
結果を保存できたら、名前の保存とLLMによる評価が得られます。
LLMの評価例です。ちょっとイマイチかも。
結果をシェアすると、こんな感じでOGP画像も生成されます。
コードのバグを発見するゲーム、Bug SniperのJavaScriptで33点を獲得しました！（正解率：83.3%）https://t.co/AsmJk0aUa3
— Atsushi@MOONGIFT 🌔🎁、DevRel/Tokyo、CodeRabbit 🐰 (@goofmint) November 23, 2025
Developed with #CodeRabbit
アーキテクチャ
今回もCloudflareにべったりです。以下を利用しています。
- Cloudflare Workers
- React Router + TailwindCSS でフロントエンド
- Cloudflare R2
- OGP画像保存用
- Cloudflare D1
- ランキング用
結果を評価してくれるLLMはGemini 2.5-Flashを使っています。
サポートされている言語
現時点では、以下の言語がサポートされています。
- JavaScript
- Python
- PHP
- Ruby
- Java
- Dart
不具合の説明
正しい不具合を発見すると、トーストで以下のような説明が表示されます。
実際のゲーム中にはこれを読んでいる暇はないかもしれませんが、勘でクリックした際には参考になると思います。
ランキング
前回のCode Review Gameにはなかったランキング機能を追加しました。直近、1週間のランキングが出ます。すべて、または言語ごとにランキングを表示できます。
開発について
今回もClaude Code on the webを使って開発しました。元々の1,000ドルのクーポンを使いつつ、結果的に前回と同じく60ドルくらいを消費したと思います（現在は表示がなくなったので、いくら使ったかは正確にはわかりません）。
生成されたコードのレビューはいつも通りCodeRabbitで行っています。CodeRabbitは、オープンなリポジトリであれば無料で使えるので、個人開発のお供にぴったりです。
プルリクエストの例は以下。レビューする言語（日英など）は設定で変更できます。
実況者向け
先日のCode Review Gameについて、丁寧に配信実況の許可を求めてくださった方がいたので。Bug Sniperにそういった方がいるかは分かりませんが、あらかじめ書いておきます。
- 配信実況はご自由にお願いします
- 収益化もご自由にどうぞ
- もしよければ、X宛に教えてもらえると嬉しいです
- CodeRabbitについてちょっとでも触れてくれるともっと嬉しいです
まとめ
Bug Sniperは、今後CodeRabbitでブース出展する際などに、参加者の方に遊んでもらう予定です。Code Review Gameよりもカジュアルに遊べるので、ぜひ試してみてください。