コラム Claude Code入門 更新:

Claude Codeでモノレポを管理する方法!TurborepoとNxを使った大規模プロジェクト運用

Claude Codeでモノレポを管理する方法!TurborepoとNxを使った大規模プロジェクト運用
目次 (22項目)
  1. 1. はじめに
  2. 2. 目次
  3. 3. 1. モノレポとは何か・いつ採用するか
  4. モノレポ採用の判断基準
  5. モノレポのメリット・デメリット
  6. 4. 2. Turborepo vs Nx:選択基準
  7. どちらを選ぶかの判断
  8. 5. 3. Turborepoを使ったモノレポ構築
  9. Turborepoプロジェクトの初期設定
  10. ビルドパイプラインの最適化
  11. 6. 4. Nxを使ったモノレポ構築
  12. Nxプロジェクトの初期設定
  13. affected コマンドの活用
  14. 7. 5. 既存プロジェクトのモノレポ移行
  15. 段階的な移行計画
  16. 8. 6. パッケージ間の依存関係管理
  17. 循環依存の検出と解消
  18. 内部パッケージのバージョン管理
  19. 9. 7. CI/CDの最適化
  20. GitHub Actionsのモノレポ対応
  21. 10. 8. まとめ
  22. 11. よくある質問(FAQ)

はじめに

「複数のアプリやパッケージが増えてきて、リポジトリ管理が煩雑になってきた」

「TurborepoとNxのどちらを使えばいいか判断できない」

「モノレポに移行したいが、既存プロジェクトの移行方法がわからない」

アプリケーションが成長するにつれ、複数のパッケージやアプリを一つのリポジトリで管理するモノレポ構成が有効になります。Claude Codeを使えば、モノレポの設計・移行・最適化を効率的に進められます。

目次

  1. モノレポとは何か・いつ採用するか
  2. Turborepo vs Nx:選択基準
  3. Turborepoを使ったモノレポ構築
  4. Nxを使ったモノレポ構築
  5. 既存プロジェクトのモノレポ移行
  6. パッケージ間の依存関係管理
  7. CI/CDの最適化
  8. まとめ

1. モノレポとは何か・いつ採用するか

モノレポ採用の判断基準

> 現在のプロジェクト構成を見て、
  モノレポに移行すべきかどうかアドバイスしてください。

  現在の構成:
  - フロントエンド(Next.js):別リポジトリ
  - バックエンドAPI(Node.js):別リポジトリ
  - 共通の型定義:コピペで管理
  - UIコンポーネントライブラリ:別リポジトリ

  移行のメリット・デメリットと、
  移行する場合のスコープを提案してください。

モノレポのメリット・デメリット

メリット デメリット
コードの共有が容易 リポジトリが大きくなる
型定義の一元管理 CI/CDの設定が複雑になる
一括でリファクタリング可能 チームの習熟コストがある
依存関係の整合性が取りやすい ビルド時間が増加する可能性

2. Turborepo vs Nx:選択基準

どちらを選ぶかの判断

> TurborepoとNxを比較して、
  私たちのプロジェクトに最適な選択を提案してください。

  プロジェクト情報:
  - チーム規模:5名
  - アプリ数:3つ(Next.js × 2・Electron × 1)
  - 共有パッケージ数:現在0(移行後に増える見込み)
  - 主な言語:TypeScript

  選択基準のポイントをわかりやすく説明してください。

簡易比較表:

観点 Turborepo Nx
学習コスト 低い やや高い
設定の柔軟性 シンプル 高機能
コードジェネレーター なし あり(nx generate)
プラグインエコシステム 小さい 大きい
向いているケース 中小規模・シンプル構成 大規模・複雑な依存関係

3. Turborepoを使ったモノレポ構築

Turborepoプロジェクトの初期設定

> Turborepoを使ったモノレポを構築してください。

  構成:
  apps/
  ├── web(Next.js 14)
  ├── api(Express + TypeScript)
  └── docs(Docusaurus)

  packages/
  ├── ui(共通UIコンポーネント)
  ├── types(共通型定義)
  ├── config(ESLint・TypeScript設定)
  └── utils(共通ユーティリティ)

  設定内容:
  - turbo.jsonのパイプライン設定
  - 各パッケージのpackage.json
  - TypeScriptのproject references設定
  - ESLint・Prettierの共通設定

ビルドパイプラインの最適化

> turbo.jsonのパイプラインを最適化してください。

  現在の問題:
  - 変更がないパッケージも毎回ビルドされている
  - テストが順次実行されて時間がかかっている

  設定したい内容:
  - キャッシュの適切な設定(inputsの指定)
  - 並列実行できるタスクの特定
  - 依存関係に基づいた正しいビルド順序
  - Vercel Remote Cacheの設定

4. Nxを使ったモノレポ構築

Nxプロジェクトの初期設定

> Nxを使ったモノレポを構築してください。

  構成:
  - Next.jsアプリ(admin・customer)
  - NestJSバックエンド
  - 共有UIライブラリ(Storybook付き)
  - 共有データアクセス層

  設定内容:
  - nx.jsonの設定
  - プロジェクト間の依存グラフの設定
  - nx generateによるコード生成のカスタマイズ
  - Nxクラウドの設定(キャッシュ共有)

affected コマンドの活用

> NxのaffectedコマンドをCI/CDに組み込んでください。

  目標:変更された部分とその依存先のみビルド・テストを実行する

  設定内容:
  - nx affected --target=buildの設定
  - nx affected --target=testの設定
  - ベースブランチの設定(main)
  - PRでの影響範囲の可視化

5. 既存プロジェクトのモノレポ移行

段階的な移行計画

> 3つの別々のリポジトリをTurborepoのモノレポに移行する
  段階的な計画を立ててください。

  移行対象:
  - frontend-repo(Next.js)
  - backend-repo(Express)
  - shared-types-repo(TypeScript型定義)

  制約:
  - 移行中も各リポジトリの開発を継続できること
  - 本番環境のデプロイフローを壊さないこと
  - Gitの履歴を保持すること(git subtreeを使用)

  各フェーズの詳細な手順を教えてください。

6. パッケージ間の依存関係管理

循環依存の検出と解消

> このモノレポで循環依存が発生しています。
  影響範囲を特定して解消してください。

  nx graph を実行して依存グラフを確認してから、
  循環を解消するためのリファクタリング計画を立ててください。

内部パッケージのバージョン管理

> モノレポ内のパッケージのバージョン管理方法を設定してください。

  方針:
  - Fixed Versioning(全パッケージを同一バージョンで管理)か
    Independent Versioning(各パッケージ独立)かを推奨してください
  - Changesetを使ったバージョン管理の設定
  - CHANGELOGの自動生成
  - npmへの自動公開(public packageの場合)

7. CI/CDの最適化

GitHub Actionsのモノレポ対応

> このモノレポ用のGitHub Actionsワークフローを設計してください。

  要件:
  - 変更されたパッケージとその依存先のみビルド・テスト
  - アプリごとに独立したデプロイジョブ
  - キャッシュを最大限活用して実行時間を短縮
  - PRごとに影響範囲をコメントで可視化

  TurborepoまたはNxのaffectedコマンドを活用してください。

8. まとめ

Claude CodeでのMonorepo管理の効率化ポイント:

  • 複数リポジトリからの移行計画を段階的に立案できる
  • Turborepo・Nxのビルドパイプライン設定を自動最適化
  • 循環依存の検出と解消を自律的に実施
  • CI/CDの最適化(affected build)を自動設定

ツール選択の目安:

  • シンプルに始めたい → Turborepo
  • 大規模・コードジェネレーターが必要 → Nx
  • どちらでも → まずTurborepoで始めて必要になったらNxに移行

次回の第36回:Webhookを実装する方法では、イベント駆動アーキテクチャをClaude Codeで自動構築する手順を解説します。

よくある質問(FAQ)

Q. pnpm・yarn workspaces・npm workspacesの違いは?

A. モノレポではpnpmが最も効率的(ディスク使用量・インストール速度)なためClaude Codeでもpnpmを推奨します。「pnpm workspacesを使ったモノレポを構築してください」と指定することで対応できます。

この記事はClaude Code入門シリーズ(第4部)の第35回です。← 第34回:GraphQL API開発第36回:Webhook実装 →

ご質問はお問い合わせページからお気軽にどうぞ。

著者:R-LLM 開発者

フォロー

Webエンジニアとして10年以上のキャリアがあり、現在はWordPressとLLM(大規模言語モデル)の連携、および生成AIを活用した課題解決のための開発に日々取り組んでいます。

私の信条は、クライアントに寄り添った伴走支援と、最後まで責任を持ってやり遂げる「遂行力」です。これまでの膨大なトライ&エラーの蓄積により、自身の領域内であれば不具合も迅速に解決できる現場の知見を積み上げてきました。

このブログでは、一人のエンジニアとして私自身がAI技術に抱いている純粋な興味をベースに、日々の探求プロセスを発信しています。

生成AILLMをどのように実務に組み込み、価値へ繋げていくか。自身の検証結果だけでなく、実務者としての視点に基づいた「考察や推察」も含めて共有することで、同じように試行錯誤を続ける方々と知見を繋げていければと考えています。

関連記事

SHARE Xでシェア
← 前の投稿
投稿一覧に戻る
次の投稿 →