Vibe Coding 現場レポート ― AI前提のソフトウェア開発の裏側をのぞく

Design Solution Forum 2025
13:30 - 14:00
GMOペパボでは、社内のあらゆる活動を “AI前提” という考えのもと行っています。
特にAI前提のソフトウェア開発において、Vibe Codingは重要なトピックの一つと捉えています。
本発表では、Vibe Codingの基本をおさらいしたのちに、新卒向けのVibe Coding研修、中途入社向けのVibe Codingオンボーディング、エンジニア以外のVibe Coding実践例、エンジニアの普段の業務での活用事例といった社内での活動の事例を紹介し、最後にGMOペパボでのVibeCodingやAI前提での考え方をご紹介します。

Transcript

1. 1 Vibe Coding 現場レポート AI前提のソフトウェア開発の 裏側をのぞく 武⽥ ⼤佑 / タケダ ダイスケ GMOペパボ株式会社 EC事業部 Design Solution Forum (2025.10.05)
2. 2 ⾃⼰紹介 EC事業部 ECグループ プロダクトチーム 武⽥ ⼤佑 Daisuke Takeda • Webエンジニア ◦ Go, PHP, Ruby, JS, etc... • 去年は業務活⽤とは別に、AIやLLM分野 での発表もしました(ICONIP, JASAI) • 本⽇DSF初参加🎉 • X: @doskoi64/どすこいという名前で活 動しています 本⽇のスライドも公開！
3. • GMOペパボでのVibe Codingをはじめとした AI前提の取り組みを紹介します • この前提となるVibe CodingとAI前提のマイン ドセットを紹介します • Vibe Codingを使っている開発現場の実際につ いて紹介します 今回のお話では... 3
4. 4 アジェンダ 1. はじめに 2. GMOペパボでVibe Codingの取り組み 3. Vibe CodingとAI前提 4. Vibe Codingの実践例 5. 知⾒とまとめ
5. 会社概要 GMOペパボは「クリエイター⽀援」をしている会社です！ • 設⽴⽇：2003年1⽉10⽇ • 従業員数：442名（正社員 359名 / 臨時従業員 83名）（2023年12⽉末時点） • 売上⾼（連結）：109億360万円（第22期 2023年1⽉〜2023年12⽉） • 証券コード：3633（東京証券取引所スタンダード市場） 5
6. 私たちはインターネットやテクノロジーの⼒で情報発信のハードルを下げ、 あらゆるアウトプットを世界中に増やします。 さまざまなアウトプットが進化や価値を⽣み出すように、 私たちもプロダクトを⽣み出し続け、ユーザーと共に進化し拡⼤していきます。 ミッション ⼈類のアウトプットを 増やす 6
7. ミッション‧事業内容 ペパボは、表現活動を⽀援するためのさまざまなウェブサービスおよびスマホアプリを提 供しています。それぞれのサービスは、以下のようにセグメント分けされています。 7 ドメイン‧レンタル サーバー事業 EC⽀援 事業 ハンドメイド 事業 その他 その他
8. 8 商売をするすべての⼈を⽀え、 ECの多様性を広げる これからビジネスを始める⽅から、すでに成⻑中のビジネ スを⼿がける⽅まで、商材や事業規模に関わらず「成⻑で きる」ECサイトが構築できるサービスです。多彩な機能と ⼿厚いサポートで商売をする⼈を⽀援しています。 EC⽀援事業「カラーミーショップ」 国内最⼤級のECサイト構築サービス 利⽤料⾦ ⽉額費⽤0円〜 主なユーザー 個⼈商店や中⼩店舗 契約件数 5.0万件 ※2023年12⽉末時点
9. 9 私たちは「⼈類のアウトプットを増やす」ことをミッションとし、 インターネットやテクノロジーの⼒で情報発信のハードルを下げる⽀援をしています。
10. 10 アジェンダ 1. はじめに 2. GMOペパボでVibe Codingの取り組み 3. Vibe CodingとAI前提 4. Vibe Codingの実践例 5. 知⾒とまとめ
11. 11 AI使ったコーディングについて 11 GMOペパボでのVibe Codingの取り組み
12. 12 完全に雰囲気に⾝を任せて、コードの 詳細に気を払わず、⾃然⾔語だけで指 ⽰をしてコーディングする Andrej Karpathy (X:@karpathy) 2025-02 OpenAIの創設メンバー Vibe Codingとは GMOペパボでのVibe Codingの取り組み
13. 13 GMOペパボでのVibe Codingの取り組み GMOペパボでのVibe Codingの取り組み • ペパボの研修は現時点で良いやり ⽅を⾝につけてもらう • 2025年ではVibe Codingをはじめ としたAI前提の技術も不可⽋ • また、ペパボでのAI前提の取り組 みと、その根底の考えを紹介 tech.pepabo.com
14. 14 GMOペパボでのVibe Codingの取り組み GMOペパボでのVibe Codingの取り組み • オンボーディングの中でAIを活⽤ することで、短期間で新規機能 開発をした • オンボーディングの中で、⼈間 同志の時間が必要な箇所を⾒極 め、代替できる箇所をAIで代替 した • 特に、ドメイン知識の習得でAI を駆使した tech.pepabo.com
15. 15 GMOペパボでのVibe Codingの取り組み tech.pepabo.com GMOペパボでのVibe Codingの取り組み
16. 16 アジェンダ 1. はじめに 2. GMOペパボでVibe Codingの取り組み 3. Vibe CodingとAI前提 4. Vibe Codingの実践例 5. 知⾒とまとめ
17. Vibe CodingとAI前提 17
18. 18 完全に雰囲気に⾝を任せて、コードの 詳細に気を払わず、⾃然⾔語だけで指 ⽰をしてコーディングする Andrej Karpathy (X:@karpathy) 2025-02 OpenAIの創設メンバー Vibe Codingとは (再掲) Vibe CodingとAI前提
19. Vibe CodingとAI前提 19 2022年 ~ 2023年 AIがコード補完をし、tabキーを押すことで決まった構文 や同じ ようなコードの繰り返し を自動で書いてくれる。
20. Vibe Codingによる根本的な変化 20 2024年 最初に指示を出すことで、複数ファイル を跨いで、必要な実装 をほとんど 書いてくれる。 Vibe CodingとAI前提
21. Vibe Codingによる根本的な変化 21 2025年 リポジトリを自律的に読んで、必要な実装を自動で書いて くれ たり、並列で起動して開発 を進めることもできる。 Vibe CodingとAI前提
22. 22 ⼈間とAIのドライバー交代 Vibe CodingとAI前提
23. 23 https://staff.persol-xtech.co.jp/hatalabo/mono_engineer/568.html Vibe Codingによる根本的な変化 Vibe CodingとAI前提
24. 24 https://speakerdeck.com/watany/the-end-of-the-special-time-granted-to-engineers?slide=36 Vibe Codingによる根本的な変化 Vibe CodingとAI前提
25. 25 ⼈間が数⼗、数百⾏コードを1⽇で書くところ... AIを使えば1万⾏書くことができる 圧倒的な量を誰でも書くことができる ⼈間とAIのドライバー交代 Vibe Codingによる根本的な変化 Vibe CodingとAI前提
26. 26 しかし 圧倒的な量のコードを 簡単にはリリースできない... Vibe CodingとAI前提
27. 27 • 正しく動作することの検証はどうしよう... • ⼤量の新規機能追加をどうやろう... • コードの品質をどうやって維持しよう... 圧倒的な量のコードに対して... Vibe Codingによる根本的な変化 ⼤量のコードによって顕在化する問題がある Vibe CodingとAI前提
28. 28 AIによる桁違いのコードの物量をなんとかしたい！ そこで エンジニアリング どうやって⼤量リリースするのか Vibe Codingとエンジニアリング Vibe CodingとAI前提
29. 29 • ⾃動テストを徹底することで⼤量に検証する • 適したコード設計で⼤量の機能追加を⽀える • 静的解析で⼤量のコードを保証する 圧倒的な量のコードに対して... Vibe Codingによる根本的な変化 これまで培ってきた技術が より⼀層真価を発揮する Vibe CodingとAI前提
30. 30 どれもAIに関係なく既に実践されている技術です！ 特別な技術が必要なのではなく、まずは、これまで培って きた技術が、より⼀層真価を発揮することになります。 また、企画やプロモーション、カスタマーサポートなど、 組織全体で対応していく必要があります。 Vibe Coding時代のエンジニアリング Vibe Codingとエンジニアリング Vibe CodingとAI前提
31. 31 AIによる圧倒的な量を どうやって価値へ繋げるのか = AI前提 Vibe CodingとAI前提
32. 32 AIによる圧倒的な量を どうやって価値へ繋げるのか = AI前提 Vibe CodingとAI前提
33. 33 アジェンダ 1. はじめに 2. GMOペパボでVibe Codingの取り組み 3. Vibe CodingとAI前提 4. Vibe Codingの実践例 5. 知⾒とまとめ
34. 34 Vibe Codingの実践例
35. Vibe Codingと実践例 Vibe Codingが提唱され以降、Agentic Codingや AI-assisted Coding、Natural Language Programingなど さまざまな関連⽤語が登場し、さまざまな定義があります が、本発表で指す”Vibe Coding”は、AIに⾃然⾔語で指⽰ を出してコード⽣成をさせる開発全般のことを指します。 Vibe Codingについての単語の注意 35
36. 事例紹介 • バッチ機能を担う多数のコードをリプレイスします • しかし、既存コードにはドキュメントや⾃動テストが ⼗分にはない • 全体の設計を整えつつ⾃動テストも充実させたい ⽬的紹介 36
37. 事例紹介 • ドキュメントが無く⾃動テストが充実していない、古い⾔語ラ ンタイムのコードをバージョンアップ対応する実装難易度は、 AIを⽤いて全体を置き換えることとそれほど実装難易度に差が ないのではないかと考え、検証も含めて実施した • 静的解析があるコンパイル⾔語で、並列実⾏にも強みがあるGo を⽤いたリプレイスを採⽤した 経緯 37
38. 事例紹介 • ⾃動テストが充実していて、ディレクトリ構成などが整 えたGoの実装へのリプレイスを実施する • 既に実装されているバッチ処理の仕様はそのまま • できるだけ同じプロンプトで実装を完了させる ⽬指すゴール 38
39. 事例紹介 • AIによるコード⽣成のみで実装させる⽅法を⽬指した • 最終的に、AIによる実装で、複数の置き換え作業を並 列に進められる状態を⽬指す • レビューはAIに丸投げをするのではなく⼈間が従来の ⼿法でする ⽅法 39
40. 事例紹介 • これらの状況で試⾏錯誤した様をお伝えします！ • うまくいかなかった使い⽅から、うまくいった使い⽅ を具体的に紹介します！ • Vibe Codingを実際にどのようにしているのか、具体的 にどのようにコードを⽣成しているのかをお伝えでき ればと思います！ 今回のお話では... 40
41. 41 事例紹介 意図 単純にリプレイス元のコードを指定して、Goにリプレイスするように指⽰ 最も単純で最低限のプロンプトでコード⽣成させた <@元のコード>をGoにリプレイスしてください。 NG例1: 単純にリプレイスをAIに指⽰する
42. 42 事例紹介 結果 巨⼤な1ファイルmain.goにすべての実装が書かれた 実装は動かなかったが、どこが原因で動いていないかの調査が困難 反省 レビューも運⽤もできない 正常に動くようにして、本番環境へマージするのは困難 ⼩さな実装だと、この⽅法でのリプレイスが⼗分可能かもしれない NG例1: 単純にリプレイスをAIに指⽰する
43. NG例2: 中間⽣成物を作らせてそこからgoのコードを⽣成 43 事例紹介 意図 ⼀度、仕様を⽂章にまとめさせた その仕様をまとめた⽂章を元に新しくGoのコードを書かせた まずは、<@元のコード>のドキュメントを中間⽣成物として書いてください。 仕様や処理の詳細について書いてください。 次に、<@中間⽣成物>を参考に、Goへのリプレイスを書いてください。
44. 44 事例紹介 結果 ファイル分割や依存するDBを扱う処理はある程度うまくできた！ しかし、ほとんど実装が集中している巨⼤なファイルは残ったまま 詳細まで実装がされてなかったり、TODOコメントだけでで未実装だったり 反省 詳細まで作り込んで実装して欲しい コードの全体的な設計や構成を意識して複数のファイルに分割して欲しい NG例2: 中間⽣成物を作らせてそこからgoのコードを⽣成
45. 45 事例紹介 意図 リプレイス元のコードも指⽰、テストコードも書いてもらうようにした これまでの反省を⽣かした結果を詰め込んだ <@中間⽣成物md>を参考に、<@元のコード>をGoへのリプレイスを書いて ください。 <ディレクトリ構成を書いたREADME>を参考にパッケージ分割やファイル分 割をして。 それぞれの実装に、できるだけテストコードを書いて。 OK例1: 元のコード、ドキュメント、READMEを参考にする さらに、テストコードも書く
46. 46 事例紹介 結果 ファイル分割や全体のディレクトリ構成が整った その上で、実装がほとんど完了していた テストコードも単純なケースは書かれていた 実⾏したら動くし、動作も正しそうだった！ 反省 まぁまぁよかったけど.... OK例1: 元のコード、ドキュメント、READMEを参考にする さらに、テストコードも書く
47. 47 事例紹介 結果 ファイル分割や全体のディレクトリ構成が整った その上で、実装がほとんど完了していた テストコードも単純なケースは書かれていた 実⾏したら動くし、動作も正しそうだった！ 反省 まぁまぁよかったけど.... 巨⼤PRになってレビューが困難...！ OK例1: 元のコード、ドキュメント、READMEを参考にする さらに、テストコードも書く
48. 48 事例紹介 <@中間⽣成物md>を参考に、<@元のコード>をGoへのリプレイスをします。 <ディレクトリ構成を書いたREADME>を参考にパッケージ分割やファイル分割を します。これをいくつかのタスクに分割して進めたいです。 タスク分割をしてmdに書き出してください。 <@元のコード>をGoへのリプレイスをします。 <ディレクトリ構成を書いたREADME>を必ず参考にしてください。 今回は<タスクmd>をさらにサブタスクに分け、テスト駆動開発で実装します。 そのようなサブタスクに分解してください。 サブタスクをもとにテスト駆動開発で実装していってください。 OK例2: タスク分解→各タスクをサブタスクにわける →TDDの指⽰
49. 49 事例紹介 意図 これまでの知⾒を取り⼊れて、 • タスク分解→サブタスク分解×テスト駆動開発という語 をプロンプトに含め、少しずつ実装する • タスクごとにPRを切ることで、⼤きすぎないPRでマー ジしていける OK例2: タスク分解→各タスクをサブタスクにわける →TDDの指⽰
50. 50 事例紹介 結果 ⼗分レビューできる⼤きさのPRに分けることができた！ テストコードも⼗分に書けている 実装の⽅向性が変な時や、意図してない動きをした時に⾒つけることができる コードの量によってPRを分割させることもできる 反省 タスク分解、サブタスク分解で妥当かどうかは⼈間の判断が必要 タスク実⾏の粒度が⼩さいので、やり直しも簡単にさせられる OK例2: タスク分解→各タスクをサブタスクにわける →TDDの指⽰
51. 51 アジェンダ 1. はじめに 2. Vibe CodingとAI前提 3. Vibe Codingの実践例 4. 知⾒とまとめ
52. 52 知見とまとめ
53. 知⾒とまとめ 53 必要な情報を与え、タスク分解して、タスクごとでサブタス クに分けて順番に実装してもらう。 • タスクごとにPRを分けて、少しずつマージしていく • 必要に応じて、サブタスクごとにテストコードを書いて もらったりドキュメントに書いてもらったりできる • PRごとにレビューがしやすい • タスクごとに失敗したらやり直してもらうこともできる 実践的な⼯夫
54. 54 • Vibe Codingにおいて、試して失敗して改善してという サイクルを⾼速に回すことで良くなっていった！ • 失敗の判断と改善の⼯夫で⼈間がサポートしてあげ て、AI Agentを上⼿に使えるようになった！ • ⼈間側も完成物に対する⾼い解像度が必要になりそう • Vibe Codingによって短時間で実装を試せるので、ガン ガン失敗しても時間浪費は短かい 実践の中の知⾒ 知⾒とまとめ
55. 55 実践の中の知⾒ 知⾒とまとめ • 実装完了まで⼈間がコードを触る時間が短くなった • 設計,レビュー/検証が⼈間の仕事になりそう • ⼈間の仕事を⾒極め、それ以外をAIに代替する
56. 56 実践の中の知⾒ 知⾒とまとめ • 実装完了まで⼈間がコードを触る時間が短くなった • 設計,レビュー/検証が⼈間の仕事になりそう • ⼈間の仕事を⾒極め、それ以外をAIに代替する
57. 57 実践の中の知⾒ 知⾒とまとめ • 設計,レビュー/検証が⼈間の仕事になりそう • ⼈間の仕事を⾒極め、それ以外をAIに代替する これがAI前提
58. 58 GMOペパボの 主な取り組みについて
59. 59 GMOペパボの取り組み ぜひテックブログも⾒てみてください！ tech.pepabo.com
60. 募集中の職種や、詳しい社内の環境や制度に関しては GMOペパボ株式会社 採用サイト をご覧ください。 60 GMOペパボでは新しい仲間を募集しています
61. 61 ご静聴ありがとうございました！