【エヌエックス】

Nx(モノレポ) とは?

💡 モノレポの「全部入り」プラットフォーム。足りないものは、たぶんない
📌 このページのポイント
Nx: 依存グラフ + Affected プロジェクト依存グラフ web-app shared-ui 変更! api utils affected! Nxの主要機能 nx affected:test 変更の影響範囲だけテスト nx generate プロジェクト雛形を自動生成 計算キャッシュ 同じ入力なら結果を再利用 プラグイン React / Angular / Next.js / Nest.js
Nxの依存グラフとAffected機能のイメージ
ひよこ ひよこ

NxとTurborepoってどっちもモノレポ用だよね?何が違うの?

ペンギン先生 ペンギン先生

一番の違いは「カバー範囲」だね。Turborepoはビルドの高速化に特化してるけど、Nxはプロジェクト生成、コード品質チェック、依存グラフの可視化まで全部入りのプラットフォームなんだ。スイスアーミーナイフみたいなものだよ

ひよこ ひよこ

依存グラフの可視化って何?

ペンギン先生 ペンギン先生

nx graphコマンドを実行すると、モノレポ内のプロジェクト間の依存関係ブラウザ上にグラフとして表示されるんだ。「このライブラリを変更したら、どのアプリに影響するか」が一目で分かるよ。大規模プロジェクトでは本当に助かる機能だね

ひよこ ひよこ

プラグインって具体的にどんなものがあるの?

ペンギン先生 ペンギン先生

ReactAngularNext.js、Nest.js、ExpressJestCypress…主要なフレームワークやツールのプラグインが揃ってるよ。プラグインを入れると、プロジェクトの雛形生成やビルド設定が自動で追加されるんだ

ひよこ ひよこ

Affected(影響範囲)って機能は何?

ペンギン先生 ペンギン先生

Gitの差分を見て「今回の変更で影響を受けるプロジェクトだけ」テストやビルドを実行する機能だよ。100個のプロジェクトがあっても、変更に関係する5個だけテストすればいい。CIの実行時間が劇的に短くなるんだ

ひよこ ひよこ

導入するのは大変?

ペンギン先生 ペンギン先生

既存プロジェクトへの導入も考慮されてて、npx nx initで段階的に導入できるよ。最初はキャッシュだけ使って、慣れてきたらプラグインやジェネレーターを追加していく…という進め方ができるんだ

ひよこ ひよこ

Googleのエンジニアが作ったって聞いたけど…

ペンギン先生 ペンギン先生

そうだよ。Googleの社内ビルドツール「Blaze」(Bazelの前身)の思想がベースにあるんだ。依存グラフの解析、影響範囲の特定、分散キャッシュ…これらは全部Google規模の開発で培われた技術。それをJavaScriptエコシステムで使いやすくしたのがNxだね

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Nx」って出てきたら「モノレポを管理・高速化する多機能プラットフォーム」と思えればだいたいOK!
📖 おまけ:英語の意味
「Nx」 = モノレポ開発プラットフォーム
💬 由来は公式には明かされていないけど、Nrwl社(現Nx社)が開発したツールだよ。元Googleのエンジニアたちが、Googleの社内ビルドツールの思想をオープンソースで実現したんだ
← 用語集にもどる