コードレビューをゲーム化しました

Posted at 2025-11-15

生成AIによるコーディング増加に伴って、コードレビューに注目が集まっています。CodeRabbitは、AIコードレビューを提供していますが、まさにその追い風に乗っています。

そんなコードレビューですが、適切に指摘できると確信を持って言える人は、そう多くないのではないでしょうか。適切なコードレビューは要件を把握し、コードに書かれていない部分も含めて指摘できないといけません。

そこで、コードレビューを簡易的に体験できるゲームを作ってみました。

ゲームについて

URLはこちらです。

現在はFlutter/JavaScript/Pythonを用意しています。言語は日本語と英語に対応しています。

現在は各言語ごとにレベル1〜3まで用意されています。レビュー画面では以下の3つの情報が出ています。

この3つの情報を把握しつつ、その言語のベストプラクティスに沿ってレビューを記述します。

要件をクリックすると、Markdownの見出しが入力されます。また、コードをクリックすると、その行番号が入力されます。

レビューの評価基準があらかじめ用意されています。その評価基準と、実際に入力されたレビュー内容とをGemini APIで比較しています。そして、スコア・良い点・改善点などをJSONで受け取っています。

70点以上を取ると、次のレベルがアンロックされます。

自分のレビュー結果はXで共有できます。評価内容のJSONをCloudflare KVに保存しています。また、OGP画像を生成して、それをClaudeflare R2に保存しています。

このアプリ自体では特に認証機能などはないので、共有で生成されるURLはUUIDで生成したものです。URLが分かれば誰でもアクセスできます（個人情報もないし、Xでシェアする前提なので問題ないですが）。

今回はClaudeflareべったりです。

AI周りはコーディングがClaude Code on the web、レビューの評価にGemini APIを利用しています。

今回はClaude Code on the webがクーポンを出してくれていたので、使ってみました。1,000ドル→936ドルなので、64ドル（約1万円？）でできあがったようです。

プルリクエストのレビューはCodeRabbitで行っています。

1度だけ開発が収束せずに、ブランチを破棄しました。あとはPR作成→ドキュメント→レビュー→開発→レビューの繰り返しなので、60〜64ドルの間で収まっていると思います。

GitHub Actions版と同じですが、クラウド側で実行できるのが便利です。指示を出せば、あとはPCを閉じていてもコーディングが続いています。PR作成の直前まで進めてくれるので、開発が一段落したらPRを作成してローカルにfetchして確認すると言った具合です。

本当はPlaywrightなどを使ってE2Eまで行ってからPRを作成してほしいのですが、クラウド側の環境ではできないようです。そういったテストはローカルで行うことになって、うまく動作せずにストレスが溜まります（動かない状態でCodeRabbitのレビューが走ったりするので）。

スペック駆動で開発する限り、大きな問題はなさそうです（今回のような小さなものであれば）。

もともとFlutterKaigiのブース訪問者に遊んでもらおうと思って即席で作ったのですが、スマホで遊ぶには厳しい（自由入力が必要など）仕様です。PCのブラウザでちゃんと構えないと遊べないのが根本的な問題です。

とはいえ、生成AIでも十分遊べるレベルのゲームが2日弱で簡単に作れたのは良かったです。コードレビューの練習にもなる（と思う）ので、ぜひ遊んでみてください！

コードはこちらで公開しています。