Nx を使用したモノレポ管理の始め方

複数の関連プロジェクトを管理することは、すぐに複雑になります。コードベースが成長するにつれて、一貫性を保ち、効率的にコードを共有し、ビルド時間を最適化するツールが必要になります。Nx は、これらの課題に特化して設計された強力なソリューションです。

このガイドでは、Nx を設定してモノレポを効果的に管理する方法を説明します。コア概念を学び、基本的なワークスペースを作成し、Nx のインテリジェントな機能がどのように開発ワークフローを劇的に改善できるかを理解できます。

モノレポとは？

モノレポは、複数のプロジェクトを単一のリポジトリに保存するバージョン管理戦略です。各プロジェクトに個別のリポジトリを持つ（ポリレポ）のとは異なり、モノレポは関連するすべてのプロジェクトを一箇所に含みます。

モノレポの利点

• コード共有 - 複雑なパッケージ管理なしにプロジェクト間でコードを再利用
• アトミックな変更 - 単一のコミットで複数のプロジェクトを更新
• 一貫したツール - すべてのプロジェクトに同じ開発標準を適用
• 依存関係の簡素化 - プロジェクトの関係を一箇所で管理
• 協調的なリリース - 相互依存するプロジェクト間で更新を同期

ただし、モノレポはビルド依存関係の管理やコードベースの成長に伴うスケーリングなどの課題を導入します。ここで Nx の出番です。

Nx とは？

Nx は、モノレポ管理に特化して設計された拡張可能なビルドシステムです。元々は Angular アプリケーション用に開発されましたが、現在は React、Vue、Node.js などの複数のフロントエンドおよびバックエンドフレームワークをサポートしています。

Nx の主要機能

• スマートキャッシュ - 変更されていないコードの再ビルドを回避
• 依存関係グラフ - プロジェクト間の関係を可視化
• affected コマンド - 変更の影響を受けるもののみをビルドおよびテスト
• コードジェネレーター - 一貫したプロジェクト構造を作成
• 拡張可能なプラグイン - さまざまなフレームワークとツールをサポート

最初の Nx ワークスペースの設定

React アプリケーションと共有ライブラリを含む基本的な Nx ワークスペースを作成しましょう。

前提条件

• Node.js（v14 以降）
• npm または yarn

Nx ワークスペースの作成

# Nx CLI をグローバルにインストール（オプション）
npm install -g nx

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

セットアップ中に、以下の選択を求められます：

1. 使用するスタック（「React」を選択）
2. アプリケーション名（例：「web-app」）
3. スタイル形式（CSS、SCSS など）
4. Nx Cloud の設定（オプションですが、チームプロジェクトには推奨）

これにより、以下の構造のワークスペースが作成されます：

my-workspace/
├── apps/
│   └── web-app/
├── libs/
├── nx.json
├── package.json
└── tsconfig.base.json

ワークスペース構造の理解

• apps/ - アプリケーション（フロントエンド、バックエンド、モバイル）を含む
• libs/ - アプリケーション間で使用される共有コードライブラリを保持
• nx.json - Nx の動作とプラグインを設定
• package.json - ワークスペース全体の依存関係を管理

ワークスペースへのプロジェクトの追加

次に、共有 UI ライブラリを追加し、Nx がどのように依存関係を管理するかを見てみましょう。

共有ライブラリの作成

nx g @nx/react:lib ui-components

これにより、ワークスペース内の任意のアプリケーションからインポートできるライブラリが libs/ui-components/ に作成されます。

ライブラリ内でのコンポーネント作成

nx g @nx/react:component button --project=ui-components --export

これにより、UI ライブラリに Button コンポーネントが生成され、他のプロジェクトで使用するためにエクスポートされます。

アプリケーションでのライブラリの使用

新しいコンポーネントを使用するようにアプリケーションを編集します：

// apps/web-app/src/app/app.tsx
import { Button } from '@my-workspace/ui-components';

export function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button>Click me</Button>
    </div>
  );
}

Nx でのタスクの実行

Nx は、プロジェクト間でタスクを実行する統一された方法を提供します。

一般的なコマンド

# 開発サーバーを開始
nx serve web-app

# アプリケーションをビルド
nx build web-app

# テストを実行
nx test web-app

# コードをリント
nx lint web-app

すべてのプロジェクトでのタスク実行

nx run-many --target=build --all

Nx のインテリジェント機能の活用

Nx の真価は、ワークスペースが成長するにつれて明らかになります。最も価値のある機能を探ってみましょう。

プロジェクト依存関係の可視化

nx graph

これにより、プロジェクト依存関係のインタラクティブな可視化が開き、モノレポのアーキテクチャを理解するのに役立ちます。

影響を受けるプロジェクトの理解

変更を行うと、Nx はどのプロジェクトが影響を受けるかを判断できます：

nx affected:graph

これは、最近の変更によって影響を受けるプロジェクトのみを表示します。

変更された部分のみのビルド

nx affected --target=build

これは、変更によって影響を受けるプロジェクトのみをビルドし、CI/CD パイプラインで大幅な時間を節約します。

速度向上のためのキャッシュ

Nx は自動的にタスク結果をキャッシュします。同じ入力で同じタスクを実行すると、Nx は再実行する代わりにキャッシュされた結果を使用します：

# 初回実行（タスクを実行）
nx build web-app

# 2回目の実行（キャッシュを使用）
nx build web-app

Nx ワークスペースの設定

nx.json ファイルは Nx の動作を制御します。基本的な設定は以下の通りです：

{
  "npmScope": "my-workspace",
  "affected": {
    "defaultBase": "main"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

主要な設定：

• npmScope - ライブラリをインポートするためのプレフィックス
• affected.defaultBase - 比較対象の git ブランチ
• cacheableOperations - キャッシュすべきタスク
• dependsOn - タスクの依存関係（例：アプリケーションの前にライブラリをビルド）

実際の例：フルスタックアプリケーション

React フロントエンドと Node.js バックエンドを含む、より完全な例を作成しましょう：

# React アプリを作成
nx g @nx/react:app client

# Node.js API を作成
nx g @nx/node:app api

# 共有型ライブラリを作成
nx g @nx/js:lib shared-types

これにより、以下を含むワークスペースが得られます：

1. React クライアントアプリケーション
2. Node.js API サーバー
3. 共通型用の共有ライブラリ

両方のアプリケーションを同時に実行できます：

nx run-many --target=serve --projects=api,client --parallel

まとめ

Nx はモノレポ管理を簡単かつ効率的にします。プロジェクトの依存関係とビルド最適化の複雑さを処理することで、リポジトリ構造の管理ではなく、コードの記述に集中できます。このガイドで示したシンプルなセットアップから始めて、プロジェクトの成長に合わせて拡張してください。

よくある質問