AI 協業開発環境の構築術|モノレポでビルド時間を大幅短縮する CLAUDE.md 活用法

目次

はじめに

ども!最近は Claude Code ともに開発を進めて、with AI での生活にどっぷりだったのですが 2025 年も締めということで貯まった検証を一気に記事化している龍ちゃんです。検証がたまっていたので、11 月と 12 月は大量にブログを書く羽目になりそうですね。ゴリゴリ執筆する必要がありますね!

皆さん、AI(Claude Code 等)と一緒に開発してると、こんな悩みありませんか?

  • 「このプロジェクト、どういう構成になってるの?」と AI に毎回説明するのが面倒
  • ファイルが多すぎて AI が混乱して、的外れな提案をしてくる
  • モノレポにしたけど、全部のアプリが毎回ビルドされて時間がかかる

僕も以前はこれらの課題に悩まされていました。特に、プロジェクトが大きくなるほど、AI が全体像を把握しづらくなるという問題が深刻でした。

そこで構築したのが、CLAUDE.md 階層構造を核としたモノレポ環境です。この環境により、以下の成果を得られました:

AI が自律的にプロジェクト構成を理解(CLAUDE.md 階層構造)
CI/CD ビルド時間 58%削減(paths フィルタによる最適化)
ドキュメントが自然に蓄積(4 フェーズワークフロー: 計画 → 実装 → 研究記録 → 記事化)

本記事で紹介する環境は、実際に稼働中のシステムで実践している内容です。 このモノレポで開発しているシステムの詳細については、AI チャットで話すだけ!X 予約投稿を完全自動化するシステム構築術で解説しています(リポジトリは非公開)。

この記事では、モノレポ構成と AI 協業開発を最適化する環境設計について、実際のプロジェクト構成とワークフローを交えながら解説していきます。

記事の位置づけ

前提となる知識(先に読むべき記事):

本記事で紹介する 4 フェーズワークフローは、以下の記事で解説した 3 フェーズ開発を基盤に構築されています:

技術基盤:

この記事で学べること

この記事を読むことで、以下の知識とスキルが得られます:

🎯 主要なポイント

  1. モノレポ構成と AI 協業開発の相性
    なぜモノレポが AI 協業に適しているのか、実体験をもとに解説
  2. CLAUDE.md 階層構造によるコンテキスト管理
    9 つの CLAUDE.md ファイルで AI に適切な情報を提供する設計
  3. paths フィルタによる CI/CD 最適化
    変更されたアプリのみビルドすることでビルド時間 58%削減
  4. 4 フェーズワークフローによる知見の資産化
    計画 → 実装 → 研究記録 → 記事化のドキュメント駆動型開発

💡 実践的なテクニック

  • AI が理解しやすいディレクトリ構造と命名規則
  • GitHub Actions paths フィルタの活用
  • ドキュメント駆動型開発による知見の蓄積

前提条件

この記事は、モノレポ構成と AI 協業開発環境の設計・アーキテクチャに焦点を当てています。

前提知識(あると望ましい)

  • AI 開発ツールの使用経験
    • Claude Code、GitHub Copilot、Cursor 等の AI 開発支援ツールを使った開発経験
    • AI にプロンプトを投げてコードを生成した経験
  • モノレポの基礎知識
    • 複数のアプリケーションを 1 つのリポジトリで管理する概念の理解
    • (初めての方でも、記事を読み進めることで理解できます)

本記事で扱わないこと

❌ モノレポツール(Turborepo、Nx 等)の詳細比較
❌ Azure 環境の詳細なセットアップ手順
❌ 各フレームワーク(NestJS、Next.js 等)の実装詳細
❌ 型安全パイプラインの実装詳細(型安全パイプラインの記事で解説)

※本記事は構成と設計に焦点を当てており、実装の詳細は関連記事で解説しています。

プロジェクト全体像

まずは、実際のプロジェクト構成を見ていきましょう。

モノレポ構成の 4 つのアプリケーション

このプロジェクトは、4 つの独立したアプリケーションをモノレポで管理しています。

アプリケーション技術スタックデプロイ先GitHub Actions
FrontendNext.js 15, React 19, TypeScript 5Azure Static Web Appsfrontend-swa-deploy.yml
BackendNestJS 11, Node.js 22, TypeScript 5Azure Web Apps (Docker)backend-docker-build.yml
X Scheduler FunctionsAzure Functions v4, Node.js 22, TypeScriptAzure Functionsdeploy-x-scheduler-functions.yml
Blog Search MCP FunctionsAzure Functions v4, Node.js 22, MCP ProtocolAzure Functionsdeploy-blog-search-mcp-functions.yml

ディレクトリ構造の全体像

プロジェクトルート/
├── docs/                    # 計画・設計フェーズ(実装コードなし)
│   ├── CLAUDE.md            # 計画フェーズガイドライン
│   ├── project-core.md      # インフラ全体構成
│   ├── features/            # 新機能開発計画
│   ├── bugs/                # バグ調査・修正計画
│   ├── research/            # 実装検証結果・知見
│   ├── article/             # ブログ記事執筆用調査
│   │   └── CLAUDE.md        # 記事執筆ガイド
│   ├── tools/               # Docs専用ツール
│   │   └── CLAUDE.md        # ツール使用ガイド
│   └── api/                 # OpenAPI仕様
├── application/             # 実装フェーズ
│   ├── backend/             # NestJS APIサーバー
│   │   └── CLAUDE.md        # バックエンド開発ガイド
│   ├── frontend/            # Next.js フロントエンド
│   │   └── CLAUDE.md        # フロントエンド開発ガイド
│   ├── functions/           # X Scheduler
│   │   └── CLAUDE.md        # Functions開発ガイド
│   └── blog-search-mcp-functions/  # MCP Server
│       └── CLAUDE.md        # MCP Functions開発ガイド
├── infrastructure/          # IaCテンプレート
│   └── CLAUDE.md            # インフラ開発ガイド
├── CLAUDE.md                # ルートガイドライン(全体像)
└── .github/
    └── workflows/           # CI/CDパイプライン
        ├── frontend-swa-deploy.yml
        ├── backend-docker-build.yml
        ├── deploy-x-scheduler-functions.yml
        └── deploy-blog-search-mcp-functions.yml

システム構成図

モノレポ全体の構成を視覚化するとこうなります:

graph TD
    A[プロジェクトルート] --> B[/docs/]
    A --> C[/application/]
    A --> D[/infrastructure/]
    A --> E[/.github/workflows/]
    A --> F[CLAUDE.md<br>全体ガイドライン]

    B --> B1[features/<br>新機能計画]
    B --> B2[bugs/<br>バグ調査]
    B --> B3[research/<br>検証結果]
    B --> B4[article/<br>記事執筆調査]
    B --> B5[CLAUDE.md<br>計画フェーズルール]

    C --> C1[backend/<br>NestJS 11]
    C --> C2[frontend/<br>Next.js 15]
    C --> C3[functions/<br>X Scheduler]
    C --> C4[blog-search-mcp-functions/<br>MCP Server]

    E --> E1[frontend-swa-deploy.yml]
    E --> E2[backend-docker-build.yml]
    E --> E3[deploy-x-scheduler-functions.yml]
    E --> E4[deploy-blog-search-mcp-functions.yml]

    style F fill:#f9f,stroke:#333,stroke-width:2px
    style B5 fill:#bbf,stroke:#333,stroke-width:2px
    style C1 fill:#bfb,stroke:#333,stroke-width:2px
    style C2 fill:#bfb,stroke:#333,stroke-width:2px
    style C3 fill:#bfb,stroke:#333,stroke-width:2px
    style C4 fill:#bfb,stroke:#333,stroke-width:2px

なぜモノレポなのか?

モノレポ構成を採用した理由は、AI 協業開発との相性の良さにあります。

✅ モノレポのメリット

1. AI に 1 つのリポジトリで全体像を提供

別リポジトリにすると、AI は各リポジトリのコンテキストを個別に理解する必要があります。モノレポなら、ルートの CLAUDE.md で全体像を一度に提供できます。

# 別リポジトリの場合(AIが混乱)
frontend-repo/ ← AIはこのリポジトリのコンテキストのみ
backend-repo/  ← 別のセッションで別のコンテキスト
functions-repo/ ← また別のコンテキスト

# モノレポの場合(AIが全体を把握)
monorepo/
├── CLAUDE.md ← 全体像をAIに提供
├── application/
│   ├── frontend/
│   ├── backend/
│   └── functions/

2. ディレクトリ構造の一貫性

すべてのアプリケーションが同じルールに従うため、AI が理解しやすくなります。

# すべてのアプリケーションにそれぞれのCLAUDE.mdがある
/application/backend/CLAUDE.md
/application/frontend/CLAUDE.md
/application/functions/CLAUDE.md
/application/blog-search-mcp-functions/CLAUDE.md

3. コード共有が容易

共通ライブラリ、型定義、ユーティリティ関数を複数のアプリで共有できます。

AI 協業開発を支える設計思想

このモノレポ環境には、3 つの核となる設計思想があります。

1. 計画と実装の分離

/docs/(設計・仕様)と/application/(実装コード)を明確に分離しています。

目的:

  • AI に「計画フェーズ」と「実装フェーズ」を明確に区別させる
  • 実装前に設計を固めることで、手戻りを減らす
/docs/features/my-new-feature/
├── README.md           # 機能概要
├── api-spec.md         # API設計(実装コードなし)
└── type-definition.md  # 型定義(実装コードなし)

/application/backend/src/my-new-feature/
├── my-new-feature.controller.ts  # 実装コード
├── my-new-feature.service.ts     # 実装コード
└── dto/                          # 実装された型定義

2. CLAUDE.md 階層構造

ルートで全体像、サブディレクトリで詳細ルールを提供します。

目的:

  • AI が必要な粒度でコンテキストを取得できる
  • 各領域の専門的なルールを明確にする
/CLAUDE.md ← プロジェクト全体像
  ↓
/docs/CLAUDE.md ← 計画フェーズのルール
  ↓
/application/backend/CLAUDE.md ← バックエンド実装の詳細ルール

3. Single Source of Truth(型安全パイプライン)

Backend DTOs を唯一の真実とし、Frontend の型定義は自動生成します。

詳細: AI と爆速開発!Next.js×Nest.js 型定義同期の自動生成パイプライン構築術を参照

Backend DTOs (@ApiProperty)
  ↓
OpenAPI 仕様生成 (generate:openapi)
  ↓
Frontend 型定義生成 (generate:api with Orval)
  ↓
型安全なAPI呼び出し

これら 3 つの設計思想により、AI との協業開発が劇的にスムーズになりました。

CLAUDE.md 階層構造の設計

ここからは、AI 協業開発の核となるCLAUDE.md 階層構造について詳しく解説します。

CLAUDE.md とは?

CLAUDE.mdは、AI(Claude Code)にプロジェクトのコンテキストを提供するドキュメントです。

従来、AI に「このプロジェクトはどういう構成?」「どのルールに従えばいい?」と聞かれるたびに、手動で説明する必要がありました。CLAUDE.md を配置することで、AI が自律的にガイドラインを読み、適切な判断をするようになります。

9 つの CLAUDE.md ファイル

このプロジェクトには、合計 9 つの CLAUDE.md ファイルが配置されています。

# すべてのCLAUDE.mdファイルを確認
$ find . -maxdepth 3 -name "CLAUDE.md" | sort

./CLAUDE.md
./application/backend/CLAUDE.md
./application/blog-search-mcp-functions/CLAUDE.md
./application/frontend/CLAUDE.md
./application/functions/CLAUDE.md
./docs/article/CLAUDE.md
./docs/CLAUDE.md
./docs/tools/CLAUDE.md
./infrastructure/CLAUDE.md

各 CLAUDE.md の役割:

ファイルパス役割主な内容
/CLAUDE.mdルートガイドラインプロジェクト全体像、ディレクトリ構造、4 フェーズワークフロー、共通開発コマンド
/docs/CLAUDE.md計画フェーズルール型定義、API 設計、データベース設計のルール(実装コード禁止)
/docs/article/CLAUDE.md記事執筆ガイドブログ記事執筆の文体、構成、ドキュメント構造
/docs/tools/CLAUDE.mdツール使用ガイドDocs 専用ツール(ブログ HTML 抽出等)の使用方法
/application/backend/CLAUDE.mdバックエンド開発ガイドNestJS 開発ルール、環境変数管理、テスト実行方法
/application/frontend/CLAUDE.mdフロントエンド開発ガイドNext.js 開発ルール、インポートパス規則
/application/functions/CLAUDE.mdX Scheduler 開発ガイドAzure Functions 開発ルール、Timer Trigger 設定
/application/blog-search-mcp-functions/CLAUDE.mdMCP Functions 開発ガイドMCP Server 開発ルール、Supabase 連携
/infrastructure/CLAUDE.mdインフラ開発ガイドAzure Bicep 開発ルール、デプロイ手順

コンテキスト継承パターン

CLAUDE.md は、階層的にコンテキストを継承します。

graph TD
    A["/CLAUDE.md<br>プロジェクト全体像"] --> B["/docs/CLAUDE.md<br>計画フェーズルール"]
    A --> C["/application/backend/CLAUDE.md<br>バックエンド詳細ルール"]
    A --> D["/application/frontend/CLAUDE.md<br>フロントエンド詳細ルール"]

    B --> B1["/docs/article/CLAUDE.md<br>記事執筆ガイド"]
    B --> B2["/docs/tools/CLAUDE.md<br>ツール使用ガイド"]

    style A fill:#f9f,stroke:#333,stroke-width:3px
    style B fill:#bbf,stroke:#333,stroke-width:2px
    style C fill:#bfb,stroke:#333,stroke-width:2px
    style D fill:#bfb,stroke:#333,stroke-width:2px

継承の例:

  1. ルート CLAUDE.mdを読む → プロジェクト全体構成を理解
  2. サブディレクトリの CLAUDE.mdを読む → 各領域の詳細ルールを理解
  3. AI が適切な判断を下す

実際の動き:

AI: 「ユーザーがフロントエンドの開発を依頼してきた」
↓
AI: 「まず /CLAUDE.md を読んで全体像を把握しよう」
↓
AI: 「次に /application/frontend/CLAUDE.md を読んで詳細ルールを確認」
↓
AI: 「インポートパスは @/* を使うべきだな」
AI: 「API型定義は自動生成されるから、手動で書いちゃダメだな」
↓
AI: 適切なコードを提案

ルート CLAUDE.md の重要性

ルート CLAUDE.md/CLAUDE.md)は、最も重要なドキュメントです。

記載内容の例

# CLAUDE.md

## Project Architecture Overview

LINE LIFF AI Prompt Battle - An AI-powered game platform...

### Directory Structure & Responsibilities

/
├── docs/ # Planning & Design Phase
│ ├── features/ # Feature specifications
│ ├── bugs/ # Bug investigation & fix plans
│ ├── research/ # Implementation validation
│ └── article/ # Blog article research
├── application/
│ ├── backend/ # NestJS 11 API Server
│ ├── frontend/ # Next.js 15 App Router
│ ├── functions/ # Azure Functions
│ └── blog-search-mcp-functions/ # MCP Server
└── infrastructure/ # Azure Bicep IaC

**Workflow Pattern (4-Phase Workflow)**:

1. **計画フェーズ** - Plan in `/docs/`
2. **実装フェーズ** - Implement in `/application/`
3. **研究記録フェーズ** - Document findings in `/docs/research/`
4. **記事化フェーズ** - Gather materials in `/docs/article/`

## Common Development Commands

### Backend (NestJS)

npm run start:dev # Development with watch mode
npm run generate:openapi # Generate OpenAPI spec

### Frontend (Next.js)

npm run generate:api # Generate types from OpenAPI
npm run dev:full # generate:api + dev server

## Critical Import Path Rules

### Frontend: Use `@/*` Path Aliases

// ✅ CORRECT
import { Button } from '@/components/ui/button';

// ❌ WRONG
import { Button } from '../components/ui/button';

ポイント:

  • プロジェクト全体構成を一目で理解できる
  • 4 フェーズワークフローを明記
  • 共通開発コマンドを記載
  • インポートパス規則等の重要ルールを記載

※注: 上記コード例は、実際のプロジェクト CLAUDE.md での記載例です。本記事では「4 フェーズワークフロー」または「ドキュメント駆動型開発」と呼称しています。

このルート CLAUDE.md があることで、AI は初めてプロジェクトに触れた時でも、全体像を即座に理解できます。

CLAUDE.md 階層構造の効果

この階層構造により、以下の効果が得られました:

AI の理解速度が向上
ルート CLAUDE.md で全体像を把握し、サブディレクトリで詳細を理解

一貫性のあるコード生成
すべての開発者(人間も AI も)が同じルールに従う

手動説明の削減
「どういうプロジェクト?」と聞かれることがなくなった

オンボーディング時間の短縮
新しい AI セッション、新しい開発者が即座に理解できる

ドキュメント駆動型開発の実践(3 フェーズ →4 フェーズへの進化)

Claude Code での開発を効率化するため、計画 → 実装 → 研究記録 → 記事化の 4 フェーズワークフローを構築しました。

3 フェーズ開発から 4 フェーズ開発への進化

このワークフローは、既存の 3 フェーズ開発を基盤に構築されています:

元々の 3 フェーズ開発計画 → 実装 → 検証術仕様書アレルギー克服で解説):

  1. 計画: /docs/ で仕様策定(実装コードは書かない)
  2. 実装: /application/ で実装
  3. 検証: 計画と実装の差異を分析

4 フェーズへの拡張知見を資産化する記事で詳細解説):

  • フェーズ 3 を「研究記録」として体系化: 検証フェーズで得た知見を /docs/research/ に記録
  • フェーズ 4「記事化」を追加: 研究記録を元に /docs/article/ で記事執筆
  • RAG もどきシステム: 既存記事参照でトークン数 50-60%削減
  • 文体補正システム: 一貫した記事品質を実現
graph LR
    A[フェーズ1<br>計画<br>/docs/features/] --> B[フェーズ2<br>実装<br>/application/]
    B --> C[フェーズ3<br>研究記録<br>/docs/research/]
    C --> D[フェーズ4<br>記事化<br>/docs/article/]

    style A fill:#fff3cd,stroke:#333,stroke-width:2px
    style B fill:#d1ecf1,stroke:#333,stroke-width:2px
    style C fill:#d4edda,stroke:#333,stroke-width:2px
    style D fill:#f8d7da,stroke:#333,stroke-width:2px

各フェーズの概要

フェーズ 1: 計画 (/docs/features/)

目的: 実装前の設計・仕様策定(実装コードは一切書かない)

成果物: 型定義、API 設計、データベース構造、アーキテクチャ設計

効果: 開発時間 1 週間 →2 日に短縮(仕様書アレルギー克服の記事で詳細解説)

重要ルール: CLAUDE.md で実装コード記述を禁止することで、AI が設計に集中

フェーズ 2: 実装 (/application/)

目的: 計画に基づいた実装

実装順序: Backend → Frontend → Functions

効果: 小規模システムで 30 分、中規模で 2 日程度(3 フェーズ開発の記事で実例紹介)

フェーズ 3: 研究記録 (/docs/research/)

目的: 実装完了後の知見・アーキテクチャ検証結果をドキュメント化

記載内容: 設計思想、アーキテクチャパターン、検証結果

重要性: 計画と実装の差異を分析し、仕様漏れを特定

※補足: 3 フェーズ開発の記事で「検証フェーズ」として解説している内容を、このプロジェクトでは「研究記録フェーズ」として体系化しています。実装完了後に計画と実装の差異を分析し、知見として記録します。

フェーズ 4: 記事化 (/docs/article/)

目的: 技術ブログ執筆に必要な情報収集・調査、知見の資産化

成果物: research-doc.md(調査資料)、no1-article.md(記事本文)

参照元: /docs/features/ + /docs/research/ + /application/

効率化ツール知見を資産化する記事で詳細解説):

  • RAG もどき(fetch-blog-html.ts): 既存記事参照でトークン数 50-60%削減
  • 文体補正(writing-style-prompt.md): 一貫した記事品質
  • 記事執筆時間 50%削減: 調査資料から記事執筆までの自動化
  • 重複チェック 83%削減: 既存記事との重複を自動検出

このワークフローの効果

知見が自然に蓄積 – 実装と同時にドキュメントが作成される

記事化がスムーズ – 計画 → 検証 → 実装コードを参照するだけ

手戻りが減少 – 計画フェーズで設計を固めることで、実装時の手戻りが減少

  • 開発時間 1 週間 →2 日に短縮(計画フェーズの効果)

AI との協業が効率化 – 各フェーズで AI に明確な役割を与えられる

知見が資産化される – フェーズ 4(記事化)により、開発知見が再利用可能なブログ記事として蓄積

  • 既存記事との重複チェック 83%削減
  • 技術ブログのライブラリが自然に形成される

型安全な API 開発パイプライン

Frontend と Backend の型ズレをゼロにする型安全パイプラインについては、別記事で詳しく解説しています。

詳細を学ぶ: AI と爆速開発!Next.js×Nest.js 型定義同期の自動生成パイプライン構築術

Single Source of Truth の原則

このプロジェクトでは、Backend DTOs を唯一の真実としています。

Frontend の型定義は、Backend から自動生成するため、手動で型定義を同期する作業が不要になります。

graph LR
    A[Backend DTOs<br>@ApiProperty] --> B[generate:openapi<br>NestJS]
    B --> C[OpenAPI仕様<br>/docs/api/openapi.yaml]
    C --> D[generate:api<br>Orval]
    D --> E[Frontend 型定義<br>lib/api/generated.ts]
    E --> F[カスタムSWRフック<br>hooks/]

    style A fill:#d4edda,stroke:#333,stroke-width:2px
    style C fill:#fff3cd,stroke:#333,stroke-width:2px
    style E fill:#d1ecf1,stroke:#333,stroke-width:2px
    style F fill:#f8d7da,stroke:#333,stroke-width:2px

型安全パイプラインの効果

型ズレゼロ – Backend と Frontend の型が常に一致
手動同期作業の撲滅 – 型定義を手動でコピー&ペーストする必要がない
リファクタリング時の安全性 – Backend の型を変更すると、Frontend でコンパイルエラーが出る
開発速度向上 – 型定義を書く時間が不要になり、実装に集中できる

モノレポ CI/CD パイプライン: paths フィルタの威力

次に、4 つのアプリケーションを並行デプロイする最適化された CI/CD パイプラインについて解説します。

4 つの独立したワークフロー

このプロジェクトでは、4 つの独立した GitHub Actions ワークフローを使用しています。

ワークフロートリガーパスデプロイ先ビルド時間(平均)
frontend-swa-deploy.ymlapplication/frontend/**Azure Static Web Apps3 分
backend-docker-build.ymlapplication/backend/**GitHub Container Registry → Azure Web Apps5 分
deploy-x-scheduler-functions.ymlapplication/functions/**Azure Functions (X Scheduler)2 分
deploy-blog-search-mcp-functions.ymlapplication/blog-search-mcp-functions/**Azure Functions (MCP Server)2 分

paths フィルタによる最適化

課題: モノレポ全体をビルドすると、変更のないアプリもビルドされ時間がかかる

解決策: GitHub Actions の paths フィルタで、変更されたディレクトリのみをトリガー

例: Frontend SWA Deploy

# .github/workflows/frontend-swa-deploy.yml
name: Frontend SWA Deploy

on:
  push:
    branches:
      - main
    paths:
      - "application/frontend/**"
      - ".github/workflows/frontend-swa-deploy.yml"
  workflow_dispatch:

ポイント:

  • paths フィルタで application/frontend/** のみをトリガー
  • Backend を変更しても、Frontend のワークフローは実行されない

Before/After 比較

Before(paths フィルタなし)

Backend を変更
↓
全ワークフロー実行(Frontend, Backend, Functions, MCP Functions)
↓
合計ビルド時間: 12分(3 + 5 + 2 + 2)

After(paths フィルタあり)

Backend を変更
↓
Backend ワークフローのみ実行
↓
合計ビルド時間: 5分(58%削減)

並行デプロイの実現

4 つのワークフローが独立しているため、複数のアプリを同時に変更した場合、並行デプロイが実現されます。

Frontend と Backend を同時に変更
↓
frontend-swa-deploy.yml と backend-docker-build.yml が並行実行
↓
合計ビルド時間: 5分(逐次実行なら8分)

CI/CD パイプラインの効果

ビルド時間 58%削減 – paths フィルタにより、変更のないアプリはビルドされない
並行デプロイ – 複数のアプリを同時に変更しても、並行実行で時間短縮
安全なデプロイ – 各アプリが独立しているため、Frontend のデプロイ失敗が Backend に影響しない

開発体験の変化(Before/After)

モノレポ ×AI 協業開発環境を導入する前後で、開発体験がどう変わったかを比較します。

Before(モノレポ ×AI 環境導入前)

問題点

AI に毎回プロジェクト構成を説明

開発者: 「ユーザー管理機能を実装して」
AI: 「このプロジェクトはどういう構成ですか?」
開発者: 「Backendは...Frontendは...」(毎回説明)

CI/CD ビルド時間の増加

Backend を変更
↓
全ワークフロー実行(Frontend, Backend, Functions)
↓
合計ビルド時間: 12分

ドキュメントが散らばって、どこに何があるかわからない

計画ドキュメント: Notion
実装コメント: コード内
ブログ記事: 別リポジトリ

↓
情報が散らばって、どこに何があるかわからない

After(モノレポ ×AI 環境導入後)

改善点

AI が自律的にプロジェクト構成を理解

開発者: 「ユーザー管理機能を実装して」
AI: 「/CLAUDE.md を確認します」
AI: 「/application/backend/CLAUDE.md を確認します」
AI: 「型安全パイプラインに従って実装します」

CI/CD ビルド時間 50%削減

Backend を変更
↓
Backend ワークフローのみ実行(pathsフィルタ)
↓
合計ビルド時間: 5分(50%削減)

ドキュメントが自然に蓄積し、資産化される

4フェーズワークフロー
計画 (/docs/features/)
  ↓
実装 (/application/)
  ↓
研究記録 (/docs/research/)
  ↓
記事化 (/docs/article/)
  ├─ RAGもどき(fetch-blog-html.ts)でトークン数50-60%削減
  └─ 文体補正(writing-style-prompt.md)で一貫した記事品質

↓
情報が整理され、知見が資産化される
技術ブログのライブラリが自然に形成される

定量的な効果

指標BeforeAfter改善率
初期説明時間10 分/セッションほぼ不要(CLAUDE.md で自律理解)大幅削減
CI/CD ビルド時間12 分5 分58%削減
ドキュメントメンテナンス時間週 5 時間週 2 時間60%削減
新機能開発スピード2 週間1 週間50%短縮
記事執筆時間6-8 時間3-4 時間50%削減

※測定条件: 小規模〜中規模機能開発(バックエンド API エンドポイント 2-4 個、フロントエンド画面 1-2 個規模)での実測値です。プロジェクトの規模や複雑さによって効果は変動します。記事執筆時間は、調査資料作成から記事本文執筆までの合計時間です。

龍ちゃんの所感

導入前の課題:

プロジェクトが小さいうちは問題なかったんですが、いろんな検証を詰め込んでプロジェクトが大きくなってくると、ドキュメントを編集するだけでビルドが走るという問題が出てきました。適切にビルドを分割することで、不要な CI/CD の実行を抑える必要が出てきたんです。

また、フロントエンド・バックエンド・Functions(バッチ処理)という複数の構成でアプリを作っていたので、API 連携やデータベース連携がスムーズに行える環境が必要でした。例えば、バックエンドでデータベースに情報を入れて、それをバッチ処理で取得して実行するような連携ですね。

AI 協業開発での気づき:

AI と開発する上で、フロントエンドとバックエンドの型ズレを解消するためにも、アプリケーション全体を AI に見える形で一つに集約することがやはり大事だなと実感しました。これは自分の中でもすごく効果的でしたね。

検証とブログ執筆の課題:

自分の検証スタイルとして、「インプットを入れたらアウトプットを出す」というのが弊社の理念でもあり、このブログの意義でもあるので、検証とブログ執筆はセットで考えていました。

ただ、検証が終わった後に、別でブログを書くためのシステムを立ち上げて…というのが割と面倒になってきたんです。もう 3 年で 200 記事くらい書いているんですが、だんだん検証する内容も大きくなってきて、記事も長くなってきました。

ソースコード参照の課題と解決策:

記事を書く際にソースコードを参照することが増えてきたんですが、参照するファイルが増えれば増えるほど、ブログを書く障壁がどんどん上がってきました。

そこで、リポジトリから直接情報を吸い出してブログを書くシステム(4 フェーズワークフロー、RAG もどき、文体補正)を構築したことで、ブログ執筆の効率化がさらに進んだと感じています(詳細は検証 → 記事化で知見を資産化!Claude Code×RAG もどきで AI 技術ブログ執筆を効率化を参照)。

まとめ

この記事では、モノレポ ×AI 協業開発環境の構築術について解説しました。

モノレポ ×AI 協業開発環境のポイント

CLAUDE.md 階層構造でコンテキスト管理
9 つの CLAUDE.md ファイルで、AI に適切な粒度の情報を提供

4 フェーズワークフロー(計画 → 実装 → 研究記録 → 記事化)
ドキュメント駆動型開発で、知見が自然に蓄積され、資産化される

  • 3 フェーズ開発を基盤に、フェーズ 4(記事化)を追加
  • RAG もどき、文体補正による記事執筆効率化

型安全パイプライン(Backend DTOs → OpenAPI → Frontend Types)
Single Source of Truth で、型ズレゼロを実現(型安全パイプラインの詳細記事

paths フィルタによる最適化 CI/CD
4 つの独立ワークフローで、ビルド時間 58%削減

開発体験の変化

BeforeAfter
AI に毎回プロジェクト構成を説明CLAUDE.md で自律的に理解
CI/CD ビルド時間 12 分paths フィルタで 5 分(58%削減)
ドキュメントが散らばる4 フェーズワークフローで自然に蓄積、資産化
記事執筆に時間がかかるRAG もどき、文体補正で 50%削減

次のステップ

この記事を読んで、モノレポ ×AI 協業開発環境に興味を持った方は、以下のステップで実践してみてください:

1. CLAUDE.md を作成

まずは、プロジェクトルートにCLAUDE.mdを作成し、プロジェクト全体像を記載します。

# CLAUDE.md

## Project Architecture Overview

(プロジェクトの概要)

### Directory Structure

(ディレクトリ構造)

## Workflow Pattern (4-Phase Workflow)

1. **計画フェーズ** - Plan in `/docs/`
2. **実装フェーズ** - Implement in `/application/`
3. **研究記録フェーズ** - Document findings in `/docs/research/`
4. **記事化フェーズ** - Gather materials in `/docs/article/`

2. paths フィルタを導入

GitHub Actions ワークフローに paths フィルタを追加します。

on:
  push:
    branches:
      - main
    paths:
      - "application/frontend/**"

3. 4 フェーズワークフローを実践

新機能開発時は、計画 → 実装 → 研究記録 → 記事化の 4 フェーズを順に進めます。

詳細は3 フェーズ開発の基本を学ぶ記事を参照してください。

参考リンク

関連記事(本サイト)

AI 協業開発手法シリーズ

型安全パイプライン

公式ドキュメント


ここまで読んでいただき、ありがとうございました!

モノレポ ×AI 協業開発環境を構築することで、開発体験が劇的に向上します。ぜひ、この記事を参考に、あなたのプロジェクトでも実践してみてください。

質問や感想は、コメント欄でお待ちしております。また、Twitter のほうもよろしくお願いします!

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です