Slide 1

Slide 1 text

Vibe Coding 天下⼀武道会!! どのAIツールが最強か★ バクラク事業部 プロダクト開発部 バクラク勤怠 tiger DAY01 topic ツールの選択 Speaker

Slide 2

Slide 2 text

2 © LayerX Inc. ⾃⼰紹介 ★ tiger (@ta1m1kam) ★ バクラク勤怠SWE ★ 戦闘⺠族 ★ 戦闘⼒ 7くらい(農夫が5) Read Me

Slide 3

Slide 3 text

3 © LayerX Inc. ★ Vibe Coding とは Vibe:「雰囲気」、「ノリ」 AIに “ノリ” で指⽰して開発を進めるコーディング⽅法 つまり 雰囲気プログラミング だ!! What is Vibe Coding 天下⼀武道会 ★ Vibe Coding 天下⼀武道会とは!? ドラゴンボールのアレ 最も強い Vibe Codingツールを決めること

Slide 4

Slide 4 text

参加選⼿発表!

Slide 5

Slide 5 text

5 © LayerX Inc. 参加選⼿紹介! 選⼿⼊場 Cursor (Auto-Run mode) GitHub Copilot (autoApprove) Cline Roo Code Claude Code ⾃律型IDE拡張 ⾃律型CLI Windsurf IDE統合型 augment code

Slide 6

Slide 6 text

6 © LayerX Inc. 課題:マークダウンエディターを作れ! ⼤会レギュレーション 機能要件 ★ エディター機能 ★ リアルタイムプレビュー ★ キーワード検索 ★ ⾃動保存機能 ★ タグのフィルター ★ ダークモード ★ Frontend: Next.js ★ Backend: Express ★ 公平な戦いのために... ★ モデル:Claude sonnet 4で統⼀ ★ 同じプロンプトを⽤いた1プロンプト実⾏ ★ 初期状態(コンテキスト等の情報はなし) 「app.mdの仕様に基づいて、マークダウンノートアプリケーションを作成してください」 実⾏プロンプト システム要件

Slide 7

Slide 7 text

7 © LayerX Inc. レギュレーション

Slide 8

Slide 8 text

8 © LayerX Inc. 評価 勝敗の決め⽅ 実装時間 (5点) 8分内の実装を5点とする playwright-mcpを⽤いた ベンチマークプロンプト実⾏ (100点) 私の独断と偏⾒による 定性評価 (5点) 計110点満点

Slide 9

Slide 9 text

結果発表〜! ※ 特定のレギュレーション内の結果なので今回はそうだったというN1事例結果です 全てのツールは素晴らしいです

Slide 10

Slide 10 text

10 © LayerX Inc. 第7位 Cursor 結果 ビルドエラーのため 機能テストがすべて実施できず... 基本機能テスト 0/25 レスポンシブデザイン 0/15 パフォーマンス 5/20 エラーハンドリング 0/10 アクセシビリティ 0/10 セキュリティ 0/10 ユーザビリティ 0/10 合計点 5/100 総合点:8点 ★ ベンチマークテスト 0点 動かないので評価できず ★ 定性評価 3点 (12分42秒) ★ 実装時間 1プロンプトだと⼒が発揮できなかった感

Slide 11

Slide 11 text

11 © LayerX Inc. 第6位 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が弱い

Slide 12

Slide 12 text

12 © LayerX Inc. 第5位 Github Copilot 結果 総合点:90点 ★ ベンチマークテスト 4点 (⼀体型) ★ 定性評価 4点 (11分22秒) ★ 実装時間 基本的な機能はすべてクリア! コードブロックが プレビューでも 反映されず改善の余地あり! ノート⼀覧とプレビューが同じ画⾯にあるので体験が良い(⼀体型) 基本機能テスト 21/25 レスポンシブデザイン 13/15 パフォーマンス 16/20 エラーハンドリング 8/10 アクセシビリティ 8/10 セキュリティ 8/10 ユーザビリティ 8/10 総合点 82/100

Slide 13

Slide 13 text

13 © LayerX Inc. 第4位 Roo Code 結果 総合点:91点 ★ ベンチマークテスト 5点 (⼀体型) ★ 定性評価 1点 (35分19秒) ★ 実装時間 基本機能テスト 23/25 レスポンシブデザイン 14/15 パフォーマンス 16/20 エラーハンドリング 8/10 アクセシビリティ 8/10 セキュリティ 8/10 ユーザビリティ 8/10 総合点 85/100 基本的な機能はすべてクリア! 空⽂字タイトルなどのバリデーション未実装、変なタイミングでのリレン ダリングのため減点 ノート⼀覧とプレビューが同じ画⾯にあるので体験が良い(⼀体型)

Slide 14

Slide 14 text

14 © LayerX Inc. 第3位 Cline 結果 総合点:93点 ★ ベンチマークテスト 3点 (分割型) ★ 定性評価 3点 (14分03秒) ★ 実装時間 基本機能テスト 23/25 レスポンシブデザイン 14/15 パフォーマンス 17/20 エラーハンドリング 8/10 アクセシビリティ 8/10 セキュリティ 8/10 ユーザビリティ 10/10 総合点 88/100 基本的な機能はすべてクリア! アラートやローディングなどユーザーへのフィードバックが考慮され ており⾼得点に! タグフィルターのUIは良いが機能が動かず...

Slide 15

Slide 15 text

15 © LayerX Inc. 第2位 Windsurf 結果 総合点:96点 ★ ベンチマークテスト 2点 (分割型) ★ 定性評価 4点 (9分44秒) ★ 実装時間 基本機能テスト 24/25 レスポンシブデザイン 15/15 パフォーマンス 19/20 エラーハンドリング 9/10 アクセシビリティ 8/10 セキュリティ 7/10 ユーザビリティ 8/10 総合点 90/100 基本的な機能はすべてクリア! アラートやローディングなどユーザーへのフィードバックが考慮され ており⾼得点に! どうやって⼀覧に戻れば良いかわからず定性評価は低め

Slide 16

Slide 16 text

16 © LayerX Inc. 第1位 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などのユーザーフィードバックが適切 しかし、ダークモードが視覚的には動作しておらず改善余地あり

Slide 17

Slide 17 text

17 © LayerX Inc. 結果 🥇 🥈 🥉 4位 5位 6位 7位 augment code Windsurf Cline Roo Code GitHub Copilot Claude Code Cursor ほぼ全てのツールで使⽤できるアプリが実装できる ⾃律型IDE拡張プラグイン系が強かった(4位以上はほぼ同点数) 上位層は全てブラウザテストを実施していたため精度が⾼くなる傾向 (Windsurfも独⾃ブラウザ機能があるため⾃律的にテストを実施していた) Clineのブラウザテスト例