AIを加速装置として実現する爆速キャッチアップ〜新卒が10年もののサービスでどのように戦うか〜

https://findy-tools.connpass.com/event/356879/
でお話しした
AIを加速装置として実現する爆速キャッチアップ〜新卒が10年もののサービスでどのように戦うか〜
のスライド資料です

Transcript

1. 1 AIを加速装置として 実現する 爆速キャッチアップ 〜新卒が10年もののサービスでどのように戦うか〜 横⼭遥⼄ (はるおつ) ロリポップ‧ムームードメイン事業部 2025.06.11
2. 2 ⾃⼰紹介 ロリポップ‧ムームードメイン事業部 横⼭ 遥⼄ はるおつ • GMOペパボ2024年新卒エンジニア • @haruotsu_hy/@haruotsu • 呼吸をするようにドメインを買っています。 • あなたの推しドメインはなんですか？
4. 4 今回の発表の背景 4月 6月～8月 8月～2月 GMO インターネット グループ 合同研修 GMO ペパボ研修 エンジニア 研修 事業部配属OJT 研修 5月 技術部 GMOペパボの新卒研修
5. 5 今回の発表の背景 事業部配属OJT 研修 技術部 各事業部で 1ヶ月ごとにバリューを出すことが求められる！
6. GMOペパボの技術スタック - Ruby, PHP, Go… - vue, nuxt, React, next… - AWS, GC, オンプレ... (+10年以上かかって作られた⼤量のコード) 技術スタックの多様性 6 https://tech.pepabo.com/tech-stack/ サービスごとに技術スタックが大きく異なる
7. ⼀ヶ⽉でバリューを出す....! 7 AI前提。 むしろ、使わなきゃ無理
8. 開発を進める上での障壁 開発を進める上で障壁となること 8 すぐに開発ができないのには 理由がある。 エンジニア 研修
9. 開発を進める上での障壁 開発を進める上で障壁となること 9 ドメイン知識
10. 開発を進める上での障壁 開発を進める上で障壁となること 10 ドメイン知識 サービス理解
11. 開発を進める上での障壁 開発を進める上で障壁となること 11 ドメイン知識 サービス理解 ユーザ視点
12. 開発を進める上での障壁 開発を進める上で障壁となること 12 ドメイン知識 言語・プログラミングスキル サービス理解 ユーザ視点
13. 開発を進める上での障壁 開発を進める上で障壁となること 13 ドメイン知識 言語・プログラミングスキル サービス理解 ユーザ視点 複数言語スキル
14. 開発を進める上での障壁 開発を進める上で障壁となること 14 ドメイン知識 言語・プログラミングスキル サービス理解 ユーザ視点 複数言語スキル フレームワーク習得
15. 開発を進める上での障壁 開発を進める上で障壁となること 15 ドメイン知識 言語・プログラミングスキル アーキテクチャ構成の理解 サービス理解 ユーザ視点 複数言語スキル フレームワーク習得
16. 開発を進める上での障壁 開発を進める上で障壁となること 16 ドメイン知識 言語・プログラミングスキル アーキテクチャ構成の理解 サービス理解 ユーザ視点 複数言語スキル フレームワーク習得 システム全体像
17. 開発を進める上での障壁 開発を進める上で障壁となること 17 ドメイン知識 言語・プログラミングスキル アーキテクチャ構成の理解 サービス理解 ユーザ視点 複数言語スキル フレームワーク習得 システム全体像 インフラ構成
18. 開発を進める上での障壁 開発を進める上で障壁となること 18 ドメイン知識 言語・プログラミングスキル アーキテクチャ構成の理解 既存実装の理解 サービス理解 ユーザ視点 複数言語スキル フレームワーク習得 システム全体像 インフラ構成
19. 開発を進める上での障壁 開発を進める上で障壁となること 19 ドメイン知識 言語・プログラミングスキル アーキテクチャ構成の理解 既存実装の理解 サービス理解 ユーザ視点 複数言語スキル フレームワーク習得 システム全体像 インフラ構成 レガシーコード
20. 開発を進める上での障壁 開発を進める上で障壁となること 20 ドメイン知識 言語・プログラミングスキル アーキテクチャ構成の理解 既存実装の理解 サービス理解 ユーザ視点 複数言語スキル フレームワーク習得 システム全体像 インフラ構成 ファイル分割 レガシーコード
21. 開発を進める上での障壁 開発を進める上で障壁となること ドメイン知識 言語・プログラミングスキル アーキテクチャ構成の理解 既存実装の理解 これらが 揃って初めて 開発に取り掛かる ことができる
22. どのように向き合ったか 22
23. どのように障壁に向き合うか AIは簡単なことでも、何度聞いても怒らない。 雑に聞いてもキーワードに辿り着ける。 ドメイン知識の習得 23 基本のアプローチはもちろんやる • サービスサイトを触る → 契約する → 実際のユーザーとして使う • ヘルプページを読む • 先輩に質問する +AI活用の組み合わせ なんかドメインについて学びたいです。エンジニア目線で整理してもらえます？ → レジストラ、レジストリ、 DNS、Whois情報... DNSってなんですか？Aレコードってなんですか？ ... → とてもよい質問です！「 Aレコード」や「DNS」は、インターネット上の住所 ...
24. どのように障壁に向き合うか • 技術要素の洗い出し ⾔語‧プログラミング能⼒ 24 コードベース全体をみて、今回の要件に必要な技術スタックを教えて → ruby on rails, Elasticsearch, JWT + Redis, …. ドリル形式で練習問題を作りつつ俺を Elasticsearchのプロに仕上げてくれ → チュートリアルを作成します ... • 必要な技術要素の基本的な使い⽅をドリル形式で学ぶ コードベース全体をみて、今回の要件において添付した学習内容とどう対応しているか説明して、追 加で学んでおくべきものがあれば教えてください → … • 本番環境と要件のすり合わせ 学習&既存実装への応用を爆速で行える
25. どのように障壁に向き合うか • コードベース‧アーキテクチャ分析 アーキテクチャ構成‧既存実装の理解 25 コードベース全体をみて、〇〇処理の主要ディレクトリの役割や各エンドポイントからのリクエストの 流れがわかるように mermaidにまとめて。どこのファイルのどのメソッドかも示して → …
26. どのように障壁に向き合うか • ミニマムな構成で既存実装を⼿元の環境で再現 アーキテクチャ構成‧既存実装の理解 26 mermaid図で表現したものを、開発環境で最小構成で再現するための docker-compose.ymlを作 成してください → … → vibecodingでDBを含めた技術スタックを既存実装に沿ってモックを作成する。 理論理解 → 環境構築 → 実装体験の3段階で アーキテクチャを体系的に 身に染み込ませる ＋先輩エンジニアのサポートで着実な知識を見つける
27. 障壁を突破した後のAI活⽤ 27
28. 障壁突破後のAI活⽤ cursorで既存実装を踏まえながら、詳細設計の叩き台作成 詳細設計と認識合わせ 28 要件定義書に沿って、この新機能の詳細設計書を作成して : 1. 技術仕様, 2: ファイル構成 (パス付き), 3: API設計, 4: DB設計変更点, 5: エンドポイント → … → AIと協業しながら、詳細設計書書き上げる。 → 完成後に cursor rulesに追加 設計書を元に、ステークホルダーと議論する • マネージャ「ビジネス要件はこの理解であってますか？」 • デザイナー「UIの動作仕様、この通りで大丈夫ですか？このデザインの追加をお願いしたいです」 • リーダー「技術選定、間違いないですか？他にも検討すべき選択肢はありますか？」 AI&人間設計書 +レビュー = 堅牢な設計書の作成 ズレのない合意ドキュメントの作成
29. 障壁突破後のAI活⽤ Figma MCPでcssやコンポーネント構成を読み込ませた上で、Let’s Vibecoding フロントエンド 29 バックエンド 詳細設計書を読み込ませながら、Let's Vibecoding ファイルの場所やメソッド名までガチガチに定義しているため、半⾃動的に⽣成可能
30. まとめ 30
31. まとめ 31 開発着⼿までの障壁をAIとともに乗り越える 1. ドメイン知識 基本アプローチ + AI体系化 + レビュー 2. 技術学習 技術要素洗い出し + AIドリル学習 + 本番コード照合した体系化 3. アーキテクチャ理解 Cursor分析 + mermaid図検証 + 簡易実装で理解 1. 詳細設計と認識合わせ AI叩き台作成&修正 + ステークホルダーとの合意 2. vibecodingで爆速実装 堅牢な詳細設計を元にMCPなどのツールをフル活用 障壁を乗り越えた後はAIとともににAI&⼈間healthyな詳細設計から実装へ AIという「加速装置」を武器に新規参⼊プロジェクトへ最速キャッチアップ
32. 32 Thank you! はるおつ、という名前を覚えてくれたら嬉しいです @haruotsu_hyでおまちしています