フロントエンド開発 with AIエージェント

Transcript

1. フロントエンド開発 with AIエージェント 〜 ここ半年の苦悩から得た学び 〜 2025/12/06 (土)
2. ⽬次 • 迷ったら全部試そう • AIと相性のよいアーキテクチャを • お⼿本を⽤意しよう • みなでAIを育成 • AIとの向き合い⽅ • まとめ
3. ⾃⼰紹介 所属：GMOインターネット株式会社 (24新卒) 趣味：アプリ開発🤖 / ⿂釣り🎣 / 筋トレ💪 出⾝：福岡🍜 いのうえ。 普段AWS周りTerraform、C#, TypeScript使ってます @Inoue416 @yuya_0811 @iyuya_pg
4. 突然ですが、皆さん ⽇頃、AIと仲良く‧楽しく 開発してますか？
12. 僕は毎⽇、喧嘩してます... 最近はちょっとだけ仲良くなれたと思う。
13. 本編へ... 都合上、ClaudeCodeでの例えが増えると思います... 他ツールでも考え⽅は同じと思っていますmm
14. SECTION 01 迷ったら全部試そう
15. 迷ったら全部試そう サンドボックス⽤意 • すぐに試せる • すぐに消せる • すぐに本番適⽤ Storybookでパーツのみでも
16. AIに遊び場を提供したところで次は...
17. 迷ったら全部試そう git worktreeで並列化 • すぐに試せる • すぐに消せる • すぐに本番適⽤ リソースが許す限り... N ClaudeCodeであればサブエージェントで並列化も
18. SECTION 02 AIと相性のよいアーキテクチャを
19. The Frontend
20. AIと相性のよいアーキテクチャを Feature First • 機能割で依存がない • 並⾏で⾛りやすい • 重複が⽣まれやすい Next.jsのAppRouterも ⾊々試しやすい
21. AIと相性のよいアーキテクチャを Feature First • 機能割で依存がない • 並⾏で⾛りやすい • 重複が⽣まれやすい Next.jsのAppRouterも ⾊々試しやすい 並列実装させやすい AIにリファクタをさせてメンテ
22. SPA
23. AIと相性のよいアーキテクチャを Vertical Slice 機能割で依存がない 並⾏で⾛りやすい リファクタが必須 https://kenfdev.hateblo.jp/entry/2024/10/22/205805より引用 並列実装させやすい AIにリファクタをさせてメンテ Jimmy Bogard により2018年に 提唱された
24. AIと相性のよいアーキテクチャを Vertical Slice 機能割で依存がない 並⾏で⾛りやすい リファクタが必須 https://kenfdev.hateblo.jp/entry/2024/10/22/205805より引用 並列実装させやすい AIにリファクタをさせてメンテ 機能ごとにアーキテクチャを試しやすい Jimmy Bogard により2018年に 提唱された
25. SECTION 03 お手本を用意しよう
26. この機能、path/…にある 実装計画書にある通りに実装よろ! 任せとき！
27. どれどれ... どや！ できたで！
31. ちゃうちゃう。 中途半端やで、綺麗にしてや OKOK！
32. どれどれ... 次こそ完璧やで！
36. もっと細かくやるか...
37. お手本を用意しよう AIは既存の構造を守ろうとする 既存の実装にかなり引っ張られる そのままドカっとやらせるとゴミが出てくる
38. お手本を用意しよう AIは既存の構造を守ろうとする 既存の実装にかなり引っ張られる そのままドカっとやらせるとゴミが出てくる 1箇所、AIと⼀緒にお⼿本となる実装をしてあげる
39. SECTION 04 みなでAIを育てよう
40. みなでAIを育てよう 個⼈的おすすめ • スラッシュコマンドで履歴から⾃動でドキュメント更新 • 機能別にドキュメントを分ける • 各ドキュメントをSkillsなどの機能に CLAUDE.mdやAGENTS.mdはなるべく スリムにしたい コンテキストは資産 無駄遣いしないよう、必要な時に必要な知識のみを
41. SECTION 05 AIとの向き合い方
42. AIとの向き合い方 AIとたくさん議論しよう • AIは謙虚なんてレベルじゃない • フラットもしくは敵対的に意⾒ してもらう • 不要を徹底的に削っていく • AIにも多⾓的視点を
43. AIとの向き合い方 AIとたくさん議論しよう • AIは謙虚なんてレベルじゃない • フラットもしくは敵対的に意⾒ してもらう • 不要を徹底的に削っていく • AIにも多⾓的視点を それ以前に ⾃⾝が議論できるレベル である必要がある
44. SECTION 06 まとめ
45. まとめ • サンドボックスをAIに提供してあげ、迷ったら全部試そう！ • AIが⾛りやすい構造 • まずは⼀緒にお⼿本を作ってあげる • 必要な時に必要な知識を与えよう → コンテキストは資産 • AIとはたくさん議論しよう → ⾃⾝のレベルアップ
46. SECTION 07 最後に
47. 最後に 本イベントの運営、スポンサーの⽅々、 参加者の皆様に⼼より感謝申し上げます
48. ご清聴ありがとうございました ご質問・ご意見をお待ちしております