React Academy · レッスン

Nx Affected CommandsとCaching

変更の影響を受けるtestsとbuildsだけを実行し、Nx Cloudのdistributed cachingでCIを高速化します。

「Nx Affected CommandsとCaching」はCoddyKit上の無料React Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

影響対象の概念

Nxはモノレポの依存関係グラフを追跡します。ファイルを変更すると、Nxはどのプロジェクトが影響を受けるか（直接変更されたプロジェクト、または変更されたプロジェクトに依存するプロジェクト）を計算し、それらに対してのみタスクを実行します。

影響を受けるプロジェクトのテスト実行

メインブランチからの変更によって影響を受けるプロジェクトに対してのみテストを実行します。

# Compare to main branch:
npx nx affected --target=test --base=origin/main --head=HEAD

# Shorthand (uses nx.json defaultBase):
npx nx affected --target=test

影響を受けるプロジェクトのビルド

影響を受けるプロジェクトだけをビルドします。PRごとにモノレポ全体を再ビルドせずに済むため、CIでは不可欠です。

npx nx affected --target=build

# With parallel workers:
npx nx affected --target=build --parallel=3

影響を受けるプロジェクトのLintとE2E

LintとE2Eテストにも同じパターンを適用します。

npx nx affected --target=lint
npx nx affected --target=e2e

Nxが影響範囲を判断する方法

Nxはすべてのソースファイル、package.jsonファイル、設定ファイルをハッシュ化します。プロジェクト自身のファイルが変更された場合、またはインポート元のプロジェクトが変更された場合、そのプロジェクトは影響を受けたと判断されます。

ローカル計算キャッシュ

Nxはタスクの出力（ビルド成果物やテスト結果）を.nx/cacheにキャッシュします。入力が変わっていない状態で同じタスクを実行すると、キャッシュからすぐに復元されます。ターミナルログを含む出力も再生されます。

# First run (builds):
$ npx nx build web  → Builds in 28s, cached

# Second run (no changes):
$ npx nx build web  → Cache hit! [existing outputs match] 0ms

# Clear cache if needed:
$ npx nx reset

Nx Cloudのリモートキャッシュ

Nx CloudはチームメンバーとCIの間でキャッシュを共有します。別のメンバーが同じ入力でプロジェクトをすでにビルドしていれば、CIは再ビルドせずにリモートキャッシュを利用できます。新しいマシンであっても同様です。

# Connect workspace to Nx Cloud:
npx nx connect-to-nx-cloud

# Set CI environment variable:
# NX_CLOUD_ACCESS_TOKEN=<token>

キャッシュ入力の設定

project.jsonで、ターゲットのキャッシュ入力にするファイルを設定します。ビルド出力に影響しないファイル（READMEやテスト用フィクスチャなど）を除外すると、キャッシュヒットを最大化できます。

// project.json
{
  "targets": {
    "build": {
      "inputs": [
        "default",  // source files
        "^default"  // upstream dependency source files
      ],
      "outputs": ["{workspaceRoot}/dist/apps/web"]
    }
  }
}

タスクの分散（Nx Agents）

Nx Cloud Agentsは、影響を受けるタスクを複数のCIマシンに並列分散します。これにより、大規模なモノレポでCIの実経過時間を大幅に短縮できます。

Nx Console VS Code拡張機能

Nx Console拡張機能は、Nxのコマンドの実行、プロジェクトグラフの可視化、コードの生成を行うGUIを提供します。CLIフラグを覚える必要はありません。

タスクグラフの可視化

nx graph --task=buildを実行すると、どのタスクがどのタスクに依存しているかを含むタスク依存関係グラフが表示され、ビルド順序の理解に役立ちます。

npx nx graph --task=build

小テスト

Nxのタスクがキャッシュヒットになるかどうかは、何によって決まりますか？

まとめ

nx affected --target=Xは、変更されたプロジェクトとその依存プロジェクトに対してのみタスクを実行します。Nxは入力をハッシュ化して出力をキャッシュし、結果をすぐに再生します。Nx Cloudを使うと、複数のマシン間で共有されるリモートキャッシュに拡張できます。CIを高速化するには、--parallel=Nを使ってタスクを同時実行します。

よくある質問

「Nx Affected CommandsとCaching」レッスンは無料ですか？

はい。「Nx Affected CommandsとCaching」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Nx Affected CommandsとCaching」で何を学びますか？

変更の影響を受けるtestsとbuildsだけを実行し、Nx Cloudのdistributed cachingでCIを高速化します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Nx Affected CommandsとCaching」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る