この記事は「モバイルアプリ開発における AI 活用術」の詳細記事です。
目次
- はじめに
- 使用するツールの説明
- レビューの全体像
- ローカルコードレビュー（PR 作成前）
- レビュー結果の例
- 指摘事項の修正
- PR 作成（@claude によるタイトル・説明文自動生成）
- PR 後の AI レビュー
- レビュー指摘への対応フロー
- 👤 人の判断ポイント
- 次のステップ
- 参考リンク
はじめに
TDD 実装が完了したら、コードレビューを行います。このフェーズでは PR 作成前のローカルレビュー と PR 後の AI レビュー を組み合わせて、多層的なレビュー体制を構築します。
このフェーズのゴール:
- ローカルでの AI コードレビューの実行
- 複数の AI レビューツールの使い分け
- レビュー指摘の効率的な修正
使用するツールの説明
Claude Code（ローカル）
ターミナルから直接 Claude と対話し、コードの読み書き、実行、レビューができます。
特徴:
- ローカルのファイルシステムにアクセス可能
- カスタムスキル（
~/.claude/commands/）を定義可能
📖 詳細: Claude Code ドキュメント
Claude Code Action（GitHub）
Claude Code Action は GitHub Actions として動作し、Issue/PR で @claude とメンションすることで Claude を呼び出せます。
特徴:
- GitHub 上で
@claudeと書くだけで起動 - リポジトリのコードベースを理解した上で回答
- PR のレビュー、Issue の分析、コード修正が可能
📖 詳細: Claude Code Action 公式リポジトリ
Codex（GitHub App）
Codex は OpenAI が提供する AIエージェントで GitHub App で、PR の差分を自動でレビューします。
特徴:
- PR 作成時に自動でレビューコメント
- 実装の妥当性、抜け漏れの指摘
- Claude とは異なる観点でのチェック
📖 詳細: Codex GitHub App
BugBot（Cursor）
BugBot は Cursor 製の AI レビューツールで、バグやセキュリティ問題の検出に特化しています。
特徴:
- バグ・セキュリティに特化
- 「Fix in Cursor」ボタンで即修正可能
- Cursor IDE との連携
📖 詳細: Cursor Bugbot
レビューの全体像
┌─────────────────────────────────────────────────────────────────────┐
│ コードレビューフロー │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ TDD実装完了 │
│ │ │
│ ▼ │
│ 【ローカルレビュー】Claude Code（PR作成前） │
│ │ │
│ ▼ │
│ 👤 指摘確認・修正 │
│ │ │
│ ▼ │
│ PR作成・Push │
│ │ │
│ ▼ │
│ 【AIレビュー】Claude Code Action + Codex + BugBot │
│ │ │
│ ▼ │
│ 👤 指摘確認・修正 │
│ │ │
│ ▼ │
│ PRマージ │
│ │
└─────────────────────────────────────────────────────────────────────┘
ローカルコードレビュー（PR 作成前）
なぜローカルでレビューするのか
- 早期発見: PR を出す前に問題を発見・修正できる
- 効率化: PR 後のレビュー指摘を減らせる
- 品質向上: Critical な問題を事前に潰せる
カスタムスキルの作成
コードレビュー用のカスタムスキルを作成しておくと便利です。
コマンド定義（スキルのトリガー）：
---
agent: code-reviewer
description: Automated Flutter/Dart code review
---
Review code changes for best practices, security, performance, and maintainability with detailed feedback.
エージェント定義（レビューの実行方法）：
---
name: code-reviewer
description: Automated code review agent for Flutter/Dart projects
model: sonnet
color: blue
---
You are an expert Flutter/Dart code reviewer with deep knowledge of
best practices, security, performance, and maintainability.
## Review Dimensions
1. Functionality & Correctness ✅
2. Performance ⚡
3. Security 🔒
4. Maintainability 🛠️
5. Flutter Best Practices 📱
6. Riverpod Specific 🔄
7. Code Style 🎨
8. Testing 🧪
## Categorize Findings
- Critical (🔴 Must Fix): セキュリティ脆弱性、機能バグ、メモリリーク
- Important (🟡 Should Fix): パフォーマンス問題、テスト不足
- Minor (🔵 Consider): スタイル改善、リファクタリング提案
- Positive (✅ Great!): 良いパターン、よくテストされたコード
レビューの実行
/code-quality:code-reviewer
このスキルを呼び出すと、master ブランチとの差分を自動で検出し、以下の観点でレビューします：
- バグ・ロジックエラー
- セキュリティ脆弱性
- パフォーマンス問題
- コード品質・可読性
- Flutter/Dart ベストプラクティス
- Riverpod の適切な使用
- プロジェクト規約（CLAUDE.md）への準拠
また、セキュリティ観点でレビューしたい場合は下記のコマンドでレビューしてもらうことも可能です。
/security-review
レビュー結果の例
実際のレビュー結果では、問題を重要度別に分類して報告されます：
## 【Critical】重大な問題
### 1. メモリリークの可能性 - `_acceptGeneratedImage`メソッド (信頼度: 95)
**問題点:** 非同期処理中に dispose される可能性があるが、setState の前に mounted チェックがない
**改善提案:**
```dart
if (mounted) {
setState(() {
_pickedImage = Uint8List.fromList(imageBytes);
});
}
```
指摘事項の修正
レビューで指摘された問題を修正します。Claude Code に「修正をお願いします」と伝えると、自動で修正を行います。
修正後のテスト実行
修正が完了したら、テストを再実行して問題がないことを確認します。
flutter test
PR 作成（@claude によるタイトル・説明文自動生成）
ローカルレビューが完了したら、PR を作成します。このとき @claude を使って PR のタイトルと説明文を自動生成できます。
ワークフロー
ローカルレビュー完了
│
▼
git push（ブランチをリモートに push）
│
▼
PR を Draft で作成
│
▼
@claude にタイトル・説明文の生成を依頼
│
▼
生成された内容を確認・微調整
│
▼
PR を Ready for Review に変更
@claude への依頼例
PR の Draft を作成したら、コメントで以下のように依頼します：
@claude この PR のタイトルと説明文を作成してください。
ポイント
Draft PR で @claude を呼び出すことで、コードの差分を理解した上で適切なタイトル・説明文を生成してくれます。手動で書くよりも網羅的で、レビュアーにとって分かりやすい PR になります。
PR 後の AI レビュー
ツールの使い分け
| ツール | 得意分野 | 特徴 |
|---|---|---|
| Claude Code Action | 設計・ロジック・アーキテクチャ | 俯瞰的なレビュー |
| Codex | 実装の妥当性・抜け漏れ確認 | 追加の観点チェック |
| BugBot | バグ・セキュリティ | 「Fix in Cursor」ボタンで即修正可能 |
Claude Code Action
Claude Code Action は 2 つのトリガー で起動できます：
- PR 作成時（自動）
- PR での
@claudeメンション（手動）
なぜ @claude でcluadeのワークフローを起動できるのか
.github/workflows/claude.yml で @claude メンションを検知するように設定されているためです。GitHub Webhook がコメントイベントを検知し、Claude Code Action ワークフローが起動します。
on:
issue_comment:
types: [created]
pull_request_review_comment:
types: [created]
jobs:
claude:
if: contains(github.event.comment.body, '@claude')
# ...
@claude メンションの活用例
- 「@claude PR のタイトルと説明文を作成して」
- 「@claude この変更でメモリリークの可能性はある？」
- 「@claude このロジックをもっとシンプルに書ける？」
- 「@claude Riverpod の使い方これで合ってる？」
- 「@claude BugBot/Codex の指摘を Issue 化して、修正 PR を作って」
Fix ボタンでの修正
Claude からのレビューはコメント内に出る [Fix this →]ボタンをタップすることでそのまま修正して PR を出すことが可能です。
Codex
Codex（OpenAI 製の GitHub App）でも PR 差分をレビューします。Claude とは異なるモデルのため、別の観点からの指摘が得られます。
特徴:
- PR 作成時に自動でコメント
- 実装の妥当性・抜け漏れを指摘
- Claude とは異なる視点でのダブルチェック
BugBot
BugBot は Cursor 製の AI レビューツールで、バグやセキュリティ問題の検出に特化しています。
特徴:
- バグ・セキュリティに特化
- 「Fix in Cursor」ボタンで即修正可能
- Cursor IDE との連携
レビュー指摘への対応フロー
指摘を受ける
│
▼
重要度を確認
│
├─ Critical/Important → すぐに修正
│
└─ Minor → 以下のいずれか
│
├─ すぐに修正（簡単な場合）
│
└─ @claude で Issue 化 + 修正 PR 作成を依頼
ポイント
レビュー指摘については重要なものはすぐに修正し、軽微なものは @claude で Issue 化と修正 PR 作成を依頼することが多いです（BugBot/Codex の指摘も同様）。
👤 人の判断ポイント
| # | 判断内容 | タイミング |
|---|---|---|
| 1 | ローカルレビューの指摘確認 | TDD 実装完了後、PR 作成前 |
| 2 | PR のマージ | AI レビュー通過後 |
次のステップ
👉 E2E & Visual Regression 編 へ進む