1ヶ月でVibe Codingの限界を感じて AIを増幅装置として成長した話

Transcript

1. 　 1ヶ月でVibe Codingの限界を感じて AIを増幅装置として成長した話 東京AI祭　2025
2. 本日のテーマ はじめに • 新卒エンジニア主体でAIエージェントを作る • Vibe Codingの弊害、学んだこと • どのようにAIとコーディングしていくべきか
3. こんな方におすすめ はじめに • 開発未経験でエンジニアになった方 • これから本格的にシステムを開発していく方 • ジュニアエンジニアを指導する立場の方
4. 1. 新卒エンジニア主体でAIエージェントを作る
5. TOKIUMの新卒研修 新卒エンジニア主体でAIエージェントを作る TOKIUMでは • 新入社員研修1ヶ月 • 開発研修1ヶ月 を実施！ 開発研修の内容 • Progate • Rails チュートリアル 最後の5日間で「n8n」を使い AIエージェント開発を学ぶ！
6. 配属初日にリーダーに 新卒エンジニア主体でAIエージェントを作る 6月からAIエージェントのリーダーです！ Rails チュートリアルきつかったけど、そろそろ開発研修も終わりか～ そういえばもうすぐ配属発表だ（ドキドキ） まじか
7. 思い切った決断ができた理由（後日談） 新卒エンジニア主体でAIエージェントを作る TOKIUMでは新卒のエンジニアでも 大きな裁量権がある その決断ができるのは • 失敗を受け入れ挑戦を 応援する文化 • 気軽に相談できるサポート体制 • 品質担保のためのレビュー体制 やQAのチェック が背景にある
8. リーダーになり、まず決めたこと 新卒エンジニア主体でAIエージェントを作る ノーコードではなく、TypeScriptで開発しよう！ 理由 • ノーコードツールは裏の仕様が分かりにくい • コード書けるようになった方がキャリア的に良い Vibe CodingでAIエージェントのPoC開発開始！
9. その結果... 新卒エンジニア主体でAIエージェントを作る 流石に一発ではできなかったけど、 少し修正したら２〜３日で動くものができた！ この調子で機能追加していって精度も上げれば、 １か月後ぐらいにはそのまま製品として出せるかも～ • 設計を考えていないため内部の処理が煩雑すぎ... • 一度のPRで300行以上の変更が当たり前... 　自分が作ったはずなのに、何一つ分からない！ しかし、時が経つにつれ、、、
10. 2．PoC開発で見えた、Vibe Codingの弊害
11. わけわからんシステムの出来上がり PoC開発で見えた、Vibe Codingの弊害 Vibe Codingをしまくった結果、どこで何がどう動いているのか 誰もわからない迷宮のようなシステムが完成 ここでは「そんなことある？」と疑いたくなるほどの謎設計を幾つかご紹介 します
12. 謎設計その①　Routerに全ての処理を書く AIにとにかく新機能を追加させたら 「リクエストからレスポンスまで」 全ての処理を行う600行の 神 Routerが爆誕 API作りました！ （600行のドデカファイル１つ） PoC開発で見えた、Vibe Codingの弊害
13. 謎設計その②　複雑に絡み合うスパゲッティ いわゆる 「スパゲッティコード」 • 神 Routerはまずいと知り、いくつかの ファイルに切り出してみたが、 余計に訳が分からないコードになる • エラーが起きれば、原因箇所を 特定するのは至難の業 PoC開発で見えた、Vibe Codingの弊害 AIでもお手上げ
14. 謎設計その③　Mastra使ってませんでした Mastraとは... • AIエージェント開発のための TypeScript製フレームワーク MastraでAIエージェントを 開発していたはずが、 知らぬ間にNext.jsで開発していた... PoC開発で見えた、Vibe Codingの弊害 Mastra？良く分からんから Next.js使うわ
15. 反省と学び ★ 全てをAIに任せるのは設計リスクが大 ◦ 適切な依存関係や設計は常に大切 ◦ そこを疎かにすると拡張性・柔軟性のあるシステムにはならない ★ 「What」よりも「Why」が大事 ◦ なぜ書いたのかの本当の理由は、人でないと説明が難しい ◦ 変更してもいいのか...判断がAI頼りに ★ 「愛」があってこそのプロダクト開発 ◦ Vibe Coding で作ったものには愛着が湧かない ◦ 「自分が作った」と自信をもって言えることでモチベが上がる PoC開発で見えた、Vibe Codingの弊害
16. 3．新たなる挑戦
17. １から作り直す！ 新たなる挑戦 ★ コードを作りなおす過程で、新しいことに次々と出会った PoCから製品版への移行に伴い、 ベテランエンジニアにがっつり入っていた だき１から作り直すことに！ その中で... Vibe Codingの失敗から、設計・計画的な 開発に力を入れ、コードをしっかり理解する ように
18. 出会ったもの①　DDD 新たなる挑戦 DDDとは... • 「ビジネスのルールや言葉」をそのまま 「システムの設計」の中心に据えて 開発を進めるための考え方 もちろん最初から分かるわけないが... • とりあえず真似てみた • 元々は無秩序なコードだったが、初めてコードを 「意味のあるまとまりで捉える」考え方に触れた 成瀬 允宣『ドメイン駆動設計入門 ボトムアップでわかる！ドメイン駆動設計の基本』
19. 出会ったもの②　オニオンアーキテクチャ 新たなる挑戦 ぐちゃぐちゃだった依存関係が... • 依存関係が整理されることにより だんだんコードが読みやすくなっていく • 変更を加える際に、どのファイルを 見れば良いかがわかるので認知負荷が減る オニオンアーキテクチャとは... • システムの「最も大切な部分」を 「変わりやすい技術」から守るための設計の考え方 TamoTech Blog『“中身”を守る設計とは？オニオンアーキテクチャを図解で理解しよう！【設計・アーキテクチャ】』
20. 出会ったもの③　スクラム 新たなる挑戦 スクラムとは... • アジャイル開発において、複雑な プロダクト開発を効果的に 進めるためのフレームワーク 開発の見通しが立たない状況から... • 「いつまで」に 「だれ」が「なに」をするのかが明確に • メンバー間の現状の認識・理解を同期させつつ、 小さな課題に気づきやすくなる！
21. 新しいこと、分からないことに沢山挑戦した結果 新たなる挑戦 ★ AIと壁打ちする癖がつき、言語化できるようになった ◦ 先輩エンジニアに質問する前に、AIと壁打ちすることで質問の回数が減少 ◦ 自分がどこまで分かり、どこから分からないかを言語化できるように ★ 実践する中でしか手に入らない学びを得た ◦ AIのおかげで理解までのスピードが上がり、実践の場数が踏める ◦ Claudeをコーディングツールではなく即時レビュワーとすることで、 設計思想ガン無視のコードになることはなく、 一人でもDDDやオニオンに沿ったコードを書くことができる
22. 4．学んだこと、まとめ
23. 現在では... 学んだこと・まとめ 現在では... • 日々壁にぶつかりながらも、プロダクトを成長させている実感 • 「AIで」というより「AIと」開発することで、通常よりも遥かに スピード感を持って成長できていると実感 なぜこういった成長ができているのか... AIのおかげで 「とりあえずやってみる」 ことへのハードルが下がった • チームリーダーの裁量権と合わさり、 分からないことにぶつかる速度、回数が 爆発的に上がっている
24. AI時代のエンジニア 学んだこと・まとめ だが、闇雲にやっているだけではゴールに辿り着く精度は低い... "とりあえずやってみる"の先で AI時代のエンジニアに必要なものとは 徹底的に調べてみる！ 理解したうえで実践を沢山してみる！
25. まとめ 学んだこと・まとめ ★ 新卒・未経験こそチャレンジを！！ ◦ 実践からしか学べないことが沢山ある！ ◦ 挑戦するからこそ本質的な理解がついてくる！
26. 26 宣伝: 「AI×プロダクト開発」がテーマのLT会やります！ 寿司ときLTナイト AIを活用して頑張りたい・頑張ったこと共有LT会 🗓10/22(水) 19:30〜 📍TOKIUMオフィス（東銀座駅徒歩3分）