Gestion de monorepo avec Claude Code

モノレポ管理の複雑さをClaude Codeで解決

モノレポは複数のパッケージを一元管理できる反面、設定の複雑さが課題です。Claude Codeを使えば、初期構築から日々のメンテナンスまで効率的に進められます。

モノレポの初期セットアップ

> Turborepo + pnpm workspaces でモノレポを構築して。
> 以下のパッケージ構成で：
> - apps/web: Next.jsフロントエンド
> - apps/api: Express バックエンド
> - packages/ui: 共通UIコンポーネント
> - packages/shared: 共通型定義・ユーティリティ
> - packages/config: ESLint、TypeScript、Prettier の共通設定

ルートの設定

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {
      "dependsOn": ["^build"]
    },
    "test": {
      "dependsOn": ["^build"]
    },
    "type-check": {
      "dependsOn": ["^build"]
    }
  }
}

# pnpm-workspace.yaml
packages:
  - "apps/*"
  - "packages/*"

共通パッケージの作成

> packages/shared に共通の型定義とユーティリティを作成して。
> apps/web と apps/api の両方から使えるように。

// packages/shared/src/types/user.ts
export interface User {
  id: string;
  email: string;
  name: string;
  role: "admin" | "editor" | "viewer";
  createdAt: Date;
}

export interface CreateUserInput {
  email: string;
  name: string;
  role: User["role"];
}

// packages/shared/src/utils/validation.ts
export function isValidEmail(email: string): boolean {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

export function sanitizeInput(input: string): string {
  return input.trim().replace(/<[^>]*>/g, "");
}

// packages/shared/src/index.ts
export * from "./types/user";
export * from "./utils/validation";

// packages/shared/package.json
{
  "name": "@myapp/shared",
  "version": "0.0.0",
  "main": "./src/index.ts",
  "types": "./src/index.ts",
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts",
    "type-check": "tsc --noEmit"
  }
}

共通設定の一元化

> ESLint、TypeScript、Prettierの設定を
> packages/config に集約して。
> 各appから extends で使えるように。

// packages/config/eslint-preset.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  rules: {
    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
    "@typescript-eslint/no-explicit-any": "error",
  },
};

// apps/web/.eslintrc.js で使用
module.exports = {
  extends: [require.resolve("@myapp/config/eslint-preset"), "next/core-web-vitals"],
};

パッケージ間の依存関係追加

> apps/web に packages/ui と packages/shared への
> 依存関係を追加して、インポートが動くようにして。

// apps/web/package.json
{
  "dependencies": {
    "@myapp/ui": "workspace:*",
    "@myapp/shared": "workspace:*"
  }
}

新しいパッケージの追加

> packages/logger という新しいパッケージを作成して。
> 構造化ログを出力するユーティリティ。
> 他のパッケージと同じ設定パターンに合わせて。

Claude Codeは既存パッケージの構成を分析し、一貫したパターンで新規パッケージを作成します。

モノレポ全体のメンテナンス

> モノレポ全体の依存パッケージを更新して。
> パッケージ間の整合性を保ちながら。
> 更新後に全パッケージのテストが通ることを確認。

# Claude Codeが実行するコマンド
pnpm -r update
pnpm turbo run build
pnpm turbo run test
pnpm turbo run type-check

CI/CDでのモノレポ対応についてはCI/CDパイプライン構築ガイドを、Next.jsアプリの開発はNext.jsフルスタック開発を参照してください。日々の開発効率を上げるコツは生産性を3倍にする10のTipsもあわせてご覧ください。

Summary

Claude Codeはモノレポの初期構築から日々のメンテナンスまで幅広く対応できます。共通設定の一元管理、パッケージ間の依存関係管理、全体の整合性チェックなど、モノレポ特有の複雑さをClaude Codeが解決します。

Turborepoの詳細はTurborepo公式ドキュメント、Claude CodeについてはAnthropic公式ドキュメントを参照してください。