Next.js開発におけるAIの参画 ~メイン開発と両立する「言語化」と「改善」の工夫~

2025-08-27「実践Next.js！AIアウトプットと コンポーネント設計」 最新事情 LT
にて登壇

ref: https://findy.connpass.com/event/365880/

Transcript

1. Next.js開発における AIの参画 ~メイン開発と両立する「言語化」と「改善」の工夫 ~ 2025-08-27「実践Next.js！AIアウトプットと コンポーネント設計」 最新事情 LT
2. kii @kiichi_sugihara 株式会社 ツクルバ Frontend Tech Lead 自己紹介
3. AIと一緒に Next.js開発する際の課題
4. 暗黙知の言語化 AI Agentと一緒に開発する際の課題
5. Next.jsで開発してもらう際の暗黙知 • 最新の開発方法を、学習できてない。 • Next.jsは、自由度が高い ◦ RSCを使ったcomponentの設計どうする？ ◦ どこまでコロケーションするの？ ◦ cache戦略どうするの？ ◦ etc
6. メインの機能開発に追われて、 時間取りにくい。。。 開発の暗黙知を言語化したいんだけど
7. メイン開発を止めずに、 どうやって AIのための環境整備するか？
8. アプローチ
9. メインの機能開発で必要になった際に、 Knowledgeを育てる環境を作る 要求 要件 実装方針 タスク 実装
10. メインの機能開発で必要になった際に、 Knowledgeを育てる環境を作る 要求 要件 実装方針 タスク 実装
11. 設計フェーズ 要求 要件 実装方針 タスク 実装
12. 設計フェーズの課題 実際のcodeや頭の中には、方針あるんだけど Docがない。 • ADRで伝えたいんだが、書いて無い！！ • 直近のPJのcodeを参考に書いてもらう 要求 要件 実装方針 タスク 実装
13. 設計フェーズのアプローチ 要求 要件 実装方針 タスク 実装 ADRやDocsを作成/保守するための、 Docs/commandsを用意して一緒に作って参照
14. 例: ADRを書くためのDocs
15. ADR例1: API Clientやrequest memolization周り
16. ADR例2: Suspense/Streamingパターンの使用を限定的にする
17. Design Docでは、ADRを参照させる
18. 実装フェーズ 要求 要件 実装方針 タスク 実装
19. 実装フェーズの課題 指示した指摘を汎用化したいけど。。。 • 作業のcontext汚したくない • 開発作業を止めたくない。 要求 要件 実装方針 タスク 実装
20. 実装フェーズのアプローチ インボックス (Tips)にメモさせて、 メイン作業に集中させる。 メモしたTipsを別途切り出して Knowledge化 要求 要件 実装方針 タスク 実装
21. Tipsの例
22. Tips処理Doc
23. 例: PlaywrightMCPの使い方などを、Docs/PR化
24. 設計フェーズのアプローチ インボックス (Tips)にメモさせて、 メイン作業に集中させる。 メモしたTipsを別途切り出して Knowledge化 要求 要件 実装方針 タスク 実装
25. まとめ
26. メイン開発を止めずに、 どうやって AIのための環境整備するか？
27. メインの機能開発で必要になった際に、 Knowledgeを育てる環境を作る 要求 要件 実装方針 タスク 実装
28. 完璧なKnowledge作成を 最初から目指さない。
29. 必要に応じて Knowledgeを育てる 要求 要件 実装方針 タスク 実装 要求 要件 実装方針 タスク 実装 要求 要件 実装方針 タスク 実装 ・ ・ ・
30. Next.js開発における AIの参画 ~メイン開発と両立する「言語化」と「改善」の工夫 ~ 2025-08-27「実践Next.js！AIアウトプットと コンポーネント設計」 最新事情 LT