今の現場でNx(nrwl)を使って、もう少しで半年が経つ。
最近は、新規アプリを追加するタスクをやったことで、改めて、Nxの使い方、思想などの理解が深まったので整理の意味を込めてブログにまとめる。
Nx(nrwl)とは
まず、そもそもNx(nrwl)とは何か?
簡単に言うと、モノレポを管理するライブラリです。
アプリケーションやコンポーネントの追加が簡単にできたり、ビルド、テストは変更した箇所のみ実行します。
また、フレームワークはReact, Angular, next.js, NestJSをサポートしています。
Nxのメリット
私が感じるメリットは以下の通りです。
アプリ、コンポーネントなどの追加が簡単
普段、Angularを使っていて、angular cliでも簡単にコンポーネントなどを追加できるのですが、同じ感じでNxでもコマンドで簡単にいろんなものを追加することができます。
ただ、私はコマンドを使わずにVisual Studio Codeのプラグインを使ってますが、本当に便利です。
変更箇所のみビルド、テスト
Nxは非常に賢くて、キャッシュを見て、変更箇所のみテストします。
コード量が増えると、ビルド、テストが遅くなりますが、Nxを使えば差分のみ実行するので、その心配が少なくなります。(心配が無くなるわけではありません)
詳しく知りたい方は下記を見てください。(Google翻訳でも十分、理解できます)

シンプルな構造
Nxは下記の構造を推奨しています。
place 80% of your logic into the
libs/
folderand 20% into
https://nx.dev/structure/applications-and-librariesapps/
ロジックの80%をlibsディレクトリに、20%をappsに。
このようにすることで、ロジックを再利用しやすくなります。
最初は、戸惑いましたが、Nxをちゃんと導入してる現場で経験を積んでくと、段々と慣れてきて、理解できるようになってきました。
逆に、appsが20%は多いんじゃ無いかなと思いはじめているくらいです。
Nxのデメリット
次はデメリットです。
学習コストの高さ
メリットに書いた、「シンプルな構造」は慣れるまで、時間がかかります。
ただし、一度、理解してしまえば、それ以降は、効率良く開発できるし、そんなに時間もかからないので、学習コストがそれほど高くは無いです。
また、「学習コストが高い」というのも、少し誤解がありそうで、Nxを習得するまでの時間、労力が学習コストになると思いますが、覚えることはそんなに多くないですし、libs配下にロジックを小さく分割するのは、Nx以外にも普通にあり得そうなので、しつこいようですが、学習コストはそれほど高くないと思っています。
ディレクトリ、ファイルが多い
Nxだけでなく、Angularも関連してるのかもしれませんが、とにかくディレクトリ、ファイルが多いです。
例えば、編集画面を1ページ作成するのに、下記のようになります。
- ページコンポーネント(ページ全体のレイアウト)
- 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配下のディレクトリ構成がしっかり設計されてれば、徐々に慣れていくのであまり問題にはなりません。
最後に
Nxは、非常に素晴らしいライブラリだと思います。
もっと、色んなプロジェクトでNxが使われて、Nxの経験値を積んだエンジニアが増えれば、嬉しいです。
Nxの経験を積んだエンジニアがNxを使ってるプロジェクトに参画した場合、最初のキャッチアップの時間は大幅に短縮され、すぐに即戦力として働くことができます。
私は、Angularでコード書いてるんですが、AngularとNxがフロントエンド開発のデファクトスタンダードになればなーと思ってます。(でもAngularより、Reactの方が、今は強そう)
コメント