MVP先行の探索型DocDD

Transcript

1.  DEVELOPMENT STRATEGY AI時代の探索型Doc-Driven Development戦略 MVP先行の 探索型DocDD  MVP.tsx const DocDD = () => { return ( <MVPPhase mode="exploratory" onConverge={writeDocs} /> ); } Fast Flexible
2. いまいまい 24卒フロントエンドエンジニア  自己紹介
3. CURRENT CHALLENGES AIを使った開発、なぜ難しい？  AIの出してくるコードの精度  ドキュメントの生成が必要か  テストの実装タイミング  MVPか、最初から完璧か
4. MVP先行の MVP先行の 探索型DocDD 探索型DocDD  PROPOSAL
5. CONCEPT DEFINITION 探索型DocDDとは？  DocDD 提案: ゆめみ代表 片岡氏 「ドキュメンテーション駆動開発」 。SpecDD（Specification Driven Development）と同様、実装の前にドキュメント（仕様）を定義し、そ れを正として開発を進める手法。  探索型DocDD 提案: ゆめみ ふわせぐ氏・りず氏 アジャイル開発の概念をDocDDに拡張した開発方針。不確実性の高い現 代の開発において、固定的なドキュメントではなく、探索プロセスを重 視する。  今回の提案：MVP先行アプローチ  探索 (Explore)   収束 (Converge)   拡張 (Expand) Core Cycle この「探索型DocDD」サイクルを、まずMVPを作成に絞った状態で適用する。その後、 動くものがある状態で探索+ドキュメンテー ションを行うことで、より確実で高速なデリバリーを実現します。
6. WORKFLOW OVERVIEW 3つのフェーズ概要    MVPフェーズ FOUNDATION プロダクトの仮説検証と輪郭づくり。 探索・設計・収束を繰り返し、 動くものを最短で作る。 1  ドキュメントフェーズ DOCUMENTATION 実装から仕様を抽出し体系化。 設計書やADRとして保存し、 情報の信頼性を確保する。 2  拡張フェーズ EXPANSION & TEST テスト充実と不足要件の実装。 品質を高め、新たな機能を 安全に追加。 3
7. MVP PHASE DETAIL MVPフェーズ：探索→設計→収束    探索 EXPLORE コードベースの調査 既存ドキュメントの調査 1    設計 DESIGN アーキテクチャ設計 デザイン(UI/UX)設計 2    収束 CONVERGE 実装 整形（命名・リファクタ） 3  
8. PHASE 2: DOCUMENTATION ドキュメントフェーズ：保存する成果物 実装から逆算して必要な情報を探索し、以下のドキュメントとして体系化・保存します。常に「最新の正解」となる情報源を 確保することが目的です。  仕様書 機能要件および非機能要件を明確化。MVPで実装した挙動をベースに、システムの振る舞いを言語化して定義します。  画面設計書 ワイヤーフレームやコンポーネント設計。UI構造や状態遷移、インタラクションの詳細を記録し、デザインの一貫性を保ちます。  DB・API設計書 データベースのスキーマ定義、APIのエンドポイント仕様。データ構造と通信規約をドキュメント化し、バックエンドとの連携を保証します。  ADR (Architectural Decision Record) アーキテクチャ選定の経緯や重要な技術的決定を記録。 「なぜその技術を選んだか」というコンテキストを将来に残します。
9. PHASE 3: EXPANSION & RELIABILITY 拡張フェーズ：テストと機能拡張     テストの総当たり作 成 カバレッジ目標を満たすよう に、エッジケースを含めたテ ストケースを網羅的に作成。 AIを活用して実装コストを下 げる。 Step 1  不足機能の実装 MVPで実装しきれなかった 機能や、新たな要件の実装を 行う。テスト作成で得られた 知見を活かしつつ、着実に機 能を拡充する。 Step 2  プロセスの反復 行う内容自体はMVPフェーズ と同様。 「探索・設計・収束」 のサイクルを繰り返し、プロ ダクトの質を高める。 Loop  ドキュメントへの回 帰 フェーズ終了後、得られた知 見を元にドキュメントフェー ズへ移行。実装と仕様の整合 性を保つ。 Next
10. WHY THIS ARCHITECTURE? なぜこの構成にするか  コンテキスト保持の困難さ 実装・ドキュメント・テストを同じワークフローで同 時進行すると、コンテキストスイッチが頻発します。  「何かが必ず抜ける」リスクが高い  フェーズ分離による明確化 実装 → ドキュメント → テストとフェーズを明確に分 けることで、常に「明示された情報源」がある状態で 進められます。  迷いのない開発フローを実現  顧客体験と提案の高速化 顧客体験の面でも、まず動くもの（MVP）を早期に提供することが重要です。 顧客との期待値のすり合わせ（ナーチャリング）がスムーズになる 実際に触れるモノベースでの具体的な提案が可能になる 手戻りを最小限に抑え、本質的な価値提供に時間を割ける
11. DEVELOPMENT WORKFLOW 実際にどう作るのか：Claude CodeとMCP  Claude CodeとMCPの活用 エージェントとして協調的なプランニングと実装を実施。Claude Codeをコアに、MCPで外部能力を拡張する構成。  プランニングの優秀さ 高い情報保持能力と文脈理解により、複雑なタスクに対応。段階的な実行計画の立案に最適。  MCP (Model Context Protocol) AIのための標準化されたAPI規格。 「新しい知識」や「ツール操作能力」を外部アタッチメントとして提供。  SubAgentとSkill 「SubAgent（役割） 」と「Skill（知識） 」を分離。専門特化したエージェント群により品質を担保する。
12. MODEL CONTEXT PROTOCOL MCPとは：AIの知識拡張  新しい「引き出し」の付与 AIに対して「これができるよ」という知識と能力を与える仕組みで す。単なるテキスト生成能力だけでなく、特定のタスクを実行する ためのスキルセットをAIに持たせることが可能になります。  外部アタッチメント機能 AIモデル内部の学習データや調査能力の限界を補完します。MCPは 外部アタッチメントとして機能し、APIを通じてAIのためのツール を提供。再学習なしでAIの能力を拡張します。  実践的な活用例  効率的なコードリーディング リポジトリ全体の構造を把握し、複雑な依存関 係や定義元を瞬時に特定。エンジニアの調査時 間を大幅に短縮します。  最新ドキュメントの取得 学習データに含まれない最新のライブラリ仕様 やAPIドキュメントをリアルタイムに取得し、正 確な実装をサポートします。  DevTools情報の取得 WebブラウザのDevToolsと連携し、コンソール ログやネットワーク通信状況を直接AIが分析しま す。
13. MCP ECOSYSTEM 使用しているMCPたち  Kiri Research & Discovery  Context7 Context Management  Serena Implementation  Codex Review & Knowledge  Chrome DevTools Web Debugging  Next DevTools Framework Utility
14.  SubAgent：「誰がやるか」 タスクの責任範囲を明確に分離します。  Skills：「どうやるか」 エージェントが必要な道具として知識を呼び出せるようにします。  アクションへの転換 巨大なドキュメントを「読む」状態から、必要な場面で 適切な機能を「実行する」状態へ認識を切り替えます。  単一ルールの限界 ルールファイルが肥大化し、作業の煩雑化 とコンテキスト漏れが発生する  別ファイルに切り出しても、AIが能動的に読 みにいってくれない場合がある  「何でも屋」エージェントでは精度が低下 しやすい   ARCHITECTURE SubAgentとSkillを使う意味
15.  SubAgent （役割の分離）  プランナー コード・ライブラリの調査 実行計画の作成とレビュー  実装&レビュワー 機能の実装コーディング コードレビュー  ドキュメント作成 雛形から必要なドキュメントを作成 仕様書の整備  Skill （知識・手順の共有）  コーディングスペシャリスト 言語仕様、ベストプラクティス、設計パターン、リファクタリン グ技術などの専門知識  UI/UXデザイナー インターフェース設計、ユーザビリティ原則、アクセシビリテ ィ、デザインシステムの知識  テストガイドライン テスト戦略、カバレッジ基準、E2E/単体テストの実装パターン、 品質保証プロセス  よく定義するSubAgentとSkill
16. WORKFLOW INTEGRATION どう組み合わせるか  MVPフェーズ 汎用開発ワークフロー 1. 調査  Kiri Context7 2. 設計  Coding Specialist Skill UI/UX Designer Skill 3. Plan作成 & レビュー  Planner Agent  Codex Review 4. 実装 & レビュー  Impl Agent (Serena)  Codex Review 5. 実行補助  Chrome DevTools  ドキュメントフェーズ  拡張フェーズ ドキュメント作成Agent ユーザーの指示に沿って仕様書や設計書を生成・保存 不足要件の開発 汎用開発ワークフローを再利用 テスト実装 テストガイドラインSkillを活用 サイクル移行 必要に応じてドキュメントフェーズへ遷移
17. FUTURE OUTLOOK AI時代のキャッチアップ戦略  「時代のハンドル」を握る企業 OpenAI、Google、Anthropicなど、基盤モデルを開発する主要プ レイヤーの動向を注視することが最重要。彼らの決定が業界の標 準となる。  リソースこそ正義の時代 圧倒的な計算資源とデータを持つ企業がルールを作る。個人の工 夫よりも、スケーリング則が支配する現状を正しく理解し、巨人 の肩に乗る戦略を取る。  ツール乱立に惑わされない 周辺ツールは巨人のアップデート一発で無効化される可能性がある。末端の変化に過度に振り回される必要はない。本質的な価値 提供に集中する。
18. 良いAI駆動開発ライフを！ 良いAI駆動開発ライフを！ Let's enjoy AI-Driven Development! ご清聴ありがとうございました！