開発を高速化。AIコーディングエージェントとCodeRabbitでループエンジニアリング

フロントエンドカンファレンス関西2026の発表資料です
https://2026.frontend-conf.osaka.jp/

Transcript

1. #fec_kansai 開発を高速化。AIコーディングエージェントと CodeRabbitでループエンジニアリング CodeRabbit 中津川篤司 , フロントエンドカンファレンス関西 2026
2. 𝕏 自己紹介 中津川 篤司 CodeRabbit デベロッパーアドボケイト 一般社団法人DevRel 代表理事 @goofmint fb.me/goofmint
3. YouTuberはじめました https://www.youtube.com/@rabbit_hacker
4. CodeRabbitについて覚えてほしい3つのこと 1. AI SDLCを安全かつ適切に推進・管理する基盤 2.シート単位の定額・OSSは無料 3.Slackエージェント、実装計画作成、レビュー まで幅広く提供 coderabbit.ai/ja
5. CodeRabbit, Inc.について 1. 従業員300名程度（内エンジニアが120名位） 2. ほぼリモートワーク（US、ベンガルールオフィスあり） 3. 日本支社なし・日本人社員1名 https://www.coderabbit.ai/ Hoppy
6. CodeRabbitの主なプロダクト 01. 検証 CodeRabbit Review 02. 優先順位 CodeRabbit Triage 03. 理解 CodeRabbit Explain 04. セキュリティ CodeRabbit Secure
7. CodeRabbitの主なプロダクト 01. 検証 CodeRabbit Review • PR・IDE・CLIでのAIレビュー • フィードバックを学習 02. 優先順位 CodeRabbit Triage 03. 理解 CodeRabbit Explain 04. セキュリティ CodeRabbit Secure • マージ前チェック • 低品質なAIコードを検出 • Autofix • Fix CI • ユニットテスト生成 • マージ後のアクション
8. CodeRabbitの主なプロダクト 01. 検証 CodeRabbit Review • PRキューを優先順位付け • リスク 02. 優先順位 CodeRabbit Triage 03. 理解 CodeRabbit Explain 04. セキュリティ CodeRabbit Secure • 影響度 • 重要度 • セキュリティ
9. CodeRabbitの主なプロダクト 01. 検証 CodeRabbit Review • PRの内容を分かりやすく表示 02. 優先順位 Change Stack • 影響を受ける範囲を可視化 CodeRabbit Triage 03. 理解 CodeRabbit Explain 04. セキュリティ CodeRabbit Secure Blast Radius • アーキテクチャのレビュー Security Architecture Review
10. CodeRabbitの主なプロダクト 01. 検証 CodeRabbit Review • セキュリティ観点でのレビュー • リポジトリレベルのスキャン 02. 優先順位 CodeRabbit Triage 03. 理解 CodeRabbit Explain 04. セキュリティ CodeRabbit Secure Deep Scan
11. CodeRabbit AIエンジニア • Slack、Discord内にいるAIエージェント • PR、Change Stackでもチャット可能 • 各種開発者ツールと接続し、データ収集や CRUD操作が可能 • コーディング、PR作成も可能 Hoppy（ホッピー）
12. アジェンダ 1.個人的に作っているもの 2.ループエンジニアリングを回す工夫 3.まとめ
13. tecode
14. 特徴 1. Bunで作成 2. VS CodeっぽいUI 3. バイナリ作成して、macOS/Windows/Linuxで利用可 4. TUIで動作、ただしマウスも使える
15. 開発のきっかけ 1. AIコーディングが増えて、PCを持ち歩かなくなる 2. iPadで自宅PCにつないでコードを確認したい 3. VS Codeがターミナルでも使いたい 4. terminal-codeが登場！ 5. でもterminal-codeは画像表示できるターミナルだけ 6. じゃぁ自作しよう
16. 利用しているAIサービス Claude CodeRabbit Plan / CodeRabbit Review
17. Claude Code 司令塔は賢く、コーディングは安価に 実装は必要に応じてサブエージェントに分けて行っ てください。Fableだけで実装するのはコストが高 いです。
18. Eluma
19. 特徴 1. Tauri + TypeScript 2. 複数のWebメールを管理するだけ 3. Slackデスクトップのメール版
20. 利用しているAIサービス Cursor CodeRabbit Plan / CodeRabbit Review
21. ループエンジニアリングを回す工夫
22. お断り 1.あくまでも個人開発向けです 2.PoC向けです 3.実運用向けのループエンジニアリングもありま すが、今回は時間があれば（資料には追加済）
23. AIはなぜコーディングでミスするのか 1.コンテキスト不足（ハルシネーション） 2.コンテキスト過剰（圧縮、最初のことを忘れが ち） 必要なコンテキストを必要な時に必要なだけ
24. システム開発の流れ Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
25. コンテキストが抜けるポイント Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
26. コンテキストが抜けると起きる問題 🧑🧒🧒 社内 外注先、PMと開発メンバー間での情報 共有不足による実装ミス、要件の勘違い 🤖 十分なコンテキストがない中で、勝手な予測 （ハルシネーション）による実装 AI Slop（低品質なAIコード）爆誕👶
27. とりあえず大量のコンテキストを与えればOK？ 重要な部分がどこか分からなくなる 圧縮が発生し、一部（どこか）のコンテキストが 落ちる 必要十分なコンテキストを必要なタイミングで与えるのが大事
28. コンテキストが抜けるポイント Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
29. Issue管理の課題 1.要望を課題に直す際に情報が落ちる 2.ミーティングやSlackの内容が網羅されていない 3.既存のドキュメント、コードを知らずに作成
30. コンテキストが抜けるポイント Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
31. AIコーディングの課題 1.暗黙知が漏れがち 2.コンテキスト不足（ドキュメント、禁止事項など） 3.対話を重ねる毎に最初の内容が消えがち
32. コンテキストが抜けるポイント Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
33. PRの課題 1.ローカルPCで交わしたAIとのコンテキストが消失 2.実装・設計意図が見えない 3.PR毎に統一感のない実装
34. コンテキストが抜けるポイント Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
35. レビューの課題 1.大量の積みPR 2.1PRに対する大量のファイル追加・編集 3.ミートプロキシによる意図不明なPR
36. コーディングエージェント × CodeRabbit Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
37. 個人的なTips：tasks.md作成後 すべてのタスクをIssue管理に登録する 1.tasks.mdのままだと、AIコーディングエージェント は1フェーズごとに実装しがち 2.個別にタスクにすることで、1行の内容から現状分 析、実装要件・完了要件などコンテキストが充実
40. ループエンジニアリングの種類 1.ターンベースループ 2.ゴールベースループ 3.タイムベースループ 4.プロアクティブループ via Loop engineering: Getting started with loops | Claude by Anthropic
41. /goal GitHubのIssueがなくなるまで実装して。処理内容は以下の通りです。実装は必要に応じてサブエージェン トに分けて行ってください。Fable 5だけで実装するのはコストが高いです。 1. gitブランチを作成 2. 各タスクに対して、 `@coderabbitai make plan in Japanese` とコメントして。 3. @coderabbitai から返答が来るまで待つ（5〜10分かかります） 4. 実装計画が返ってくるので、コメントの中に書かれているAIコーディングエージェント向けの実装プロンプト を読み込み、その妥当性に従って実装を進めてください 5. 実装が終わったら、PR作成まで進めてください。descriptionに fix #(IssueのID) を記述してください 6. CodeRabbitのレビューが終わるまで待機してください（5〜15分かかります） 7. レビュー内容を読み込んで、 Prompt for AI Agents ではじまる内容を取得し、修正を行ってください 8. 修正が終わったらプッシュし、再度CodeRabbitのレビュー完了まで待機してください 9. 修正がなくなったらPRをマージしてください
42. コーディングエージェント × CodeRabbit Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
43. Issue管理： CodeRabbit Plan Issueに対して実装計画を作成する 1. `@coderabbitai make plan in Japanese` 2.コードベース、MCPなどを使って実装計画を作成 3.AI向けのプロンプトを生成
45. コーディングエージェント × CodeRabbit Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
46. PR管理： CodeRabbit Review 1.PRに対して自動でレビュー 2.パスごとのカスタムレビュー 3.MCPを使って外部コンテキスト取得 4.60種類を超えるLinter/SASTも利用
48. コーディングエージェント × CodeRabbit Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
49. レビュー後の修正 1.CodeRabbitからAIコーディングエージェント向け のプロンプトを作成 2.AIコーディングエージェントはその内容を取得、指 摘を評価した上で修正、または拒否 3.CodeRabbitのAuto xを使うとAIコーディングエー fi ジェントのトークンを使わずに修正可能
52. CIのエラー 1.CodeRabbitのFix CIを使って修正 2.AIコーディングエージェントのトークンを消費せず に修正
54. コーディングエージェント × CodeRabbit Issue管理 PR管理 CI・テスト マージ クラウド ローカル コーディング レビュー 修正
55. 人のレビュー 1.最適なレビュアーを自然言語で定義 2.PRの優先順位を表示（CodeRabbit Triage） 3.チームのルールを自然言語で記述 4.PRの内容を分かりやすく表示（Change Stack）
58. まとめ 🥕 AI活用は適切なコンテキスト設定が鍵 🩴 CodeRabbitはAI開発を全方位的に支援 ⛵ キャラクターの名前はHoppy！ でAI開発を伸ばそう！