Nx Monorepo Development

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