Claude Code VS Gemini CLI Let’s 競技Vibe Coding

Transcript

1. Claude Code VS Gemini CLI Let’s 競技Vibe Coding 1 GMOペパボ 事業開発部 てつを。
2. 2 ⾃⼰紹介 事業開発部 Alive Projectチーム 永⽥ 哲平 社内では「てつを。」と呼ばれています。 フロントエンドの開発することが多いです。 ゲーム（Valorant）とポーカーが趣味です。 • X : @tetsuwo0717
3. 3 • Claude Code/Gemini CLIの⽐較（主観有） 󰢏今⽇話すこと 󰢃今⽇話さないこと • Claude Code/Gemini CLIの基本的な使い⽅ • 単純な定量的⽐較 ◦ コンテキスト量/公式Docに記載してある内容 競技VibeCoding
4. 4 私たちは「⼈類のアウトプットを増やす」ことをミッションとし、 インターネットやテクノロジーの⼒で情報発信のハードルを下げる⽀援をしています。
5. 5 AI活⽤に関する取り組みが盛ん
6. 競技VibeCoding 6 競技Vibe Codingとは？ 「お題のものをVibe Codingを駆使して一番早く作った人が勝ち」というシンプルな ルールの競技です。 • お題が与えられます • それをVibe Codingで作ってください • （コードの）コピペ以外なら道具は基本なんでもありです。要件の調べ物に使うのも良いでしょう • Cursor、ChatGPT、Anthropic、etc… • 可能な限りVibe Codingしてください • 「作った！！！！！」 と宣言して、「要件を満たせたプロダクト」を見せれた人が勝ちです • 要件を満たせているか、客観的に判断できる材料があるとよいでしょう • 厳密なテストケースがあるわけではないので、司会の主観でできたかどうかを判断します、ご了承ください！
7. 7 競技VibeCodingと全く同じものを   Claude Code、GeminiCLIでそれぞれで作って⽐較した 競技VibeCoding
8. 8 お題 • お題：適当に押すだけで曲になる グリッド型コード楽器 • 音楽理論に詳しくない人でも、グリッド状に並んだボタンを適当に押していくだけで、自然なコード進行 や雰囲気のある演奏ができる 「コードパッド楽器」 を実装してください。 AgentがVibeしてる間、演奏し ながら実装を進めましょう。音がなると盛り上がっていいですよね。 • 必須要件として、ダイアトニックコードだけでなく、セカンダリードミナントやモーダルインターチェン ジなどのノンダイアトニックコード、テンションや色彩感のある補助的なコード（ sus、add9、maj7 など）も演奏可能であること。また、任意のキーとスケール（モード）を切り替えて演奏できること。 • その他、ループ再生や記録、演奏内容の保存・シェアなど、作曲ツールとしての拡張があるとなおよ いですね。UI、サウンド、演奏体験に創意工夫を凝らし、「つい触りたくなる」楽器に仕上げましょう。 競技VibeCoding
9. 9 • Claude Code →  claude --dangerously-skip-permissions  ◦ MAXプラン（モデル:デフォルト） • Gemini CLI →  gemini --yolo  • プロジェクトのコンテキスト、グローバルコンテキストはいず れも空 • 基本１回だけでプロンプトを与えてどこまで⾏けるか • プロンプトや条件を変えて3回⾏った ✏条件 競技VibeCoding
10. 10 ✏要件満たし表 競技VibeCoding パッドを押した時に音が鳴るか ✅ セカンダリードミナントやモーダルインターチェンジなどの ノンダイアトニックコードが弾けるか ✅ テンションや色彩感のある補助的なコード（ sus、add9、maj7 など） も演奏可能であるか ✅ ループ再生や記録、演奏内容の保存・シェアなど、 作曲ツールとしての拡張があるか ✅ 「つい触りたくなる」 UIになっているか ✅
11. 競技VibeCoding 11 • 要件を満たしているか • 速度 ⭕評価する箇所 ✖あまり評価しない点 • コードの綺麗さ/アーキテクチャ • 消費トークン数
12. 12 Round 1 条件丸投げ 競技VibeCoding • お題の丸投げ • その他の指定はしない
13. 13 競技VibeCoding 時間 3m 15s 7m 0s 要件満たし度 (5点満点) 4 1 アーキテクチャ /構成 Vanilla JS アプリ TS+React構成 その他 UIが良い Coming Soon!? Round 1 条件丸投げ 結果
14. 14 競技VibeCoding 時間 3m 15s 7m 0s 要件満たし度 (5点満点) 4 1 アーキテクチャ /構成 Vanilla JS アプリ TS+React構成 その他 UIが良い Coming Soon!? Round 1 条件丸投げ 結果
15. 15 競技VibeCoding 時間 3m 15s 7m 0s 要件満たし度 (5点満点) 4 1 アーキテクチャ /構成 Vanilla JS アプリ TS+React構成 その他 UIがとても良い Coming Soon!? Round 1 条件丸投げ 結果
16. 16 競技VibeCoding 時間 3m 15s 7m 0s 要件満たし度 (5点満点) 4 1 アーキテクチャ /構成 Vanilla JS アプリ TS+React構成 その他 UIがとても良い Coming Soon!? Round 1 条件丸投げ 結果 開発計画 基本となる楽器機能の実装 プロジェクト設定: create-react-app を使用して、React + 　　　　　　　　　　　 ・ 　　　　　　　　　　　　　・ 　　　　　　　　　　　　　・ このプランで実装を開始してもよろしい でしょうか？ y
17. 17 Round 2 技術指定 競技VibeCoding • アーキテクチャ/構成が分かれたのでこちらで指定する • 確認は求めないで最後までやりきって
18. 18 競技VibeCoding 時間 10m 21s 1回では完成せず 要件満たし度 (5点満点) 4 0 アーキテクチャ /構成 TS+React構成 TS+React構成 その他 細かいアニメーションまで コンパイルエラーを自ら修正できない Round 2 技術指定 結果
19. 19 競技VibeCoding 時間 10m 21s 1回では完成せず 要件満たし度 (5点満点) 4 0 アーキテクチャ /構成 TS+React構成 TS+React構成 その他 細かいアニメーションまで コンパイルエラーを自ら修正できない Round 2 技術指定 結果
20. 20 競技VibeCoding 時間 10m 21s 1回では完成せず 要件満たし度 (5点満点) 4 0 アーキテクチャ /構成 TS+React構成 TS+React構成 その他 細かいアニメーションまで コンパイルエラーを自ら修正できない Round 2 技術指定 結果 その後もエラーを与えては修正を繰り返すが一向に完成せずループに陥って完成しない … 　　　　　　　　　　　　　　 → 一回ハマると抜け出せなくなった　　
21. 21 Round 3 web検索を絡める 競技VibeCoding • 細かく指⽰はしないで公開しているブログを検索して お題を探し作ってもらう
22. 22 競技VibeCoding Round 3 web検索を絡める
23. 23 競技VibeCoding Round 3 web検索を絡める 両者に明確な違いは感じられなかった →統計/データを⽤いる検索や、世の中のニーズ から仕様を策定するような検索になってくると差 が出てくるのか？
24. 24 競技VibeCoding 時間 2m 30s 8m 50s 要件満たし度 (5点満点) 4 2 アーキテクチャ /構成 Vanilla JS アプリ TS+React構成 その他 今までで一番早かった 音は出るが、、最後まで実装仕切らない Round 3 web検索を絡める
25. 25 競技VibeCoding まとめ • claude codeの⽅が速いという結果になり、⼀回のプロンプト でかなりの精度 • (optionalも含め)要件の80パーセント以上は毎回満たせていた • geminiが誇るコンテキスト量は0→1開発では恩恵を受けにくい • エラーの対処に関してもClaude CodeがGeminiよりも優れてお りエラーによる無限ループに陥ることはなかった
26. 26 競技VibeCoding おしまい
27. 27 競技VibeCoding おしまい.
28. 28 競技VibeCoding おしまい..
29. 29 競技VibeCoding おしまい...
30. 30 競技VibeCoding おしまい...
31. 31 競技VibeCoding ちょっと気になったのでkiroでもやってみた
32. 32 競技VibeCoding ちょっと気になったのでkiroでもやってみた Kiro は AWS が開発した IDE 内蔵型の AI コーディングエージェントです。Kiro の特徴は単なるバイブコーディングにとどまらず、スペックを使⽤して仕様駆動 開発でアプリケーションを開発できることです。 最近でたよ
33. 33 競技VibeCoding ちょっと気になったのでkiroでもやってみた Vibe mode とSpec modeがある Vibe mode‧‧‧対話形式で仕様を進めていく。与えたプロンプトそのままに    実装し細かい使⽤はモデルに任せる Spec Mode‧‧‧アイデア出しから製品化までのプロセスをなぞりながら、        体系的に開発を進めることができるようになっています。
34. 34 競技VibeCoding ちょっと気になったのでkiroでもやってみた Vibe mode とSpec modeがある Vibe mode‧‧‧対話形式で仕様を進めていく。与えたプロンプトそのままに    実装し細かい使⽤はモデルに任せる Spec Mode‧‧‧アイデア出しから製品化までのプロセスをなぞりながら、        体系的に開発を進めることができるようになっています。
35. 35 競技VibeCoding ちょっと気になったのでkiroでもやってみた
36. 36 競技VibeCoding ちょっと気になったのでkiroでもやってみた
37. 37 競技VibeCoding ちょっと気になったのでkiroでもやってみた ↑3つのフェーズ
38. 38 競技VibeCoding ちょっと気になったのでkiroでもやってみた
39. 39 競技VibeCoding ちょっと気になったのでkiroでもやってみた
40. 40 競技VibeCoding ちょっと気になったのでkiroでもやってみた
41. 41 競技VibeCoding ちょっと気になったのでkiroでもやってみた
42. 42 競技VibeCoding ちょっと気になったのでkiroでもやってみた
43. 43 競技VibeCoding ちょっと気になったのでkiroでもやってみた タスクの依存関係もリストアップもしているのでバッティン グしないタスクをClaude Codeに並列開発させる。みた いなこともできる
44. 44 競技VibeCoding ちょっと気になったのでkiroでもやってみた 実際にtaskを実行するのはここ UIでぽちぽち 自動で進んでいく
45. 45 競技VibeCoding kiroでできたもの 時間 7m 30s ????? 要件満たし度 (5点満点) 4 ??? アーキテクチャ /構成 Vanilla JS アプリ TS+React構成 その他 UIの系統が CCと全然違う パステル系 びっくりするくらい時間がかかる 競技VibeCodingには向かないかも vibe mode spec mode
46. 46 競技VibeCoding kiroまとめ • UIがとても良い ◦ Agentが現在何を実⾏しているかが わかりやすい • （Steeringファイルを含めた）コンテキストが   IDE特有のUIで管理できる
47. 47 競技VibeCoding kiroまとめ ‧コードの中⾝に関しては、sonnet4系なので⼗分な質。これから もっとモデルが増えていくことに期待 ‧実装とともに⾃らコンテキスト（Steering）を編集し、⾃律的に 成⻑していくAgentであり、⼈間はそれを管理/確認しやすいように 作られているツールだと感じた
48. 48 ご静聴ありがとうございました