AIとTDDによるNext.js「隙間ツール」開発の実践

Transcript

1. AIとTDDによる Next.js「隙間ツール」 開発の実践 規約ファイルのコンポーネントヒエラルキーをGemini CLIとTDDで可視化する 2025.08.27 「実践Next.js！AIアウトプットと コンポーネント設計」 最新事情 LT Makoto Tateno
2. 2 / 10 自己紹介 Makoto Tateno / 舘野 真 株式会社カオナビ github.com/makotot x.com/makototdev
3. 3 / 10 課題：ファイル構造 ≠ コンポーネント階層 この複雑なファイル構造から… …この階層を直感的にイメージしたい 引用元： https://nextjs.org/docs/app/getting-started/project- structure#component-hierarchy app/ ├── (dashboard)/ │ ├── layout.tsx │ ├── page.tsx │ └── users/ │ └── [id]/ │ └── [action]/ │ └── page.tsx ├── @modal/ │ ├── default.tsx │ └── layout.tsx ├── _components/ │ └── Button.tsx ├── content/ │ ├── [...slug]/ │ └── [[...path]]/ ├── error.tsx ├── global-error.tsx ├── layout.tsx ├── loading.tsx
4. 4 / 10 「隙間」を埋めるツールをAIエージェントとTDD 規約のファイルとディレクトリーを読み取って、コンポーネントヒエラルキーをJSONで出力すれば良い？ コンテキストが限定的 → AIエージェントと相性が良さそう 期待結果が明確 → TDDに向いていそう
5. 5 / 10 AIエージェントがTDDを進める AIエージェントにNext.js公式ドキュメントを読ませて、TDDで進めることを GEMINI.md に記載してから 最初に「こういう結果になってほ しい」という失敗するテストを書 かせる テストをパスする最小限のコード を生成させる 実装上の重複であればGemini CLI 自身がリファクタリングを提案 1. RED: 失敗するテスト 2. GREEN: テストをパス 3. REFACTOR: リファクタリング
6. 6 / 10 AIエージェントによるTDDで直面した壁 1. コンテキストが「大きすぎる」 ✕ API Error: read ETIMEDOUT テストファイルが2,000行弱まで肥大化 → タイムアウト → 人間がテストを分割し、コンテキストを小さくする必要 2. コンテキストが「曖昧すぎる」 当初、ファイル構造をほぼそのままJSONにして出力してきた GEMINI.md にNext.js公式から分かる範囲のルールを詳細に記載して指示を繰り返した → 人間がルールを明文化し、コンテキストを具体的にする必要
7. 7 / 10 コンポーネントヒエラルキーをJSONで出力 「見えない階層」をマシンリーダブルなデータに ファイル構造という暗黙のルールを、誰でも利用可能なJSON データに変換 これにより、様々なツール連携が可能かも？ デバッグの高速化 layout のネストや error.tsx の適用範囲などを可視化 し、問題の原因を素早く特定 ドキュメントの自動生成 プロジェクトのルーティング構成をドキュメントに反映 静的解析の拡張 「このセグメントには loading.tsx が必須」といった独自 ルールを自動チェック { "name": "app", "path": "app", "type": "app-directory", "children": [ { "name": "layout.tsx", // ファイル名、またはフォルダ名 "path": "app/layout.tsx", // appディレクトリからの相対パス "type": "layout", // 規約の種類 "children": [ // 再帰的な階層構造 { "name": "template.tsx", "path": "app/template.tsx", "type": "template", "children": [ { "name": "loading.tsx", "path": "app/loading.tsx", "type": "loading", "children": [ { "name": "page.tsx", "path": "app/page.tsx", "type": "page",
8. 8 / 10
9. 9 / 10 まとめ Next.jsの複雑さを補うツールを作ることが開発効率改善に可能性がある 補う → 隙間を埋める → コンテキストが狭い → AIエージェントに向いている可能性が高い TDDは、AIエージェントが期待通りに成果物を生み出しているか確認する上で効果的 Red/Green : AIが期待通りに動いているかの明確な指標になる Refactor : 「良いコード」とは何かを定義する、人間の介入が不可欠な領域 AIエージェントへのインプットの質と量が成果物の質に直結 的確な「量」と「質」のコンテキストをAIに与え続けることが、人間の重要な役割
10. ありがとうございました！