nx

Nx モノレポ開発

モノレポ向けのスマートで高速、拡張性に優れたビルドシステムである Nx のエキスパートです。

プロジェクト構成

• Nx の規約に従ってプロジェクトを整理します。
  • apps/ - アプリケーションプロジェクト（Web アプリ、API、モバイルアプリ）
  • libs/ - ライブラリプロジェクト（共有コード、機能、ユーティリティ）
• 一貫性のある命名パターンを使用します：scope-type-name（例：shared-ui-button）
• 関連するライブラリは機能別のフォルダーにまとめます

ワークスペースの設定

ワークスペース全体の設定を nx.json で構成します。

{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "cache": true
    },
    "test": {
      "cache": true
    }
  },
  "defaultBase": "main"
}

• プロジェクト固有の設定には project.json を使用します
• モジュール境界を適用するため、適切な tags を定義します

プロジェクトの設定

各プロジェクトに project.json を用意します。

{
  "name": "my-app",
  "sourceRoot": "apps/my-app/src",
  "projectType": "application",
  "tags": ["scope:web", "type:app"],
  "targets": {
    "build": { },
    "serve": { },
    "test": { }
  }
}

• プロジェクトの種類を application または library として明確に定義します
• 依存関係の制約を適用するためにタグを使用します

コード生成

• Nx ジェネレーターを使用して、一貫性のあるコードのひな形を生成します。
  • nx g @nx/react:app my-app - React アプリケーションを生成
  • nx g @nx/react:lib my-lib - React ライブラリを生成
  • nx g @nx/react:component my-component --project=my-lib - コンポーネントを生成
• プロジェクト固有のパターンにはカスタムジェネレーターを作成します
• 実行前に変更をプレビューするには --dry-run を使用します

モジュール境界

ESLint ルールを使用して境界を適用します。

{
  "@nx/enforce-module-boundaries": [
    "error",
    {
      "depConstraints": [
        { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib", "type:util"] },
        { "sourceTag": "type:lib", "onlyDependOnLibsWithTags": ["type:lib", "type:util"] },
        { "sourceTag": "scope:web", "onlyDependOnLibsWithTags": ["scope:web", "scope:shared"] }
      ]
    }
  ]
}

• プロジェクトの種類間で明確な依存関係ルールを定義します
• スコープを使用してドメインの境界を分けます

キャッシュとパフォーマンス

• ビルドを高速化するため、計算キャッシュを有効にします
• 分散キャッシュとタスク実行のために Nx Cloud を構成します
• 変更されたプロジェクトのタスクだけを実行するには、affected コマンドを使用します。
  • nx affected:build
  • nx affected:test
  • nx affected:lint
• 正確なキャッシュのため、適切な inputs と outputs を定義します

タスクの実行

• Nx CLI でタスクを実行します。
  • nx build my-app - 特定のプロジェクトをビルド
  • nx run-many -t build - すべてのプロジェクトをビルド
  • nx affected -t test - 影響を受けるプロジェクトをテスト
• 適切な依存関係の順序で実行するため、タスクパイプラインを使用します
• 独立したタスクを並列実行するように構成します

テスト戦略

• Nx のプリセットを使って、ユニットテストに Jest を使用します
• E2E テストには Cypress または Playwright を構成します
• UI ライブラリのコンポーネントテストを実装します
• 効率的にテストを実行するため、CI で nx affected:test を使用します

CI/CD との統合

• 分散タスク実行には Nx Cloud を使用します
• Nx を使って GitHub Actions を構成します。

  - uses: nrwl/nx-set-shas@v4
  - run: nx affected -t lint test build
  

• 適切なキャッシュ戦略を実装します
• メトリクスを記録するには nx-cloud record を使用します

ベストプラクティス

• アプリケーションは薄く保ち、ロジックはライブラリに移します
• 共通コードには共有ユーティリティライブラリを作成します
• インポートをすっきりさせるため、バレルエクスポート（index.ts）を使用します
• ライブラリから適切に型をエクスポートします
• ライブラリの目的と公開 API を文書化します
• 視覚的なプロジェクト管理には Nx Console VS Code 拡張機能を使用します
• 依存関係を把握するには、プロジェクトグラフを活用します：nx graph