Slide 1

Slide 1 text

全てのコンテキストを集約し真の仕様駆動を実現。プロジェク ト全体の開発を高速化する方法 2026/01/21 AI時代の開発高速化スペシャル by クラスメソッド クラスメソッド株式会社 リテールアプリ共創部 マッハチーム 高垣 龍平

Slide 2

Slide 2 text

自己紹介 2

Slide 3

Slide 3 text

1. AIと仕様駆動の現状 2. コンテキストをローカルに集約する 3. 開発スタイルとドキュメント整備 4. さらなる高速化の秘訣 5. まとめ 今日お話しする内容 3

Slide 4

Slide 4 text

AIと仕様駆動の現状

Slide 5

Slide 5 text

AIにコードを書かせる前に「仕様」を先に作る開発手法 代表的なツール・手法 Kiro - AWSが開発したspec駆動のAI IDE GitHub Spec Kit - Github社が開発したspecファイルを使った仕様駆動開発ツール 共通するコンセプト requirements/design/tasksなどのファイルを生成し、Specファイルとして扱う。 これらに要求や仕様・タスクを記述し、AIに読み込ませる 仕様駆動開発とは 5

Slide 6

Slide 6 text

実際のプロジェクトはエンジニア1人とAIだけで完結しない 多くのステークホルダーが存在する お客様(発注者) PM / ディレクター デザイナー 他社ベンダー(API連携先など) 社内の他チームメンバー でも、実際のプロジェクトでうまくいっていますか? 6

Slide 7

Slide 7 text

従来のSpec駆動が扱う範囲 設計書・シーケンス図 API仕様書 DB設計 Figmaデザイン 既存コードベース 要件定義書 これらも全てコンテキスト Backlogの課題・決定事項 MTGでの合意内容 先方のスケジュール 使用できる予算 自社のリソース状況 過去の議事録・見積もり 本当に必要なコンテキストとは? 7

Slide 8

Slide 8 text

spec/ だけに仕様を書いても、プロジェクト全体のコンテキストがAI に伝わらない 結果として... AIが背景を理解せず的外れな提案をする 「なぜこの仕様なのか」がコードに反映されない 手戻りが発生し、結局時間がかかる 仕様駆動ツールがうまくいかない理由 8

Slide 9

Slide 9 text

→ → 「真の仕様駆動」とは何か 🎲 Vibeコーディング 思いつきで実装 動けばOK 仕様は後付け 📝 仕様駆動(従来) 計画を構造化 spec/design/planを作成 しかし機能仕様のみ 🎯 真の仕様駆動 全てのコンテキストを参照 決定経緯・制約・背景も把 握 実案件に耐えうる品質 9

Slide 10

Slide 10 text

全ての会話・やり取り・決定履歴を参照可能にし、 本番環境で顧客の要望を満たす実装を実現すること 💡Kiro等の仕様駆動ツールは「計画の構造化」に過ぎず、 実案件の複雑さには対応できない 🔑コンテキストエンジニアリングのエッセンスを加えることで、 初めて「実案件に耐えうる仕様駆動」が実現できる 真の仕様駆動の定義 10

Slide 11

Slide 11 text

コンテキストをローカルに集約する

Slide 12

Slide 12 text

情報はいろいろな場所に散らばっ ている Backlog - 課題・Wiki GitHub - Issue・PR・コード Teams/Slack - MTG・チャット Google Drive - 共有資料 Figma - デザイン Notion - ドキュメント AIエージェントの現状 各ツールへのAPI接続が必要 MCPの設定が複雑 レスポンスが遅い コンテキスト制限に引っかかる リアルタイム取得のオーバーヘッド 情報の分散問題 12

Slide 13

Slide 13 text

プロジェクト全体のリソースを ローカルファイル として集約 → AIエージェントが直接ファイルを読み込む → 高速かつ確実にコンテキストを取得 オレオレ簡易RAG ローカル環境でAIおよび人間が全文検索できる 情報の一元化が実現 解決策:全てをローカルに落とす 13

Slide 14

Slide 14 text

Backlogとは プロジェクト管理ツール お客様とのやり取りに使用されることが多い backlog-exporter 課題・Wiki・ドキュメントをMarkdown形式 でエクスポート pnpm dlx backlog-exporter@latest update https://github.com/ShuntaToda/backlog- exporter 例:Backlogの課題をローカルに落とす 14

Slide 15

Slide 15 text

apparel-membership-card-context/ ├── MTG/ # 議事録(Teamsの自動文字起こしを配置) │ └── 20251105/ │ ├── 20251105_minutes.md # 議事録 │ └── 20251105_キックオフ.docx # 文字起こし元 ├── 共有資料/ # 要件整理・見積もりなど(Google Driveからインポート) ├── Backlog/ # Backlogからエクスポートされたデータ │ ├── documents/ # 仕様書・シーケンス図など │ │ ├── マスターデータ定義.md │ │ ├── 機能要件.md │ │ └── IF仕様書.md │ └── issues/ # Backlog課題 ├── GitHub/ # GitHubからエクスポートされたデータ │ ├── issues/ # Issue定義ファイル │ ├── src/ # ソースコード サブモジュール └── └── wiki/ # GitHub Wiki サブモジュール src/ と wiki/ は別リポジトリをサブモジュールで参照 → コンテキストリポジトリと開発リポジトリを分離しつつ、ローカルで一元管理 ディレクトリ構造の例 15

Slide 16

Slide 16 text

ディレクトリ構造の例(サンプルを用意しました) 16

Slide 17

Slide 17 text

開発 Issue駆動の実装 コードレビュー テスト作成 リファクタリング 開発以外 要件定義の整理 見積もり作成 資料作成 議事録生成 進捗レポート作成 IF仕様書の作成 シーケンス図(Mermaid) Backlogコメント返信 できること:開発だけじゃない 17

Slide 18

Slide 18 text

1. 全文検索が可能 AIも人間も同じファイルを検索 grepやripgrepで高速検索 2. ローカル環境で編集可能 AIエージェントが直接ファイル編集 人間による細かい修正も柔軟に対応可能 バージョン管理も容易 3. API/MCPが不要 コンテキスト取得が高速 レート制限を気にしない オフラインでも作業可能 4. プレビューが容易 Markdownはプレビュー表示 CSVは拡張機能でExcel風に確認 ローカル集約のメリット 18

Slide 19

Slide 19 text

デメリット リアルタイムにリモートの状態が更新されない → 手動で同期する必要がある 対策①:package.jsonにコマンドを用意 { "scripts": { "issue:update": "./sync-github-issues.sh --repo owner/repo", "backlog:update": "pnpm dlx backlog-exporter@latest update --force", "rulesync:generate": "pnpm dlx rulesync@latest generate" } } 対策②:GitHub Actionsで1時間ごとに自動更新も可能 → 最新のコンテキストを維持 ローカル集約のデメリットと対策 19

Slide 20

Slide 20 text

ツール 同期方法 備考 GitHub gh コマンド Issue/PR/Wikiの取得・更新 Backlog backlog-exporter 課題・Wikiのエクスポート(取得) Google Drive 手動コピー 重要資料のみ Teams 文字起こしをコピー MTG後に手動配置・AI議事録生成 Figma MCP経由 ローカル同期困難 Figmaは例外 ローカルに落とすのが難しいため、開発時にMCP経由でリモート状態を読む 各ツールの同期方法 20

Slide 21

Slide 21 text

将来的には全てリモート状態になるだろう MCPの成熟 AIエージェントの性能向上 リアルタイム同期の標準化 しかし、現状のLLM/AIエージェント性能では... ローカル集約が最も現実的で効率的 一部手動更新があるが、ある程度割り切り 将来の予想 21

Slide 22

Slide 22 text

開発スタイルとドキュメント整備

Slide 23

Slide 23 text

rulesyncとは 複数のルールファイルから統合されたルールファイルを生成するツール メリット .cursor/rules/ .claude/ など複数のAIツールに対応 カスタムコマンドの共有 チーム全体で統一されたルール pnpm dlx rulesync@latest generate rulesyncの活用 23

Slide 24

Slide 24 text

コマンド 用途 create-minute.md Teams文字起こしから議事録を自動生成 generate-issue-summary.md PBIの進捗サマリーを生成 structured-commits.md 作業内容から構造化されたコミットを作成 create-pull-request.md コミットログからPRを自動作成 update-issue-from-request.md 実装後にIssueを詳細化 create-branch.md Issue番号からブランチを作成 例:議事録生成 /create-minute 20251105_キックオフ → Teams文字起こしから構造化された議事録Markdownを生成 カスタムコマンドの紹介 24

Slide 25

Slide 25 text

Issue進捗サマリー生成 /generate-pbi-progress-summary.md PBI(Product Backlog Item)の進捗状況をサマ リーとして自動生成 → 完了数、進行中、未着手を一覧化 → 定例MTGの報告資料に活用 Backlog課題の完了サマリー /generate-issue-summary.md 課題をクローズする際の完了報告文を自動生成 → 何を実装したか、どう確認したかを整理 → コピペでBacklogに貼り付け ポイント定型化されたタスクをコマンドで実行 コンテキストを整理する際に、コマンド化しておくことでフォーマットを統一して生成することが 可能。 カスタムコマンド活用例 25

Slide 26

Slide 26 text

基本フロー 1. Backlog/ドキュメントからGitHub Issueを生成 └─ AIがBacklog課題や設計書を読み込んでIssue作成 2. Issueからブランチを切る └─ /create-branch #123 3. 実装を進める └─ AIがIssue内容を参照しながらコード生成 4. 構造化コミット → PR作成 → Issue更新 └─ /structured-commits → /create-pull-request → /update-issue-from-request Issue駆動開発フロー 26

Slide 27

Slide 27 text

考えてみてください 仕様書を別途作成・維持しようとすると、追従が難しく陳腐化しやすい ドキュメントは書いた瞬間から陳腐化が始まる コードが変更されてもドキュメントが更新されない いつの間にか「嘘のドキュメント」になってしまう これは多くの現場で共通する課題では? そもそもspecファイル を作る必要ある? 27

Slide 28

Slide 28 text

より筋の良いアプローチ 従来 提案 仕様書を別途作成 GitHub Issueに仕様を記載 設計書を別途管理 PRに設計意図を記載 変更履歴を別管理 コミットメッセージが履歴 ナレッジを別ツール GitHub Wikiに集約 コードと一緒にバージョン管理され、レビューのコンテキストも含まれる CursorのカスタムスラッシュコマンドでGitHub IssueやPull Requestを品質 の高いドキュメントとして自動作成する https://dev.classmethod.jp/articles/cursor-slash-commands-auto-generate-issue-pr/ GitHub Issue/PR/wiki/コードをドキュメントとして機能させる 28

Slide 29

Slide 29 text

コミット → PR → Issue の流れでドキュメント品質を保つ 1. /structured-commits └─ 作業内容を回想し、関連変更ごとにグループ化してコミット └─ コミットメッセージ群がPRの変更履歴として機能 2. /create-pull-request └─ コミットログからPR本文を自動生成 └─ 「やったこと」に具体的な実装内容を記述 3. /update-issue-from-request └─ 実装後にIssueを実装内容に合わせて更新・詳細化 └─ PRへのリンクを追加 ドキュメント品質の維持 29

Slide 30

Slide 30 text

さらなる高速化の秘訣

Slide 31

Slide 31 text

テンプレートリポジトリを事前に用意する 含めておくべきもの 認証認可周り - ソーシャルLogin, パスワード認証等 アーキテクチャ - Clean Architecture, Feature-Based等 インフラ構成 - CDK, Terraform等 エラーハンドリング - 共通エラーレスポンス ドメインモデル - ビジネスロジックの設計パターン CRUDシステム - TODOアプリ的な基本APIエンドポイント 各案件ごとにcloneしてカスタマイズ 既存アセットの活用 31

Slide 32

Slide 32 text

品質の一定化 毎回同じ品質でスタート ベストプラクティスが組み込 み済み セキュリティ対策が最初か ら 開発速度向上 既存コードの再利用 一貫性のあるコード生成 AIが既存コードを参照可能 作業削減 環境構築の省略 毎度作るutil関数が不要 設定ファイルのコピー不要 テンプレートリポジトリの効果 32

Slide 33

Slide 33 text

project-root/ ├── web/ # フロントエンド(React + Vite) ├── server/ # バックエンド(Lambda + Express) ├── infra/ # インフラ(AWS CDK) ├── shared/ # 共通関数・型定義 └── e2e/ # E2Eテスト(Playwright) React Lambda AWS CDK TypeScript pnpm workspace なぜモノレポ? 型の共有: フロント・バック・インフラ間で型定義を共有 一貫性: 同じリンタールール、同じテストフレームワーク AIの理解: 全体構成を把握しやすい マッハチームでのモノレポ構成:全てTypeScriptで統一 33

Slide 34

Slide 34 text

web/ - Feature-Based src/ ├── features/ │ ├── facility-list/ │ ├── facility-detail/ │ ├── membership-card/ │ ├── user-registration/ │ └── top/ ├── components/ # 共通UI ├── hooks/ # 共通フック └── routes/ # ルーティング 機能単位でディレクトリを分割 → AIが「この機能はここ」と判断しやすい server/ - DDD + クリーンアーキテクチャ src/ ├── domain/ │ └── model/ # エンティティ ├── use-case/ # ビジネスロジック ├── infrastructure/ │ └── repository/ ├── handler/ # Lambda Entry ├── presenter/ # レスポンス整形 └── di-container/ # DI設定 依存の方向を明確化 → ESLintで依存関係を強制 → 変更に強く、移植性も高い アーキテクチャの詳細 34

Slide 35

Slide 35 text

Figma MCP + tailwind.config.js Figmaのデザイントークンを tailwind.config.js にマッピング カラー、フォントサイズ、スペーシングを変数化 AIがFigmaを参照しながらコンポーネント実装 結果 Figmaと全く同じデザインでフロントエンド構築が可能 フロントエンド開発:Figma連携 35

Slide 36

Slide 36 text

デザインとTailwindの連携の例1:Figma 36

Slide 37

Slide 37 text

デザインとTailwindの連携の例2:Tailwindの設定ファイル 37

Slide 38

Slide 38 text

まとめ

Slide 39

Slide 39 text

1. 仕様駆動を行うためには、機能だけでは不十分 KiroやSpec-kitのデフォルトの機能だけでは不十分。プロジェクト全体のコンテキスト(Backlog、 MTG、予算、スケジュール等)を含める必要がある 2. 全てをローカルに集約する APIやMCPに頼らず、ファイルとしてコンテキストを持つことで高速化 3. GitHub Issue/PR/コードをドキュメントとして機能させる 別途仕様書を作るのではなく、開発成果物自体がドキュメントに 4. 既存アセット + Figma MCPでさらに高速化 テンプレートリポジトリとデザインの連携で品質と速度を両立 まとめ 39

Slide 40

Slide 40 text

開発面 手戻りの削減 開発速度の大幅向上 AIとの協働が真の仕様駆動へ 運用保守面 ドキュメントの品質が高い 機能仕様の把握が高速 メンバー追加時のオンボーデ ィング効率化 チーム面 情報の一元化 ナレッジの蓄積 属人化の防止 AI時代だからこそ、顧客との対話・要件の深掘りなど上流工程がより重要に → AIと協働して上流工程を加速することが重要 → プロジェクト全体の開発を高速化 得られる効果 40

Slide 41

Slide 41 text

現在 カスタムコマンドやルールを使ってAIと協働しながらタスクを実行 議事録生成、Issue作成、PR作成... 人間がトリガーを引き、AIが実行 ↓ 目指す姿 Skill / Subagent に移行し、より任せる範囲を広げる AIが自律的にタスクを判断・実行 人間は最終確認とレビューに集中 より高度な協働開発へ 今後の展望 41

Slide 42

Slide 42 text

ご清聴ありがとうございました 42