Vibe Coding 天下一武道会!! どのAIツールが最強か

Transcript

1. Vibe Coding 天下⼀武道会!! どのAIツールが最強か★ バクラク事業部 プロダクト開発部 バクラク勤怠 tiger DAY01 topic ツールの選択 Speaker
2. 2 © LayerX Inc. ⾃⼰紹介 ★ tiger (@ta1m1kam) ★ バクラク勤怠SWE ★ 戦闘⺠族 ★ 戦闘⼒ 7くらい（農夫が5） Read Me
3. 3 © LayerX Inc. ★ Vibe Coding とは Vibe：「雰囲気」、「ノリ」 AIに “ノリ” で指⽰して開発を進めるコーディング⽅法 つまり 雰囲気プログラミング だ！！ What is Vibe Coding 天下⼀武道会 ★ Vibe Coding 天下⼀武道会とは！？ ドラゴンボールのアレ 最も強い Vibe Codingツールを決めること
4. 参加選⼿発表！
5. 5 © LayerX Inc. 参加選⼿紹介！ 選⼿⼊場 Cursor (Auto-Run mode) GitHub Copilot (autoApprove) Cline Roo Code Claude Code ⾃律型IDE拡張 ⾃律型CLI Windsurf IDE統合型 augment code
6. 6 © LayerX Inc. 課題：マークダウンエディターを作れ！ ⼤会レギュレーション 機能要件 ★ エディター機能 ★ リアルタイムプレビュー ★ キーワード検索 ★ ⾃動保存機能 ★ タグのフィルター ★ ダークモード ★ Frontend: Next.js ★ Backend: Express ★ 公平な戦いのために... ★ モデル：Claude sonnet 4で統⼀ ★ 同じプロンプトを⽤いた1プロンプト実⾏ ★ 初期状態（コンテキスト等の情報はなし） 「app.mdの仕様に基づいて、マークダウンノートアプリケーションを作成してください」 実⾏プロンプト システム要件
7. 7 © LayerX Inc. レギュレーション
8. 8 © LayerX Inc. 評価 勝敗の決め⽅ 実装時間 （5点） 8分内の実装を5点とする playwright-mcpを⽤いた ベンチマークプロンプト実⾏ （100点） 私の独断と偏⾒による 定性評価 （5点） 計110点満点
9. 結果発表〜！ ※ 特定のレギュレーション内の結果なので今回はそうだったというN1事例結果です 全てのツールは素晴らしいです
10. 10 © LayerX Inc. 第７位 Cursor 結果 ビルドエラーのため 機能テストがすべて実施できず... 基本機能テスト 0/25 レスポンシブデザイン 0/15 パフォーマンス 5/20 エラーハンドリング 0/10 アクセシビリティ 0/10 セキュリティ 0/10 ユーザビリティ 0/10 合計点 5/100 総合点：8点 ★ ベンチマークテスト 0点 動かないので評価できず ★ 定性評価 3点 （12分42秒） ★ 実装時間 1プロンプトだと⼒が発揮できなかった感
11. 11 © LayerX Inc. 第６位 Claude Code 結果 総合点：77点 ★ ベンチマークテスト 2点 （分割型） ★ 定性評価 3点 （13分38秒） ★ 実装時間 基本機能テスト 18/25 レスポンシブデザイン 13/15 パフォーマンス 14/20 エラーハンドリング 5/10 アクセシビリティ 7/10 セキュリティ 6/10 ユーザビリティ 9/10 総合点 72/100 完成度は⾼いが、 裏でNext.jsのコンソールエラーが残る... タグのフィルター機能が未実装‧ユーザーFBが弱い
12. 12 © LayerX Inc. 第５位 Github Copilot 結果 総合点：90点 ★ ベンチマークテスト 4点 （⼀体型） ★ 定性評価 4点 （11分22秒） ★ 実装時間 基本的な機能はすべてクリア！ コードブロックが プレビューでも 反映されず改善の余地あり！ ノート⼀覧とプレビューが同じ画⾯にあるので体験が良い（⼀体型） 基本機能テスト 21/25 レスポンシブデザイン 13/15 パフォーマンス 16/20 エラーハンドリング 8/10 アクセシビリティ 8/10 セキュリティ 8/10 ユーザビリティ 8/10 総合点 82/100
13. 13 © LayerX Inc. 第４位 Roo Code 結果 総合点：91点 ★ ベンチマークテスト 5点 （⼀体型） ★ 定性評価 1点 （35分19秒） ★ 実装時間 基本機能テスト 23/25 レスポンシブデザイン 14/15 パフォーマンス 16/20 エラーハンドリング 8/10 アクセシビリティ 8/10 セキュリティ 8/10 ユーザビリティ 8/10 総合点 85/100 基本的な機能はすべてクリア！ 空⽂字タイトルなどのバリデーション未実装、変なタイミングでのリレン ダリングのため減点 ノート⼀覧とプレビューが同じ画⾯にあるので体験が良い（⼀体型）
14. 14 © LayerX Inc. 第３位 Cline 結果 総合点：93点 ★ ベンチマークテスト 3点 （分割型） ★ 定性評価 3点 （14分03秒） ★ 実装時間 基本機能テスト 23/25 レスポンシブデザイン 14/15 パフォーマンス 17/20 エラーハンドリング 8/10 アクセシビリティ 8/10 セキュリティ 8/10 ユーザビリティ 10/10 総合点 88/100 基本的な機能はすべてクリア！ アラートやローディングなどユーザーへのフィードバックが考慮され ており⾼得点に！ タグフィルターのUIは良いが機能が動かず...
15. 15 © LayerX Inc. 第２位 Windsurf 結果 総合点：96点 ★ ベンチマークテスト 2点 （分割型） ★ 定性評価 4点 （9分44秒） ★ 実装時間 基本機能テスト 24/25 レスポンシブデザイン 15/15 パフォーマンス 19/20 エラーハンドリング 9/10 アクセシビリティ 8/10 セキュリティ 7/10 ユーザビリティ 8/10 総合点 90/100 基本的な機能はすべてクリア！ アラートやローディングなどユーザーへのフィードバックが考慮され ており⾼得点に！ どうやって⼀覧に戻れば良いかわからず定性評価は低め
16. 16 © LayerX Inc. 第１位 augument code 結果 総合点：97点 ★ ベンチマークテスト 4点 （分割型） ★ 定性評価 2点 （21分00秒） ★ 実装時間 基本機能テスト 25/25 レスポンシブデザイン 14/15 パフォーマンス 19/20 エラーハンドリング 9/10 アクセシビリティ 8/10 セキュリティ 8/10 ユーザビリティ 9/10 総合点 91/100 何も変更がない場合はSaveボタンがdisabledになり体験が良い マルチタグ検索に対応している Confirmなどのユーザーフィードバックが適切 しかし、ダークモードが視覚的には動作しておらず改善余地あり
17. 17 © LayerX Inc. 結果 🥇 🥈 🥉 4位 5位 6位 7位 augment code Windsurf Cline Roo Code GitHub Copilot Claude Code Cursor ほぼ全てのツールで使⽤できるアプリが実装できる ⾃律型IDE拡張プラグイン系が強かった（4位以上はほぼ同点数） 上位層は全てブラウザテストを実施していたため精度が⾼くなる傾向 （Windsurfも独⾃ブラウザ機能があるため⾃律的にテストを実施していた） Clineのブラウザテスト例