開発者体験が大幅改善！フロントエンド開発にNxを導入した話

これはHubble Advent Calendar 2023の2日目¹の記事です。

はじめに

株式会社Hubbleのフロントエンドを担当している @KOHETs です。

普段はAngularのことばかり考えているんですが、その素晴らしさはnoteでお話させていただいたので、今回は3年ほど前から利用しているNxというビルドシステムを導入して得られたメリットを紹介したいと思います。

Nxってなに？

NxはNrwl社が開発しているオープンソースのビルドシステムです。モノレポ管理ツールとして知られていますが、実際には「開発者の生産性向上、CIパフォーマンスの最適化、コード品質の維持を支援するツールや技術を提供」²と書かれている通り、フロントエンド開発のさまざまな場面で活躍してくれます。

生産性の向上

Nxを導入する前は、UIコンポーネントをnpmで公開して各アプリケーションで利用していました。そのため、コンポーネントを変更するたびにnpmに公開し、各アプリケーションのpackage.jsonを更新する必要があり、手間がかかっていました。

Nxを導入したことにより、コンポーネントを変更するたびに公開・package.jsonの更新がなくなり、手間が大幅に削減されました。また、共通化する範囲も自由に調整できるようになり、管理しやすくなりました。

CIパフォーマンスの最適化

Nxでは、ライブラリやアプリケーションの依存関係を自動で管理し、影響のあるものを判断してくれるAffectedという機能を提供しています。これにより、CIでのテスト対象を最適化することができ、実行時間を短縮することができます。

この機能を十分に利用するために、Hubbleではライブラリへの切り出しを積極的に行っていて、現在100個以上のライブラリが作られています。全てのライブラリに影響する変更はそれほど多くないため、Affected機能の活用によって、CIの実行時間を大幅に短縮することができました。

コード品質の維持

Nxでは、定期実行するコマンドやテンプレートの作成などが出来るGeneratorという機能を提供しています。これにより、独自にカスタマイズされた設計規則や慣例を反映したテンプレートを作成することができます。

Hubbleでは、独特なディレクトリ設計を採用しています。Generator機能を活用して、その設計に合わせたライブラリやコンポーネントの生成を行っています。また、MakefileやスクリプトなどもNxのコマンドとして登録できるので、テンプレートの生成にも、定期実行タスクをまとめて管理するのにも便利です。

まとめ

Nxは、フロントエンド開発のさまざまな場面で役立つビルドシステムです。今回紹介したメリット以外にも、さまざまな機能が用意されていて、日々の体験をより良くしてくれます。

Nxの導入を検討している方は、ぜひ一度試してみてください。

明日は @hiroykam さんです！

1. 平日のみの投稿なので4日ですが、2日目の記事としています。 ↩

2. Intro to Nxに書かれているものを抜粋して日本語にしています。 ↩