ChatGPTでコードレビューを自動化する｜プロンプト設計で精度を劇的に上げる方法

#ChatGPT #コードレビュー #プロンプト設計 #効率化 #品質管理
C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「ChatGPTでコードレビューを自動化する方法」について、現場での実践的なテクニックをお話しします。

コードレビューがAIに向く理由と僕の失敗談

正直に言うと、僕も最初はChatGPTでのコードレビューには懐疑的でした。
「AIにそんなの出来るはずない」って思ってたんですよ。
でも実際に試してみたら、めっちゃ使える場面があることに気づいたんです。

コードレビューって、実は定型的なチェック項目が結構多いんですよね。
例えば以下みたいなやつです。

  • 変数名が分かりやすいか
  • 不要なコメントやコードがないか
  • パフォーマンスの問題がないか
  • セキュリティリスクがないか
  • 既存の記述ルールに統一されているか

これらって、実はAIの得意分野です。
人間のレビュアーは、こういう機械的なチェックより、設計思想やロジックの妥当性みたいな、もっと高度な観点にフォーカスできるようになるんです。

僕の失敗談としては、最初はプロンプトなしで「このコード、問題ないですか？」って聞いてました。
そしたら返ってくる指摘が、めっちゃ的外れなんですよ。
プロジェクト固有の命名規則とか、使ってるフレームワークの慣例とか、そういうのを全く考慮されていない指摘が一杯出てくるわけです。

そこからが大事で、プロンプト設計を工夫することで、ほんま精度が変わることに気づきました。

効果的なプロンプト設計の3つのポイント

ChatGPTでコードレビューの精度を上げるには、プロンプト設計が命です。
以下の3つのポイントを意識してみてください。

1. プロジェクトのコンテキストを明確に伝える

AIは文脈情報がないと、一般的な指摘しかできません。
プロンプトの冒頭で、以下の情報を必ず含めるといいですよ。

  • 使用しているフレームワーク（React、Vue、Nuxt など）
  • プロジェクト固有の命名規則
  • チーム内で大切にしているコーディング原則
  • 対象のプロジェクトフェーズ（初期段階、メンテナンスフェーズ など）

例えば、こんなふうに書き始めるといいですよ。

「当プロジェクトはReactで開発しており、ESLint + Prettierで自動フォーマットしています。命名規則として、コンポーネントはPascalCase、変数はcamelCaseを使っています。特に、パフォーマンス最適化とアクセシビリティの観点からのレビューを重視しています。」

この一文で、AIの指摘の精度がガラッと変わります。

2. 具体的なレビュー観点を指定する

「全般的に見直してください」っていうお願いは、得られる結果もふわっとしちゃいます。
逆に、具体的なチェック項目を列挙すると、精度がめっちゃ上がるんです。

例えば、こんなふうに書くといいですよ。

「以下の観点からレビューしてください: 1) 変数名の明確性、2) 関数の単一責任原則、3) 不必要な副作用の有無、4) UIの一貫性との適合性、5) バグのリスク。」

細かい観点を指定することで、AIの指摘もピンポイントになります。

3. レビュー基準の優先度をつける

すべての指摘が同じ価値ではありません。
プロンプトで優先度を明記することで、本当に大事な指摘が浮き彫りになります。

「優先度順に: 【高】セキュリティリスク、バグの可能性。【中】パフォーマンス、可読性。【低】コード整形、コメント。」

こうすることで、AIも「これは重要だな」って判断できるようになるんです。

実践的な活用例とテンプレート

実際の現場で使えるテンプレートを、一つ紹介しましょう。
これは、僕たちのチームで毎日使ってるやつです。

まず、レビュー対象のコードを貼り付ける前に、このプロンプトをChatGPTに送ります。

「【プロジェクト情報】
フレームワーク: React + TypeScript
バージョン: React 18系
使用ツール: Vite, Vitest, Storybook

【コーディング規約】
– コンポーネント名: PascalCase
– Hook名: useから始まるcamelCase
– その他変数・関数: camelCase
– ファイル構造: /src/components/[ComponentName]/[ComponentName].tsx

【レビュー優先度】
【必須チェック】セキュリティリスク、TypeScriptの型安全性、メモリリーク、無限ループ
【推奨チェック】パフォーマンス（不要な再レンダリング、useCallbackの必要性）、アクセシビリティ
【参考】コード整形の微調整、ドキュメント

以降、このコンテキストでコードレビューを行ってください。指摘は『理由』と『改善案』をセットで提示してください。」

この前置きをしておいてから、実際のコードを貼り付けます。
すると、AIの返答がめっちゃ的確になるんですよ。

例えば、こんなコードをレビューしてもらうとしましょう。

const UserCard = ({ userId }: { userId: string }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(/api/users/${userId})
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  if (!user) return <div>Loading...</div>;

  return <div>{user.name}</div>;
};

プロンプトなしだと