Building and Managing Nx Workspaces with Claude Code

Nxワークスペースの構築をClaude Codeで効率化する

NxはNrwlが開発するモノレポ管理ツールで、豊富なプラグインエコシステムと高度なビルドグラフ解析が特徴です。Claude Codeと組み合わせることで、Nxの多機能さを最大限に活かせます。

ワークスペースの初期セットアップ

> Nxワークスペースを新規作成して。
> 構成：
> - apps/frontend: React + Vite
> - apps/backend: NestJS API
> - libs/shared-types: 共通型定義
> - libs/ui-components: 共通UIコンポーネント

# Nxワークスペースの作成
npx create-nx-workspace@latest my-workspace \
  --preset=integrated \
  --nxCloud=skip

# プラグインの追加
nx add @nx/react
nx add @nx/nest

プロジェクトの追加とジェネレーター活用

Nxのジェネレーターを使えば、一貫した構成でプロジェクトを追加できます。

> Reactアプリケーションを追加して。Vitestでテストも設定して。

# Reactアプリの生成
nx g @nx/react:app frontend \
  --bundler=vite \
  --unitTestRunner=vitest \
  --e2eTestRunner=playwright \
  --style=css

# ライブラリの生成
nx g @nx/react:lib ui-components \
  --unitTestRunner=vitest \
  --publishable \
  --importPath=@my-workspace/ui-components

project.jsonの設定

> frontendアプリのビルド設定を最適化して。
> 環境変数の切り替えとソースマップの設定も追加して。

{
  "name": "frontend",
  "targets": {
    "build": {
      "executor": "@nx/vite:build",
      "options": {
        "outputPath": "dist/apps/frontend",
        "generatePackageJson": false
      },
      "configurations": {
        "production": {
          "mode": "production",
          "sourcemap": false
        },
        "development": {
          "mode": "development",
          "sourcemap": true
        }
      }
    },
    "serve": {
      "executor": "@nx/vite:dev-server",
      "defaultConfiguration": "development"
    }
  }
}

影響範囲の分析と選択的実行

Nxの強力な依存グラフ解析を活用します。

> 変更の影響を受けるプロジェクトだけテストを実行する
> CIパイプラインを作って。

# 影響を受けるプロジェクトの確認
nx affected --target=test --base=main

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

# 並列実行数の指定
nx affected --target=build --parallel=5

# .github/workflows/ci.yml
name: CI
on: [pull_request]
jobs:
  affected:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: nrwl/nx-set-shas@v4
      - run: npm ci
      - run: npx nx affected -t lint test build --parallel=3

カスタムジェネレーターの作成

プロジェクト固有のボイラープレートをジェネレーター化できます。

> APIエンドポイントを追加するカスタムジェネレーターを作って。
> コントローラ、サービス、DTOのファイルを自動生成したい。

// tools/generators/api-endpoint/index.ts
import { Tree, generateFiles, joinPathFragments, names } from '@nx/devkit';

interface Schema {
  name: string;
  project: string;
}

export default async function (tree: Tree, schema: Schema) {
  const { className, fileName } = names(schema.name);
  const projectRoot = `apps/${schema.project}/src`;

  generateFiles(
    tree,
    joinPathFragments(__dirname, 'files'),
    joinPathFragments(projectRoot, fileName),
    { className, fileName, template: '' }
  );
}

Zusammenfassung

Claude Codeを活用すれば、Nxの豊富な機能を素早く理解し、効率的なモノレポ環境を構築できます。モノレポ管理の基本やTypeScript開発のコツも参考にしてください。

Nxの詳細はNx公式ドキュメントを参照してください。