Nx(nrwl)を現場で使って感じたメリット、デメリット

今の現場でNx(nrwl)を使って、もう少しで半年が経つ。

最近は、新規アプリを追加するタスクをやったことで、改めて、Nxの使い方、思想などの理解が深まったので整理の意味を込めてブログにまとめる。

Nx(nrwl)とは
Nxのメリット
Nxのデメリット
1. 学習コストの高さ
2. ディレクトリ、ファイルが多い
最後に

Nx(nrwl)とは

まず、そもそもNx(nrwl)とは何か？

簡単に言うと、モノレポを管理するライブラリです。

アプリケーションやコンポーネントの追加が簡単にできたり、ビルド、テストは変更した箇所のみ実行します。

また、フレームワークはReact, Angular, next.js, NestJSをサポートしています。

Nxのメリット

私が感じるメリットは以下の通りです。

アプリ、コンポーネントなどの追加が簡単

普段、Angularを使っていて、angular cliでも簡単にコンポーネントなどを追加できるのですが、同じ感じでNxでもコマンドで簡単にいろんなものを追加することができます。

ただ、私はコマンドを使わずにVisual Studio Codeのプラグインを使ってますが、本当に便利です。

変更箇所のみビルド、テスト

Nxは非常に賢くて、キャッシュを見て、変更箇所のみテストします。

コード量が増えると、ビルド、テストが遅くなりますが、Nxを使えば差分のみ実行するので、その心配が少なくなります。（心配が無くなるわけではありません）

詳しく知りたい方は下記を見てください。（Google翻訳でも十分、理解できます）

Affected

Next generation build system with first class monorepo support and powerful integrations.

シンプルな構造

Nxは下記の構造を推奨しています。

place 80% of your logic into the libs/ folder
and 20% into apps/
https://nx.dev/structure/applications-and-libraries

ロジックの80%をlibsディレクトリに、20%をappsに。

このようにすることで、ロジックを再利用しやすくなります。

最初は、戸惑いましたが、Nxをちゃんと導入してる現場で経験を積んでくと、段々と慣れてきて、理解できるようになってきました。

逆に、appsが20%は多いんじゃ無いかなと思いはじめているくらいです。

Nxのデメリット

次はデメリットです。

学習コストの高さ

メリットに書いた、「シンプルな構造」は慣れるまで、時間がかかります。

ただし、一度、理解してしまえば、それ以降は、効率良く開発できるし、そんなに時間もかからないので、学習コストがそれほど高くは無いです。

また、「学習コストが高い」というのも、少し誤解がありそうで、Nxを習得するまでの時間、労力が学習コストになると思いますが、覚えることはそんなに多くないですし、libs配下にロジックを小さく分割するのは、Nx以外にも普通にあり得そうなので、しつこいようですが、学習コストはそれほど高くないと思っています。

ディレクトリ、ファイルが多い

Nxだけでなく、Angularも関連してるのかもしれませんが、とにかくディレクトリ、ファイルが多いです。

例えば、編集画面を１ページ作成するのに、下記のようになります。

ページコンポーネント(ページ全体のレイアウト)
- pages/edit/edit.component.ts
- pages/edit/edit.component.spec.ts
コンテナー(API呼ぶ)
- containers/edit/edit-container.component.ts
- containers/edit/edit-container.component.spec.ts
コンポーネント(だいたい複数作成、表示関係を担当)
- components/edit/edit.component.ts
- components/edit/edit.component.spec.ts
- components/edit/edit.component.scss
- components/edit/edit.component.html

結構、多いですよね。

ただ、こちらも構造がシンプルで、libs配下のディレクトリ構成がしっかり設計されてれば、徐々に慣れていくのであまり問題にはなりません。