Nx - モノレポ開発を劇的に効率化するビルドシステム

はじめに

大規模なプロジェクトを複数チームで開発していると、ビルド時間やCI/CDの遅さにイライラすることってありますよね。

個人的に、モノレポ構成で開発していて「テスト回すだけで20分待ち」みたいな状況になったとき、正直なところ生産性がガタ落ちするんですよ。

今回紹介するNxは、そういった開発効率の課題を解決してくれるビルドシステムです。元Googleのエンジニアが開発したツールで、現在250万人以上の開発者が利用、Fortune 500企業の70%以上が採用しているという実績があります。

Nxとは

Nxは、モノレポ（単一リポジトリで複数プロジェクトを管理する構成）向けのビルドシステム・ビルドオーケストレーターです。

GitHubスター数は27.7k、最新バージョンは22.2.0（2025年12月時点）。MITライセンスで公開されているオープンソースプロジェクトですね。

特筆すべきは、特定のフレームワークに縛られないこと。React、Angular、Next.js、Node.js、Storybook、Cypressなど、様々なテックスタックに対応しています。

特徴・メリット

1. インテリジェントキャッシング

これ、意外と重要なんですよ。Nxは変更されていないコードのビルドやテストをスキップします。

一度実行したタスクの結果をキャッシュして、同じ入力なら再実行せずにキャッシュから結果を返す。ローカルだけでなく、リモートキャッシュにも対応しているので、チームメンバー間でキャッシュを共有できます。

実際の導入事例だと、PayFitでは「デプロイが5日から20分に短縮」、Hetzner Cloudでは「テスト時間が20分から秒単位に短縮」という結果が出ているそうです。

2. タスクの並列実行と分散

依存関係を自動で解析して、並列実行できるタスクは同時に走らせます。さらにNx Agentsを使えば、複数のCIマシンにタスクを分散させることも可能。

Vattenfallという企業では、Nx Agentsで44%のCI高速化を実現したとのこと。

3. 影響範囲の自動検出

コードを変更したときに、影響を受けるプロジェクトだけをビルド・テストできます。巨大なモノレポで全プロジェクトをテストする必要がなくなるのは、時短という観点でかなりありがたいですね。

4. コード生成とプラグインエコシステム

公式プラグインが豊富で、React、Angular、Next.js、Nest.js、Expressなど主要フレームワーク向けのジェネレーターが用意されています。コマンド一発でプロジェクトの雛形を生成できるのは、開発スピードに直結します。

インストール方法

新規プロジェクトの場合

# 新しいNxワークスペースを作成
npx create-nx-workspace@latest my-workspace

# 対話形式で設定を選択
# - ワークスペースのタイプ（integrated/standalone）
# - 使用するフレームワーク
# - CIの設定など

既存プロジェクトへの導入

# 既存のnpmプロジェクトにNxを追加
npx nx@latest init

これだけで既存プロジェクトにNxのキャッシング機能が追加されます。段階的に導入できるのは良いですね。

基本的な使い方

プロジェクト構成

典型的なNxワークスペースの構造はこんな感じです。

my-workspace/
├── apps/
│   ├── web-app/          # フロントエンドアプリ
│   └── api/              # バックエンドAPI
├── libs/
│   ├── shared/
│   │   └── ui/           # 共通UIコンポーネント
│   └── feature/
│       └── auth/         # 認証機能
├── nx.json               # Nx設定
├── package.json
└── tsconfig.base.json

よく使うコマンド

# 特定プロジェクトのビルド
npx nx build web-app

# 特定プロジェクトのテスト
npx nx test api

# 影響を受けるプロジェクトのみビルド
npx nx affected -t build

# 影響を受けるプロジェクトのみテスト
npx nx affected -t test

# すべてのプロジェクトをビルド
npx nx run-many -t build

# 依存関係グラフの可視化
npx nx graph

プロジェクトの追加

# Reactアプリを追加
npx nx g @nx/react:app my-new-app

# 共通ライブラリを追加
npx nx g @nx/js:lib shared-utils

# Nest.jsのAPIを追加
npx nx g @nx/nest:app backend-api

nx.jsonの設定例

{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "cache": true
    },
    "test": {
      "cache": true
    },
    "lint": {
      "cache": true
    }
  },
  "defaultBase": "main",
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": ["default", "!{projectRoot}/**/*.spec.ts"]
  }
}

実践的なユースケース

ユースケース1: フロントエンド + バックエンドのモノレポ

複数のフロントエンドアプリとバックエンドAPIを1つのリポジトリで管理するパターン。共通のUIコンポーネントやユーティリティ関数をライブラリとして切り出せます。

apps/
├── admin-dashboard/    # 管理画面（React）
├── customer-portal/    # 顧客向けポータル（React）
└── api-server/         # API（Nest.js）
libs/
├── ui/                 # 共通UIコンポーネント
├── api-interfaces/     # API型定義（フロント・バック共有）
└── utils/              # 共通ユーティリティ

型定義を共有できるので、フロントとバックで型の不整合が起きにくくなります。30代になって思うのは、こういう地味な部分の効率化が積み重なると大きな差になるということですね。

ユースケース2: マイクロフロントエンド

複数チームで1つの大きなアプリを開発する場合、Nxのモジュールフェデレーション対応が活きます。

# ホストアプリの作成
npx nx g @nx/react:host shell

# リモートアプリの作成
npx nx g @nx/react:remote shop --host=shell
npx nx g @nx/react:remote cart --host=shell

ユースケース3: CI/CDの最適化

GitHub ActionsでNxを使う設定例です。

name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  main:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - run: npm ci

      - uses: nrwl/nx-set-shas@v4

      # 影響を受けるプロジェクトのみ実行
      - run: npx nx affected -t lint test build