今モノレポやるならどのツール使うのがいいのん??

# はじめに
こんにちは、「拳で」 と申します!
[NRI OpenStandia Advent Calendar 2023](https://qiita.com/advent-calendar/2023/nri-openstandia)の16日目は 

**今モノレポやるならどのツール使うのがいいのん??** 

というタイトルでお送りいたします!

最近モノレポで開発することがあり、モノレポ管理を行うためのツールってちょいちょい聞くけど何が勢いあるんだろう?と気になったので調べてみました。

皆様のおすすめのツールや設定などがございましたらぜひコメントで教えていただけると大変喜びます🙇‍♂️

# TL;DR

- フロントエンド(JavaScript/TypeScript)開発プロジェクト向けモノレポ管理ツールは、 **[npm Workspaces](https://qiita.com/john-Q/items/ef7c433a5f441ff89ffb#npm-workspaces)・[Lerna](https://qiita.com/john-Q/items/ef7c433a5f441ff89ffb#lerna)・[Nx](https://qiita.com/john-Q/items/ef7c433a5f441ff89ffb#nx)・[Turborepo](https://qiita.com/john-Q/items/ef7c433a5f441ff89ffb#turborepo)** が勢いがある
- 各ツールの選定基準は個人的に以下を推奨
    - ライトに手早くモノレポ管理したい： **<font color="MediumVioletRed">npm Workspaces</font>**
    - 複数のnpmパッケージの開発・公開がしたい： **<font color="MediumVioletRed">npm Workspaces + Lerna</font>**
    - 大規模開発でワークスペースが多く可視化したい / より高速なキャッシュシステムを活用したい / 多言語対応したい： **<font color="MediumVioletRed">npm Workspaces + Nx</font>**
    - 既存のモノレポのビルド効率化をシンプルに成し遂げたい / Next.jsを使っている： **<font color="MediumVioletRed">npm Workspaces + Turborepo</font>**
- ツールの機能比較結果は以下
    - 比較詳細は[こちら](https://qiita.com/john-Q/items/ef7c433a5f441ff89ffb#%E8%A9%B3%E7%B4%B0%E6%AF%94%E8%BC%83)から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/147fb6f1-9ae3-265e-afe2-19ae80dde3f2.png)

# 前提条件

今回は以下条件でツールを比較しています。

- **フロントエンド(JavaScript/TypeScript)開発プロジェクト向け**ツール
- GitHub Star数が2023/12/16時点で1,000を超えるツール
- [monorepo.tools](https://monorepo.tools/)で紹介されているツール
- その他、「拳で」が **独断と偏見😇** で良く見聞きしたツール

# モノレポ vs マルチレポ

このテーマは色々な方が、わかりやすくまとめてくださっており

それぞれメリット・デメリットがあるので、**目指したい管理体系やプロジェクト特性に応じて適切な管理方法を選ぶ**ことが重要かと思います。

個人的にわかりやすかった記事をいくつか貼っておきます。

https://zenn.dev/burizae/articles/c811cae767965a

https://kaminashi-developer.hatenablog.jp/entry/2023/05/22/goodbye-monorepo

https://mtx2s.hatenablog.com/entry/2023/07/24/220603

# モノレポ管理ツールはなぜ必要なのか?

一般的には以下のようなモチベーションでモノレポ管理ツールを導入します。

- 依存パッケージ管理
  - 複数アプリの依存パッケージの管理・一括インストールしたい
- ビルド効率化
  - ビルドの順序に前後関係がある場合にうまく制御したい
  - 複数アプリの一括ビルド / 特定のアプリのみの差分ビルドしたい
- テスト・リンターツール設定管理
  - 複数のアプリに統一した設定を細かい設定不要で導入したい

# 比較対象モノレポツール一覧

今回比較するツールは以下です。

| ツール名                                                              | 開発元               | Stars                                                                                                |
| --------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------- |
| [Bazel](https://github.com/bazelbuild/bazel)                          | Google               | <a href="https://github.com/bazelbuild/bazel"><img alt="GitHub stars" src="https://img.shields.io/github/stars/bazelbuild/bazel?style=social"/></a>    |
| [Bolt](https://github.com/boltpkg/bolt)                               | James Kyle           | <a href="https://github.com/boltpkg/bolt"><img alt="GitHub stars" src="https://img.shields.io/github/stars/boltpkg/bolt?style=social"/></a>        |
| [Lerna](https://github.com/lerna/lerna)                               | Nrwl                 | <a href="https://github.com/lerna/lerna"><img alt="GitHub stars" src="https://img.shields.io/github/stars/lerna/lerna?style=social"/></a>         |
| [moon](https://github.com/moonrepo/moon)                              | moonrepo             | <a href="https://github.com/moonrepo/moon"><img alt="GitHub stars" src="https://img.shields.io/github/stars/moonrepo/moon?style=social"/></a>       |
| [npm Workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces) [^1] | npm                  | <a href="https://github.com/npm/cli"><img alt="GitHub stars" src="https://img.shields.io/github/stars/npm/cli?style=social"/></a>             |
| [Nx](https://github.com/nrwl/nx)                                      | Nrwl                 | <a href="https://github.com/nrwl/nx"><img alt="GitHub stars" src="https://img.shields.io/github/stars/nrwl/nx?style=social"/></a>             |
| [pnpm Workspaces](https://pnpm.io/ja/workspaces) [^1]                     | contributors of pnpm | <a href="https://github.com/pnpm/pnpm"><img alt="GitHub stars" src="https://img.shields.io/github/stars/pnpm/pnpm?style=social"/></a>           |
| [Rush](https://rushjs.io/)                                            | Microsoft            | <a href="https://github.com/microsoft/rushstack"><img alt="GitHub stars" src="https://img.shields.io/github/stars/microsoft/rushstack?style=social"/></a> |
| [Turborepo](https://turbo.build/repo)                                 | Vercel               | <a href="https://github.com/vercel/turbo"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vercel/turbo?style=social"/></a>        |
| [Yarn Workspaces](https://yarnpkg.com/features/workspaces) [^1]          | Yarn Contributors.   | <a href="https://github.com/yarnpkg/berry"><img alt="GitHub stars" src="https://img.shields.io/github/stars/yarnpkg/berry?style=social"/></a>       |

モノレポ管理ツール単体を管理するGitHubリポジトリとしてみると

- [Lerna](https://github.com/lerna/lerna)
- [Bazel](https://github.com/bazelbuild/bazel)
- [Nx](https://github.com/nrwl/nx)

あたりのStar数の多さが目を引きます。
※npm Workspaces, pnpm Workspaces, Rush, Turborepo, Yarn WorkspacesのGitHub Star数はモノレポ管理以外の機能も含まれるリポジトリのためご参考

# Trends比較

今回各ツールのトレンドを比較するため

- [GitHub Star History](https://qiita.com/john-Q/items/ef7c433a5f441ff89ffb#github-star-history)
- [npm trends](https://qiita.com/john-Q/items/ef7c433a5f441ff89ffb#npm-trends)
- [State of JavaScript](https://qiita.com/john-Q/items/ef7c433a5f441ff89ffb#state-of-javascript)

の調査を行いました。

## GitHub Star History

[GitHub Star History](https://star-history.com/)で各GitHubリポジトリのStar数推移をチェックしてみました。

![star-history-20231214.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/4d5f40ec-15bf-b507-b5ab-cebf643efaf7.png)

引用：[GitHub Star History | bazel vs bolt vs lerna vs moon vs nx vs turbo](https://star-history.com/#bazelbuild/bazel&boltpkg/bolt&lerna/lerna&moonrepo/moon&nrwl/nx&vercel/turbo&Date)

Star数のトレンドから

- [Lerna](https://github.com/lerna/lerna)：Star数が多く、ハイペースで伸びているが2022年以降若干伸びが緩やかに
- [Nx](https://github.com/nrwl/nx): 2020年以降ハイペースで伸びており、今後も伸びそう?
- [Bazel](https://github.com/bazelbuild/bazel)：一定のペースで伸び続けているが、Star数はNxに逆転されそう?
- [Turborepo](https://github.com/vercel/turbo)：2022年以降急激に伸びている
  - 2021年12月9日に[VercelがTurborepoを買収](https://vercel.com/blog/vercel-acquires-turborepo)したため、2022年にvercel/turbo リポジトリが急激に伸びている
  - このリポジトリは、[Turbopack](https://turbo.build/pack)も管理されるリポジトリのため、純粋にTurborepo単体の人気度・勢いを示すものではない
    - モノリポで管理すると、GitHub Star数を用いた人気度の調査がしづらいですね..🤔

## npm trends

node modulesとして配布されている、モノレポ管理ツールのダウンロード数を[npm trends](https://npmtrends.com/)で比較しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/1bc4aaff-d65e-e857-02b8-48bc71e161cb.png)
引用：[npm trends@microsoft/rush vs bolt vs lerna vs nx vs turborepo](https://npmtrends.com/@microsoft/rush-vs-bolt-vs-lerna-vs-nx-vs-turborepo)

ダウンロード数のトレンドを見ると、[Nx](https://github.com/nrwl/nx)の勢いが目を引きます。
2022年あたりから急激に伸びており、注目度は依然高い状態かなと思います。

## State of JavaScript

今回比較対象のツールが一部登場してませんが、[State of JavaScript 2022](https://2022.stateofjs.com/en-US/libraries/monorepo-tools/)調査結果からmono repo興味度ランキングを掲載します。

※認知度で見ると、パッケージ管理ツール(npm, yarn, pnpm)のworkspaces機能が上位に来るため興味度で比較

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/29ca0db8-93d1-4ced-e2f9-d9b2e50254a3.png)
引用：[State of JavaScript 2022](https://2022.stateofjs.com/en-US/libraries/monorepo-tools/)

パッケージ管理ツールのWorkspaces機能は認知度が高いことから興味を引いている面がありそうですが

- [Turborepo](https://turbo.build/repo)
- [Nx](https://github.com/nrwl/nx)

は高い関心を持たれているので今後、更に伸びる可能性がある?かもしれません。

:::note info
余談ですが、[State of JavaScript2023 Survey](https://survey.devographics.com/ja-JP/survey/state-of-js/2023)が今ちょうど行われてますね!

毎年日本からのアンケート回答者が少ないみたいなので、もしよければ皆さんで盛り上げましょう!
※結構知らないツール名とか機能とか知れて勉強になりました。
:::

# 詳細比較

トレンドを比較した結果、人気度・注目度が高いツールに加え
Node.jsに付属しているnpmのWorkspace機能も比較対象とします。

- [npm Workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces)
- [Lerna](https://github.com/lerna/lerna)
- [Nx](https://github.com/nrwl/nx)
- [Turborepo](https://turbo.build/repo)

機能比較の観点は、[monorepo.tools](https://monorepo.tools/)を参考に一部独自に追加しています。

**Fast**
- Local computation caching
  - ビルド・テストなどの結果をローカルにキャッシュし効率化する
- Local task orchestration
  - タスクを正しい順序で並列実行する
- Distributed computation caching
  - 別環境感でキャッシュを共有する機能。CIなどで利用する
- Distributed task execution
  - 1台のマシンでコマンドを実行する際に、複数マシンに分散して実行させる
- Transparent remote execution
  - ローカルで開発中に複数のマシンで任意のコマンドを実行する
- Detecting affected projects/packages
  - コードの変更により影響を受けるプロジェクトのみビルド/テストする

**Understandable**
- Workspace analysis
  - 設定無しでワークスペースのプロジェクトグラフを分析する
- Dependency graph visualization
  - プロジェクトやタスク間の依存関係を可視化する

**Manageable**
- Source code sharing
  - プロジェクト間でソースコードの個別共有を容易に行う
- Consistent tooling
  - 複数のプログラミング言語サポート
- Code generation
  - コードの自動生成機能
- Project constraints and visibility
  - リポジトリ内の依存関係の制限機能

**その他**  ※「拳で」独自追加
- Version and Publish
  - 管理する各ワークスペースのバージョン管理やnpmレジストリへpublishする
- Automate Updating Dependencies
  - 依存関係を自動的にアップデートする
- Editor Integrations
  - エディタの拡張機能として統合可能

## npm Workspaces

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/dca7c769-707b-7842-439a-5e6162c791ab.png)

[npm Workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces)はNode.jsプロジェクトで複数のパッケージを管理するための機能です。
npm v7から追加されました。

この機能を利用することで、以下のようなモノレポ管理を行うことができます。

```
.
├── package.json //①ルートpackage.json
└── packages
    ├── foo
    │   └── package.json //②fooアプリのpackage.json
    └── bar
        └── package.json //③barアプリのpackage.json
```

- ①：eslint, prettierといった各アプリで共通で使いたいdevDependenciesはこちらで定義
- ②, ③：各アプリの実行に必要なDependenciesはこちらで定義。また、npm scriptも各アプリ毎に定義

することで楽に複数のプロジェクトを管理できます。

また

```
npm run <your_script> --workspaces --if-present
```

で②,③に定義されたnpm scriptを一気に実行することができます。
※npm run buildを各アプリで一気に実行したいときなどに便利です。

こちらの記事が大変参考になりましたので、ぜひご覧下さい。

https://qiita.com/frozenbonito/items/8230d4a3cb5ea1b32802

### 機能網羅状況

**Fast**
- Local computation caching：❌
  - 当該機能なし
- Local task orchestration：⚠
  - [npm-run-all2](https://www.npmjs.com/package/npm-run-all2)を用いて作り込み
      - 余談：npm-run-allは重大なバグが修正リリースされず放置されているので、フォークしたnpm-run-all2がおすすめです。
          - [そのテスト、最後まで実行されていますか？　jestとnpm-run-allの恐るべき罠](https://zenn.dev/babel/articles/jest-npm-run-all-for-babel#npm-run-all%E3%81%AE%E5%95%8F%E9%A1%8C)
- Distributed computation caching：❌
  - 当該機能なし
- Distributed task execution：❌
  - 当該機能なし
- Transparent remote execution：❌
  - 該当機能なし
- Detecting affected projects/packages：❌
  - 当該機能なし

**Understandable**
- Workspace analysis：✅
  - 初期設定を行えばモノレポ管理可能
- Dependency graph visualization：❌
  - 当該機能なし

**Manageable**
- Source code sharing：✅
  - プロジェクト間でソースコードの個別共有可能
- Consistent tooling：❌
  - 当該機能なし
- Code generation：❌
  - 当該機能なし
- Project constraints and visibility：❌
  - 当該機能なし

**その他** 
- Version and Publish：⚠
  - npmの標準機能 [npm-publish](https://docs.npmjs.com/cli/v10/commands/npm-publish)でパッケージの公開可能
- Automate Updating Dependencies：⚠
  - [npm-check-updates](https://www.npmjs.com/package/npm-check-updates)によりアップデート可能
- Editor Integrations：❌
  - 当該機能なし

### 所感

**<font color="MediumVioletRed">npmの標準機能でシンプルに学習コスト低くモノレポ管理できる</font>** のがメリットと感じました。
ただ、当然ながら他のツールと比較すると機能は貧弱です(当たり前)😇

## Lerna

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/e0200462-d0fc-30f9-518d-0491cd7ae754.png)

[Lerna](https://github.com/lerna/lerna)は、JavaScript/TypeScript用のモノレポ管理ツールです。
2015年から開発されておりモノレポ管理ツールとしては古参にあります。

- タスク / ビルドキャッシュの管理
- パッケージのバージョニングやnpmレジストリ公開

などの機能を提供します。

LernaのメンテナンスはNxの開発元である[Nrwl](https://github.com/nrwl)が引き継ぎ、Nxと統合を果たした[Lerna v6](https://blog.nrwl.io/lerna-reborn-whats-new-in-v6-10aec6e9091c)がリリースされています。

https://blog.nrwl.io/lerna-is-dead-long-live-lerna-61259f97dbd9

[Lerna v4.0.0](https://github.com/lerna/lerna/releases/tag/v4.0.0)のリリース以降、Nrwlにメンテナンスが引き継がれるまで **<font color="MediumVioletRed">1年ほど更新が止まっていた</font>** ためそこで見限った層もいるかも??知れません。

ただ、現在は開発再開しており2023年12月15日に[v8.0.1](https://github.com/lerna/lerna/releases/tag/v8.0.1)がリリースされるなど、活発にメンテナンスされているようです。

:::note info
> Lerna is not responsible for installing and linking your dependencies in your repo, your package manager is much better suited to that task.
>
> Instead, we strongly recommend configuring your package manager of choice to use its workspaces feature:
>
> npm (https://docs.npmjs.com/cli/using-npm/workspaces)
yarn (https://yarnpkg.com/features/workspaces)
pnpm (https://pnpm.io/workspaces)

以前はLerna自身パッケージ管理を持っていましたが、Node.jsのパッケージマネージャーがworkspaces機能をサポートしたため、現在は依存関係のインストールやリンクは**パッケージマネージャーのワークスペース機能の利用を強く推奨**しているようです。
詳細は[こちら](https://lerna.js.org/docs/legacy-package-management#background)をご覧ください。
:::

### 機能網羅状況

**Fast**
- Local computation caching：✅
  - [Cache Task Results](https://lerna.js.org/docs/features/cache-tasks)
- Local task orchestration：✅
  - [Run Tasks](https://lerna.js.org/docs/features/run-tasks)
- Distributed computation caching：✅
  - [Share Your Cache](https://lerna.js.org/docs/features/share-your-cache)
- Distributed task execution：✅
  - [Distribute Task Execution](https://lerna.js.org/docs/features/distribute-tasks)
- Transparent remote execution：❌
  - 該当機能なし
- Detecting affected projects/packages：✅
  - [Run Tasks Affected by a PR](https://lerna.js.org/docs/features/run-tasks#run-tasks-affected-by-a-pr)

**Understandable**
- Workspace analysis：✅
  - 該当ページは無いが、特段設定不要で利用可能。[参考](https://lerna.js.org/docs/getting-started)
- Dependency graph visualization：✅
  - [Explore the Project Graph](https://lerna.js.org/docs/features/project-graph)

**Manageable**
- Source code sharing：✅
  - プロジェクト間でソースコードの個別共有可能
- Consistent tooling：❌
  - Lernaが内包するNxのプラグイン機能で対応言語の追加はできるが、Lernaの機能はJavaScript/TypeScriptのみに対応
- Code generation：⚠
  - Lernaが内包する[NxのCode generation機能](https://nx.dev/core-features/plugin-features/use-code-generators)は利用可能
- Project constraints and visibility：⚠
  - Lernaが内包するNxの[Enforce Module Boundaries機能](https://nx.dev/core-features/enforce-module-boundaries)は利用可能

**その他** 
- Version and Publish：✅
  - [Version and Publish](https://lerna.js.org/docs/features/version-and-publish)
- Automate Updating Dependencies：⚠
  -  Lernaが内包するNxの[Automate Updating Dependencies機能](https://nx.dev/core-features/automate-updating-dependencies)は利用可能
- Editor Integrations：⚠
  - [Editor Integrations](https://lerna.js.org/docs/features/editor-integrations)
  - [Nx Console VSCode Plugin](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)による統合が可能

### 所感

他のツールと比較して、**Version and Publish機能に強み**を持つように思えます。
 **<font color="MediumVioletRed">複数のnpmパッケージの開発・公開</font>** などを行う場合に向いている印象を受けました。

## Nx

<img alt="Nx logo" width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/c884efb0-819c-1506-a66d-f97fcf827783.png"/>

[Nx](https://github.com/nrwl/nx)は、キャッシュなどを活用したビルドの高速化やコードジェネレーター機能を備えたモノレポ用ビルドツールです。プラグインによって拡張できることが特徴です。
[Nrwl](https://github.com/nrwl)によって、2018年から開発されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/88d97e04-a4f6-0907-ed21-172d1a393af4.png)
引用：[what is NX?](https://nx.dev/getting-started/why-nx)

- キャッシュやワークスペース差分を検知する、高速なビルド
- プロジェクトグラフ表示機能
- 新規ワークスペース追加の時の、コードジェネレート機能
- プラグインシステム

などの機能を提供します。
現在はLernaの一部としても活用されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/7da6885f-786f-ffa0-48e9-1fa9be153096.png)

プロジェクトグラフ機能は以下コマンドで利用可能です。

```
npx nx graph
>  NX   Project graph started at http://127.0.0.1:4211/projects
```

Webアプリとして提供され、各ワークスペース間の依存関係などを可視化することができ
モノレポが **「大きな泥の塊(“big ball of mud”)」** になることを防ぐ助けになります。
※本機能はNxを内包するLernaでも利用可能です。

### 機能網羅状況

**Fast**
- Local computation caching：✅
  - [Cache Task Results](https://nx.dev/core-features/cache-task-results)
- Local task orchestration：✅
  - [Run Tasks](https://nx.dev/core-features/run-tasks)
- Distributed computation caching：✅
  - [Use Remote Caching](https://nx.dev/ci/features/remote-cache)
- Distributed task execution：✅
  - [Distribute Task Execution](https://nx.dev/ci/features/distribute-task-execution)
- Transparent remote execution：❌
  - 該当機能なし
- Detecting affected projects/packages：✅
  - [Run Only Tasks Affected by a PR](https://nx.dev/ci/features/affected)

**Understandable**
- Workspace analysis：✅
  - 該当ページは無いが、特段設定不要で利用可能。[参考](https://nx.dev/getting-started/tutorials/integrated-repo-tutorial)
- Dependency graph visualization：✅
  - [Explore the Graph](https://nx.dev/core-features/explore-graph)

**Manageable**
- Source code sharing：✅
  - プロジェクト間でソースコードの個別共有可能
- Consistent tooling：✅
  - [plugin](https://nx.dev/plugin-registry)の追加により対応可能
- Code generation：✅
  - [Code generation](https://nx.dev/core-features/plugin-features/use-code-generators)
- Project constraints and visibility：✅
  - [Enforce Module Boundaries](https://nx.dev/core-features/enforce-module-boundaries)

**その他** 
- Version and Publish：❌
  - 該当機能なし
- Automate Updating Dependencies：✅
  - [Automate Updating Dependencies](https://nx.dev/core-features/automate-updating-dependencies)
- Editor Integrations：✅
  - [Integrate with Editors](https://nx.dev/core-features/integrate-with-editors)

### 所感

他のツールと比較して、プラグインシステムによるコードジェネレーション機能の追加に特徴があります。
コードジェネレーション機能によるワークスペースの追加が容易なため、**<font color="MediumVioletRed">アプリケーション開発に(e.g. フロントエンド/バックエンド用のワークスペースをコードジェネレーション機能で作成)有効なツール</font>** という印象を持ちました。

## Turborepo

<img alt="Nx logo" width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/85a90f21-23a4-99aa-8a9a-3651c86df836.png"/>

[Turborepo](https://github.com/vercel/turbo)は、[Vercel.inc](https://vercel.com/)が開発するJavaScript/TypeScriptのモノレポ用ビルドツールです。

- キャッシュを活用したビルドの高速化
- 設定ファイル1つだけというシンプル構成
- Vercel製品との相性の良さ

が特徴です。

バンドルツールの[Turbopack](https://turbo.build/pack)と[同じリポジトリ](https://github.com/vercel/turbo)で開発されています。

後発だけあって、以下のようにカラフルなCLIを持ちモダンな印象を受けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/f2bad8f0-0cd0-91c3-2e86-1d72fdb773b9.png)

一方、以下コマンドでTask Graphを出力できますが

```
turbo run build --graph=my-graph.png
```

かなり無骨...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671490/9f19f821-ba38-32a4-df62-811989f8a8bc.png)

Taskグラフの画像出力には[Graphviz](https://graphviz.org/)をインストールして、PATHを通しておく必要があります。
また、Nxのようなプロジェクトグラフ機能は現状ないです。

### 機能網羅状況

**Fast**
- Local computation caching：✅
  - [Caching Tasks](https://turbo.build/repo/docs/core-concepts/caching)
- Local task orchestration：✅
  - [Running Tasks in a Monorepo](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
- Distributed computation caching：✅
  - [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
- Distributed task execution：✅
  - [Distribute Task Execution](https://nx.dev/ci/features/distribute-task-execution)
- Transparent remote execution：❌
  - 該当機能なし
- Detecting affected projects/packages：✅
  - [Skipping Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/skipping-tasks)

**Understandable**
- Workspace analysis：✅
  - 該当ページは無いが、特段設定不要で利用可能。
- Dependency graph visualization：✅
  - [turbo run --graph](https://turbo.build/repo/docs/reference/command-line-reference/run#--graph)

**Manageable**
- Source code sharing：✅
  - プロジェクト間でソースコードの個別共有可能
- Consistent tooling：❌
  - 該当機能なし
- Code generation：✅
  - [Code generation](https://turbo.build/repo/docs/core-concepts/monorepos/code-generation)
- Project constraints and visibility：⚠
  - Linterの設定である程度対応可能

**その他** 
- Version and Publish：❌
  - 該当機能なし
- Automate Updating Dependencies：❌
  - 該当機能なし
- Editor Integrations：❌
  - 該当機能なし

### 所感

他のツールと比較して、**導入が容易ながらそれなりの機能を持つ**ように思えます。
 **<font color="MediumVioletRed">既存のプロジェクトに学習コストをあまりかけずに導入したい</font>** な場合に向いている印象を受けました。
 ※あとは、やはり新しいだけあって使ってて気持ちよさはあります(語彙力)

## ツール間の関係性

今回ピックアップした4つのツールは以下のような関係性は以下のとおりです。

- npm Workspacesは他のツールと連携して利用される。**<font color="MediumVioletRed">モノレポ管理のベース</font>**
- **<font color="MediumVioletRed">LernaとNxは補完関係</font>** にあり、LernaはNxを内包している
- **<font color="MediumVioletRed">Nx vs Turborepo</font>** の構図

https://lerna.js.org/docs/lerna-and-nx

https://zenn.dev/okmttdhr/articles/a919bb29d9d5c9

Nxのプラグイン・バージョンアップ関連は大変なようで、Nx → Turborepoへ移行した事例もあるようです。

https://tech.delm0.jp/entry/2023/05/29/161202

こちらのスレッドではNx vs Turborepoの選定基準などについて議論がされています。

https://www.reddit.com/r/reactjs/comments/yhzf3f/nx_vs_turborepo_concerned_about_betting_on_either/

Nx, Turborepoそれぞれを採用したチームの意見もとても興味深いです。

https://engineering.mercari.com/blog/entry/20220518-aaa18f6b00/

## 各ツールのユースケース

「拳で」は次のような使い分けがいいのでは?と思いました。

- ライトに手早くモノレポ管理したい： **npm Workspaces**
- 複数のnpmパッケージの開発・公開がしたい： **npm Workspaces + Lerna**
- ワークスペースが多く可視化したい / より高速なキャッシュシステムを活用したい / 多言語対応したい： **npm Workspaces + Nx**
- 既存のモノレポのビルド効率化をシンプルに成し遂げたい / Next.jsを使っている： **npm Workspaces + Turborepo**

※npm WorkspacesはYarn, pnpmでもOK

# まとめ

フロントエンド(JavaScript/TypeScript)開発プロジェクト向けのモノレポツールについて様々な観点で比較させていただきました。
モノレポ開発を行う際は、管理したい要件に応じて適切にツールを選んで快適に開発しましょう:star2:

[^1]: npm Workspaces, pnpm Workspaces, Yarn Workspacesはツールではなく、パッケージ管理ツールが持つ1機能ですが本記事では便宜上他のモノレポツールと同列で比較しています。