🚀

AIコードレビューサービス『DevReel』をBeta公開しました

に公開
AI
個人開発
コードレビュー
tech

はじめに

こんにちは、個人開発をしているソフトウェアエンジニアのGiotaです。

普段業務でコードを書いているとき、こんな風に思うことはありませんか？

「動くけど、この実装で本当にいいのかな？」
「もっと良い書き方がある気がするけど、今の知識だとこれ以上思いつかない…」

チーム開発であればテックリードや同僚にレビューしてもらえますが、独学中や個人開発、あるいは「ちょっとした書き捨てスクリプト」の場合、フィードバックを得る機会はなかなかありません。

そこで今回、「Googleのシニアエンジニア級のAIが、自分のコードをボコボコにレビューしてくれる環境」 を作ってみました。

名前は 「DevReel（デブリール）」 です。

作ったもの：DevReel (Beta)

まずは実際に動いているものをご覧ください。

DevReel - Engineering Skill Gym
https://www.devreel.tech/

どんなサービス？

一言でいうと、「リファクタリングやバグ修正の実践練習ができるジム」 です。

  1. リアルな課題: 「Reactの不要な再レンダリングを直せ」「Goの並行処理バグを修正せよ」といった、現場に近いシナリオを選びます。
  2. コーディング: ブラウザ上のエディタでコードを修正します。
  3. AI採点: ボタンを押すと、数秒でAIがコードを解析し、「機能性」「可読性」「保守性」「パフォーマンス」「セキュリティ」 の5軸で評価してくれます。

ただの正誤判定（Pass/Fail）ではなく、「ここをこう直すとメモリ効率が良くなるよ」 といった具体的なフィードバックが返ってくるのが特徴です。

技術スタック

個人開発なので、開発スピードとコストパフォーマンス（無料枠の活用）を最優先に選定しました。

  • Frontend: Next.js (App Router)
  • Backend / Auth: Supabase
  • AI Model: Gemini 2.0 Flash
  • AI SDK: Vercel AI SDK
  • Deploy: Vercel

なぜ Gemini 2.0 Flash なのか？

最初はいくつかのモデルを検討していましたが、最終的に Gemini 2.0 Flash を採用しました。理由は2つあります。

  1. 圧倒的なコストパフォーマンス: 個人開発で無料で公開するためには、APIコストは死活問題です。Gemini 2.0 Flash は高性能ながら非常に安価（無料枠も大きい）です。
  2. コード解析の速度: ユーザーが「Submit」を押してから結果が出るまでのレイテンシが非常に短く、サクサク学習を進められます。

こだわったポイント

1. AIに「辛口レビュアー」になってもらう

普通にAIに「コードをレビューして」と頼むと、「素晴らしいコードですね！でも強いて言えば…」と優しく返されがちです。
しかし、これでは成長につながりません。

そこでシステムプロンプト（AIへの指令）を調整し、「あなたはGoogleの厳格なテックリードです。お世辞は不要。セキュリティリスクやパフォーマンスの懸念があれば容赦なく指摘してください」 という人格を与えました。

その結果、動くコードであっても「可読性が低い」「N+1問題の可能性がある」と容赦なく減点される、"ガチ"なレビュー環境が完成しました。

2. スキルの可視化（レーダーチャート）

エンジニアのスキルは「書ける/書けない」の0か1かではありません。
「動くけど汚いコード」もあれば、「綺麗だけど遅いコード」もあります。

DevReelでは、AIの評価を以下の5つのパラメータに分解して保存しています。

  • Functionality（機能性）
  • Readability（可読性）
  • Performance（パフォーマンス）
  • Security（セキュリティ）
  • Modern Syntax（モダンな構文）

これを recharts を使ってレーダーチャート化することで、**「自分はセキュリティ意識が低いな」「可読性は高いな」**といった傾向がわかるようにしました。

苦労した点：AIからの JSON レスポンスの扱い

Vercel AI SDK には便利な機能が多いですが、今回はシンプルに generateText を使用して、AIの回答を一括で受け取る（Awaitする）実装にしました。

苦労したのは、「AIが生成するJSONの揺らぎ」 への対応です。
Gemini は優秀ですが、JSON形式で返すように指示しても、親切心からか以下のようなマークダウン記法を含めて返してくることが多々あります。

{
  "score": 80,
  ...
}

これをそのまま JSON.parse() するとエラーになってしまいます。
そのため、レスポンスからマークダウン記法を正規表現で除去し、純粋なJSON部分だけを抽出するロジックを実装しました。

また、今回はあえて zod などのバリデーションライブラリは導入せず、必要なプロパティが存在するかをチェックするシンプルな実装で軽量化を図っています。
AIの出力をアプリケーションで使える形に整形する「繋ぎこみ」の部分が、地味ながら一番泥臭い作業でした。

おわりに

これからの時代、AIがコードを書くことは当たり前になっていくと思います。
そうなると、人間のエンジニアに求められるのは「ゼロから書く力」以上に、「AIが書いたコードの良し悪しを判断する力（レビュー力・目利き力）」 になっていくのではないでしょうか。

DevReel は、そんな「AI時代のエンジニアの基礎体力」を鍛える場所になればいいなと思って作りました。

現在は Beta版として無料公開中 です。
登録不要で試せるシナリオもあるので、日曜日の朝活や、ちょっとした暇つぶしに遊んでみてください！

フィードバックや「こんなシナリオが欲しい！」という要望があれば、コメントやXでいただけると嬉しいです。

DevReel - Engineering Skill Gym
https://www.devreel.tech/

この記事は個人開発の一環として執筆しました。もし面白かったら「いいね」もらえると開発の励みになります！

Discussion