20250226_AI Code Agents祭り_MK_AIコーディングエージェントのコラボレーション開発

2025.02.26 株式会社サイバーエージェント社主催のAI Code Agents祭りの発表スライドです。

Transcript

1. AIコーディングエージェントのコラボレーション開発 ～ v0/Bolt/Lovable/Cursor/Windsurf/Devin/etc. ～ 2025/2/27 祭り AI Code Agents 1 MK(Masayuki Kawakita)
2. 2025/2/27 祭り AI Code Agents 2 氏名：MK (Masayuki Kawakita) プロフィール：  システムエンジニア  LLM関連研究(出力性能最大化、自然言語探索最適 化、AI Safety、JailBreaking対策/Guardrail)  AIツールを使ってスモールプロダクト開発  Love Anthropic その他：  Anthropic Constitutional Classifiers TestでLevel4 までクリア。もし日本でLevel5をクリアした人がい たらお話させてください。 ※Level5をクリアした人は世界で7人のみ。Level4 クリアは40人。  ニーズがあれば、私が行ったJailbreakingの手法に ついて解説を行います。 自己紹介
3. 2025/2/27 祭り AI Code Agents 3 やあ、Aさん。最近SNSで『2025年はエージェントの年 だ』とかいう投稿がバズってるの見かけたけど、あれ何か 知ってる？ エンジニア Aさん 営業担当 Iさん そうね、今エンジニア界隈は特にコーディングに強いAI エージェントの話でもちきりよ。ソースコード生成から テストやドキュメント作成まで多くのタスクがAIによっ て自動化されつつあるの。 そ、そうなんだ！？コーディングに強いAIエージェントって 例えばGitHub Copilotとかかな？それは聞いたことあるよ。 GitHub Copilotも今となってはAIコーディングエージェ ントの一種として考えても間違ってはいないわね。 でも、他にも色々な種類があって、有名どころだけでも 10個以上のツールがあるわよ。 有名どころだけでも10個以上もあるの！？ それぞれ何が違うの？ えらく関心があるわね。そうだ、最近社内に導入し た”MK Bot”を使って、AIコーディングエージェントに ついて調べてもらおうかしら。 (そりゃぁ、AIの波に乗り遅れ たくないからね) オフィスでの AさんとIさんの会話
4. 2025/2/27 祭り AI Code Agents 4 ・・・ 調査が完了しました。 MK Bot 製品思想 × 得意領域 開発規模× 対応可能領域 ノーコード志向/ Webサービス型 開発効率化志向/エディター拡張型 UI/フロントエンド 開発向け ロジック/ バックエンド開発向け Cursor Windsurf Void Editor Lovable Bolt.new Aider Claude Code Cline v0 Replit GitHub Copilot 汎用タスク型 特定タスク特化型 小規模開発向け (迅速なMVP・プロト タイプ開発が得意) 大規模開発向け (大規模コードベース理解 に強い/様々なツールと 連携・統合可能) Cursor Windsurf Void Editor Lovable Bolt.new Aider Claude Code Cline v0 Replit GitHub Copilot Devin  Devin    以下は一例であるが、各AIコーディングエージェントには特色があり、タスクによって 向き不向きがあったり、何をどこまで自動化できるのかという点も大きく異なる。
5. 2025/2/27 祭り AI Code Agents 5 フェーズ 最適ツール 次点ツール (1) 要件定義・計画 Devin：大規模や複雑な要件を論理的に整理 Claude Code：セキュリティ・規制要件の検討と分析 GitHub Copilot：要件からのコード構造予測と技術的実現性の検証 Lovable.dev：自然言語から概念整理とデザイン要件の視覚化 Replit：チーム間での要件共有と初期検証 (2) デザイン・ プロトタイプ開発 v0：ビジュアル最優先のUI試作に特化 Lovable.dev：コンポーネントベースのUI設計と直感的なビジュアル編集 Windsurf：Figmaデザインとコードの自動変換、チームでの協同デザイン Bolt.new：フロント+仮バックでMVP迅速化 Replit：リアルタイムプレビューとコラボレーション機能 Void Editor：軽量で直感的なUI編集 GitHub Copilot：プロトタイプコード迅速生成 (3) フロントエンド開発 v0：UIを高品質に作り込みたい場合 Lovable.dev：モバイルファーストデザインとリアルタイムプレビュー Windsurf：チーム全体でのフロントエンド効率的構築 Cursor：既存コード改修や最適化が速い Void Editor：直感的なインターフェースでコード編集効率化 GitHub Copilot：コンポーネント実装の高速化 Replit：ブラウザベースの即時プレビュー (4) バックエンド開発 Cursor：中規模API/拡張に柔軟対応 Aider：APIエンドポイント設計と実装の自動化 Cline：コマンドラインからの高速バックエンド構築 GitHub Copilot：データ処理ロジックの効率的実装 Bolt.new：MVPレベルのAPI高速実装 Claude Code：セキュリティ面含めたバックエンド分析 Replit：サーバーサイド処理の即時検証 Devin：特に複雑な大規模バックエンド構築の場合のみ (5) テスト・品質保証 Devin：TDDアプローチや大規模テストカバレッジ Claude Code：セキュリティテスト、脆弱性検出 Aider：既存コードからのテスト自動生成 Windsurf：CascadeによるCodebase全体を俯瞰したテストコード自動生成 Cursor：単体～統合テストのテンプレ生成 GitHub Copilot：テストケース自動生成と網羅性向上 Void Editor：テストコードの効率的編集 (6) デプロイメント・ 運用 Bolt.new/Lovable.dev：ブラウザでワンクリックデプロイ Replit：クラウドへの即時デプロイと運用監視 Devin：複雑なCI/CD自動化が必要な場合 (7) 保守・改善 Windsurf：大規模コードベースの理解と継続的改善 Cursor：日常のバグ修正、拡張に迅速対応 GitHub Copilot：コード品質向上と最新パターン適用 Void Editor：保守作業の効率化と視認性向上 Claude Code：ドキュメント更新とセキュリティ監査 Aider：既存コードベースの理解と修正提案 Devin：大規模リファクタリングが必要な場合 【参考】開発フェーズ別AIコーディングエージェントの最適な使い分け
6. 2025/2/27 祭り AI Code Agents 6 なるほど、各AIコーディングエージェントごとに得意領域 やできることが結構違うんだね。 エンジニア Aさん 営業担当 Iさん そうね、各開発工程やタスクの内容に応じて、最適なAI エージェントを採用し、組み合わせて使っていくことが 業務効率化の鍵になると思うわ。 そういうことなんだね。あれ……？AIエージェントを組み合 わせて使うことってできるの？1つのAIエージェントで開発 したソースコードは、そのAIエージェント内でしか管理でき ないものだと思ってたけど。 確かに中にはそういったAIコーディングエージェント サービスもあるわ。でも、大半はGitHubなどのリポジ トリ(Git)ホスティングサービスやGitなどのバージョン 管理システムを利用することで、実質的にAIエージェン ト間で共同開発することも可能よ。 なるほど。それじゃぁAIコーディングエージェント同士で コラボレーション開発ができるってわけだね。 ……。まぁいいわ。次のページでは、現在私のプロジェ クトで取り入れている、MK Botから提案された 方法を紹介するわ。 AさんとIさんの 会話の続き
7. コードレビュー/自動テスト /ドキュメント作成/etc. 各種開発 各種開発 デザインを単 一HTMLファ イルに変換 UI・デザイン 作成 2025/2/27 祭り AI Code Agents 7 ローカル 環境 GitHub (リモート リポジトリ) Web サービス ローカル リポジトリ ソース コード ソース コード ソース コード ソース コード DL UL プロジェクト 雛形開発 ソース コード DL ULまたはプロンプト にHMTL貼り付け GitHub連携&push リポジトリ インポート (Bolt to GitHub) DL Commit 読み込み Commit リモートリポジトリとして設定 リポジトリ インポート 各AIコーディングエージェントソースコード連携
8. 自動テスト /CI /PR作成 ロジック 中心開発 各種開発 2025/2/27 祭り AI Code Agents 8 ローカル 環境 GitHub (リモート リポジトリ) Web サービス ローカル リポジトリ ソース コード コードレビュー /テストコード生成 /PR作成 ソース コード フロントエンド 中心開発 リポジトリ インポート (Bolt to GitHub) DL Commit 読み込み リモートリポジトとして設定 各AIコーディングエージェントのコラボレーション開発フロー Aブランチ メイン ブランチ 同期(双方向連携) Bブランチ Cブランチ MCP ローカルリポジトリ 経由でPush リポジトリ 双方向連携 (各ブランチを適宜読み込み) Commit
9. 2025/2/27 祭り AI Code Agents 9 稲妻ボタンを クリックするとGitHub のリポジトリが Bolt.newで開かれる Bolt.newで作成したプ ログラムを自分の GitHubアカウントのリ ポジトリにPushするこ とができる。 【注意事項】  この拡張機能は、Bolt.newとGitHubで実質的な接続を行っているわけではない点に注意が必要。  GitHubリポジトリからインポートはできるものの、その後そのリポジトリへPushしたり、Fetch/Pullはでき ない。また、Pushする場合は、毎回新規リポジトリが作成されてしまう。  そのため、Bolt.newで編集を行ったソースコードは、ローカル環境にダウンロードし、ローカルリポジトリか らリモートリポジトリへCommit/Pushしなくてはならない。 【参考】Bolt.newでGitHubリポジトリをインポートする方法(2/3)
10. 2025/2/27 祭り AI Code Agents 10 デモ動画 【参考】Bolt.newでGitHubリポジトリをインポートする方法(3/3)
11. 2025/2/27 祭り AI Code Agents 11 【ご参考】Lovableにローカルのソースコードをアップロードする方法(1/2)
12. 2025/2/27 祭り AI Code Agents 12 【ご参考】Lovableにローカルのソースコードをアップロードする方法(2/2) サイドメニューのエクスプロー ラービュー上で、自由にフォルダ やファイルの削除が可能。 変更を加えた後は、Gitメニュー からリモートリポジトリへ Commit/Pushすることが可能。 【注意事項】  Lovable.devは、GitHubリポジトリと双方向連携できるものの、Lovable.devが自らを起点に作成したリポジ トリとしか連携できない点に注意が必要(=既に作成済みのリポジトリをリモートリポジトリとして設定するこ とはできない) 。(2025/02/26時点)
13. 2025/2/27 祭り AI Code Agents 13 様々なAIコーディングエージェントサービスやツールは、 GitHubなどのリポジトリ(Git)ホスティングサービスやGit などのバージョン管理システムを利用することで共同開 発を行えるということがよくわかったよ！ エンジニア Aさん 営業担当 Iさん そうね、本当は全てのサービスがGitHubと双方向連携 できるようにしてくれれば、もっと開発は効率化するん だけどね。今は対応していないAIエージェントサービス とソースコードの同期をとるのにひと手間かかるので。 理解したよ。それにしてもこれほどのAIコーディングエー ジェントがあるとどれを契約すべきか迷ってしまうね。どの サービスもサブスク契約だから、いくつも契約していたら月 の出費がすごいことになりそう……。 確かに悩ましいところね。Devinなんて月額$500だしね。 月額$500…日本円で約75,000円だって！？ 僕のお給料ではとても払える額じゃない！ そういうリアクションになるのはよくわかるわ。笑 でも安心して。世界中で同じようなことを考えている人 たちが有志として集まって、Devinをオープンソース化 (ソースコードを公開して無料で誰でも使えるようにす ること)の取り組みがあるから、それを紹介するわね。 AさんとIさんの 会話の続き おぉ、それは朗報だ！ 使い過ぎてAPI料金の方がサブス クより高いなんて本末転倒なこと にならないように注意してね。
14. 2025/2/27 祭り AI Code Agents 14 【ご参考】Devinのオープンソース化プロジェクト OpenHandsのご紹介(1/2) オープンソース化 GitHuib：OpenHands  OpenHandsは「Devin」に触発されて作 られた最も人気の高いオープンソースAI エージェントの一つです。  元々OpenDevinとして開発され、後に改 名されました。  ソフトウェアエンジニア向けのAIエー ジェントであり、人間の開発者と同様に コードの編集・実行、コマンド実行、 Web閲覧、API呼び出しなどが可能です。  Dockerによる隔離環境内でコードを実行 することで安全性も確保しています。 OpenHandsは活発に開発が続けられてお り開発チームは2024年にシード資金を調 達し、現在はホスティング版サービス （ベータ版）の提供に向けた開発も進めて います。 https://github.com/All-Hands-AI/OpenHands
15. 2025/2/27 祭り AI Code Agents 15 【ご参考】Devinのオープンソース化プロジェクト OpenHandsのご紹介(2/2) デモ動画
16. 2025/2/27 祭り AI Code Agents 16 【ご参考】Bolt.newの進化系オープンソース Bolt.diyのご紹介 オープンソース化 GitHuib：Bolt.diy  Bolt.diyは、商用版であるBolt.newの 基盤となるコアコンポーネントをオープ ンソース化したもので、ローカル環境で 自由にカスタマイズしながら利用できる AI駆動型の開発ツールです。  Bolt.newがブラウザ上で動作する商用 サービスであるのに対し、Bolt.diyは ローカル環境や無料のクラウドサービス （例: Cloudflare Pages）で動作可能な 点が大きな違いです。  Bolt.diyは、使用するLLM（大規模言 語モデル）を自由に選択できます。 OpenAIやAnthropicなどのクラウドベー スモデルから、HuggingFaceやローカ ルモデル（例: Ollama）まで幅広く対応 しています。 https://github.com/stackblitz-labs/bolt.diy
17. 2025/2/27 祭り AI Code Agents 17 EOF ご清聴ありがとうございました。