概要
今回のブログポストでは、JavaScript で開発するプロジェクトでモノレポ(Monorepo)を使用するために必要なツールを紹介します。
ブログシリーズ
このブログはシリーズで制作されました。次のリンクを通じて他のブログポストも確認してください。
- [プロジェクト管理] リポジトリ戦略
- [JavaScript] モノレポ(Monorepo)のためのツール
- [Monorepo] NodeJS のモジュールの読み込み
- [Monorepo] Symlink
- [Monorepo] Yarn Workspaces
- [Monorepo] Yarn Workspaces の依存性の Hoisting
- [Monorepo] Yarn Workspaces のコマンド
- [Monorepo] pnpm を使ってモノレポを作る方法
モノレポを始める方法
モノレポを始める方法は大きく 2 つあります。
- パッケージマネージャーを利用する方法
- モノレポ用ツールを利用する方法
今回のブログポストでは、JavaScript プロジェクトでモノレポをサポートするパッケージマネージャーとモノレポツールについて紹介します。
パッケージマネージャー
JavaScript プロジェクトでモノレポを構成するためには、モノレポをサポートするパッケージマネージャーを使用することができます。モノレポをサポートするパッケージマネージャーは、pnpm、yarn、npmがあります。
モノレポをサポートするパッケージマネージャーであるpnpm、yarn、npmは次のような特性を持っています。
| 機能 | pnpm | yarn | npm |
|---|---|---|---|
| workspace 提供 | ✅ | ✅ | ✅ |
| 孤立した node_modules | ✅(default) | ✅ | ✅ |
| ホイスティングされた node_modules | ✅ | ✅ | ✅(default) |
| ピア自動インストール | ✅ | ❌ | ✅ |
| Plug’n’Play | ✅ | ✅(default) | ✅ |
| Zero-Installs | ❌ | ✅ | ❌ |
| 依存パッチ | ✅ | ✅ | ❌ |
| NodeJS バージョン管理 | ✅ | ❌ | ❌ |
| Lockfile | ✅(pnpm-lock.yaml) | ✅(yarn.lock) | ✅(package-lock.json) |
| 上書きサポート | ✅ | ✅(resolution 使用) | ✅ |
| Content-addressable リポジトリ | ✅ | ❌ | ❌ |
| 動的パッケージ実行 | ✅(pnpm dlx) | ✅(yarn dlx) | ✅(npx) |
| Listing licenses | ✅(pnpm licenses list) | ✅(Via a plugin) | ❌ |
モノレポ用ツール
パッケージマネージャーが提供するWorkspace機能だけでも十分にモノレポを構成することができますが、モノレポ用ツールを使用するとより簡単にモノレポを構成することができます。また、モノレポ用ツールが提供するCache機能を使用するとBuildやCIなどをより高速に実行することができます。
JavaScript プロジェクトのためのモノレポ用ツールにはLerna、Nx、Turborepoがあります。
Lerna
Lernaはオープンソースで開発、管理されています。オープンソースコミュニティだけでは管理が難しく、Nxに引き継がれました。
- Lerna: https://lerna.js.org/
現在もLernaを使用することはできますが、Nxに引き継がれたため、Nxが自分たちのツールほどLernaをサポートするかは確実ではないため、Lernaを使用するのであればNxを使用するか、もう少し動向を見守ることをお勧めします。
Nx
NxはNarwhal Technologies Inc.という会社で開発、提供しています。この会社はAngularフレームワークに関連するツールやサービスを提供する会社です。Angularフレームワークに関連するツールを開発する会社が作ったNxであるため、NxはAngularアプリケーションをサポートするモノレポ管理ツールとして始まりました。現在はReactなど他のフレームワークもサポートしています。
- Nx: https://nx.dev/
もしAngularフレームワークでプロジェクトを開発する予定であれば、Nxは優れた選択肢になると思います。もちろん、他のフレームワークでもNxは良い選択肢になるかもしれませんが、Angularフレームワークを中心に開発されたNxとAngular中心のツールを開発する会社が作ったNxはAngularフレームワークでより良いパフォーマンスを発揮すると思います。
Nxがサポートするフレームワークは次のリンクから確認できます。
- Recipes: https://nx.dev/recipes
Turborepo
TurborepoはJared Palmerが開発しましたが、2021 年にNextJSを作って運営しているVercelが買収し、開発、管理しています。
- Turbo: https://turbo.build/
もし、NextJS、Reactでプロジェクトを開発する予定であれば、Turborepoは優れた選択肢になると思います。もちろん、他のフレームワークでもTurborepoは良い選択肢になるかもしれませんが、NextJSを作って運営しているVercelが買収したTurborepoはNextJSでより良いパフォーマンスを発揮すると思います。
Turborepoがサポートするフレームワークは次のリンクから確認できます。
- Turborepo Examples: https://turbo.build/repo/docs/getting-started/from-example
完了
今回のブログポストでは、JavaScript で開発するプロジェクトでモノレポ(Monorepo)を使用するために必要なツールを紹介しました。パッケージマネージャーが提供する機能だけで十分にモノレポを構成することができますが、モノレポ用ツールを使用するとより簡単にモノレポを構成することができます。
モノレポでプロジェクトを構成する予定であれば、パッケージマネージャーの機能だけでなく、モノレポ用ツールの導入も検討してみてください。
私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。






