生成AIを使ったコードレビューで定性的に品質カバー

2026/02/01にnishinomiya.devで登壇しました

Transcript

1. 生成AIを使ったコードレビューで 定性的に品質カバー 岡本千秋(@chiilog) 1
2. 今日話すこと 1. 導入した経緯 2. 使用ツールの紹介 3. CodeRabbitの好きなところ 4. AIが見つけた問題の具体例(3つ) 5. 複数AIツール併用の効果 6. 定性的な品質カバー領域 7. 人間が集中すべき領域 2
3. 岡本千秋 フロントエンドエンジニア Github: @chiilog X: @chiilogweb Zenn: https://zenn.dev/chiilog 3
4. 導入した経緯 AIコーディング時代の課題 Claude Code や Cursor で コードを書かせる ↓ 大量のコードが生成される ↓ レビューが大変になる 4
5. 「一次レビューもAIにやらせたらいいんでは?」 5
6. やってみた結果 AIが書いたコードをAIがレビュー(AI × AI) 人間は最終判断に集中できる 思った以上に細かいところまで見てくれる 6
7. AIレビューツール ツール 特徴 CodeRabbit GitHub / GitLab / Azure / Bitbucket 対応 2クリックでインストール、無料で始められる 2M リポジトリ、13M PRで利用実績 Gemini Code Assist Google の AI コードレビューツール 設計の妥当性評価、リファクタリング提案 7
8. レビューを受けてClaude Codeが修正 ワークフロー Claude Code でコードを生成 ↓ PRを作成 ↓ CodeRabbit & Gemini がレビュー ↓ Claude Code が指摘を受けて修正 ↓ AI × AI で品質向上 8
9. 特徴 GitHub Actions経由でレビュー結果を取得 型の整合性チェック、コンパイルエラー検出にも対応 9
10. ここが好きだよCodeRabbit ① PRサマリー自動生成 大規模PRでも全体像を一瞬で把握できる 自動生成される内容（抜粋） Walkthrough - 変更内容の概要説明 シーケンス図 - 処理フローをMermaid形式で可視化 関連PRの自動リンク - コンテキスト把握が楽 10
11. ここが好きだよCodeRabbit ② 学習してくれる レビューコメントに返信してフィードバックを入れると、今後の レビューに反映してくれる CodeRabbit: 「この書き方は推奨されません」 ↓ 私: 「このプロジェクトの方針ではこのスタイルを採用しています」 ↓ CodeRabbit: プロジェクト固有のルールを学習して、次回から反映 11
12. 具体例①:型安全性の指摘 PR #118: 質問テンプレート機能とプレビュー機能を実装 問題 vi.fn() が暗黙の any 型 // Before const mockApplyTemplate = vi.fn(); // After(CodeRabbit提案) type UseTemplateAPI = ReturnType<typeof useTemplate>; const mockApplyTemplate = vi.fn<UseTemplateAPI['applyTemplate']>(); 12
13. 具体例①の学び TypeScriptの型安全性をテストコードでも維持 プロダクションコードだけでなく、テストコードでも型チェック 暗黙の any 型を許さない姿勢 Committable suggestionでワンクリック修正可能 レビューコメントからそのまま適用できる 修正の手間が最小限 13
14. 具体例②:テストと実装の不一致検出 CodeRabbitの指摘 このテストは setAnalyticsConsent (useAnalytics)を前提に していますが、実装側は useCookieConsent の setConsent を 直接呼び出しています。モックの不一致によりテストが実装を 正しく検証できていません。 14
15. 具体例②のコード // Before: モックが実装と不一致 vi.mock('../hooks/useCookieConsent', () => ({ useCookieConsent: vi.fn(() => ({ setConsent: vi.fn(), // 外から参照できない })), })); // After: 外部から参照可能 const setConsentMock = vi.fn(); vi.mock('../hooks/useCookieConsent', () => ({ useCookieConsent: vi.fn(() => ({ setConsent: setConsentMock, })), })); 15
16. ポイント 人間のレビューでも見落としがちなモック設計ミスを検出 テストコードと実装コードの整合性をチェック モック関数が外部から参照できないという設計ミスを指摘 テストが「通るけど意味がない」状態を防ぐ 16
17. 具体例③:GA4二重カウント問題 CodeRabbitの指摘 gtag('config', measurementId) は既定で page_view を 送信します。本実装は手動で page_view イベントも発行している ため、二重カウントの可能性があります。 17
18. 具体例③のコード // 問題のコード window.gtag('config', measurementId, { anonymize_ip: true, cookie_expires: 60 * 60 * 24 * 30, }); // 修正 window.gtag('config', measurementId, { anonymize_ip: true, cookie_expires: 60 * 60 * 24 * 30, send_page_view: false, // 追加 }); 18
19. 具体例③の学び 外部サービス(GA4)のベストプラクティスを把握している GA4のデフォルト動作を理解した上で指摘 計測データの品質に影響する問題を事前検出 ドキュメントを読まないと気づきにくい問題を指摘 19
20. 2つのAI、レビュー観点が違う 観点 CodeRabbit Gemini 焦点 エッジケース処理・堅牢性 設計品質・保守性 スタイル 具体的な技術提案 高レベル評価 + 提案 ポイント 異なる軸でレビューするので、併用すると多角的に品質が上がる！ 20
21. 「なんか違うな」と思ったらコメントする 黙って直すと、レビュワーの知見が貯まらない。 コメントからさらにブラッシュアップしたいとか聞きたいとかの ときは、Claude Codeに聞かずにレビュワーたちに聞く。 21
22. 定性的な品質カバー領域 観点 検出例 型安全性 any 型の暗黙的使用 テスト品質 モック設計ミス、テスト/実装の不一致 外部サービス連携 GA4二重カウント、ベストプラクティス → これらをAIが自動でカバー 22
23. 人間のレビュワーが集中すべき領域 AIが定型チェックを自動化することで、人間は以下に集中できる: 1. ビジネスロジックの妥当性 — 要件を満たしているか 2. アーキテクチャ設計の判断 — 将来の拡張に対応できるか 3. UX/UIの観点 — ユーザー体験として適切か 4. 深いセキュリティ検証 — 攻撃ベクトルの考慮 5. チーム文化・コーディング規約 — プロジェクト固有のルール 23
24. まとめ 1. CodeRabbitは定性的な品質観点を自動でカバー 型安全性・テスト品質・外部サービス連携など 2. 複数AIツールの併用で多層防御 各ツールが異なる観点で問題を検出 3. 人間のレビュワーは高次の判断に集中 ビジネスロジック・アーキテクチャ設計 24