それっぽいタイトルを付けましたが特に意味はないです。
<a href="https://cybozu.github.io/frontend-expert/posts/turborepo">workspace を使ったコマンドを最適化して実行する Turborepo について</a>のお話で Turborepo を軽く触ってみた際に<code>npx create-turbo@latest</code>で作られる構成がとてもわかりやすく、プロダクトの初期段階からモノレポを採用するのは選択肢の 1 つとしていいのでは、と思い続編を書きました。
前回と同じくサンプルのリポジトリはこちらになります。 
<a href="https://github.com/nus3/p-turborepo/tree/main/yarn">https://github.com/nus3/p-turborepo/tree/main/yarn</a>
<h2>概要</h2>
<ul>
<li>モノレポを採用することで、同一リポジトリ内で自作した汎用的なライブラリやコンポーネントを複数のアプリケーションで使いまわせる</li>
<li>モノレポの規模が大きくなってきた場合には、モノレポ内のパッケージを npm に公開することでアプリケーションとパッケージを非同期に開発できる</li>
<li>Yarn や npm の workspace はイイゾ！</li>
</ul>
<h2>モノレポとは</h2>
モノレポとは本記事では npm や Yarn の workspaces 機能を使い、1 つのリポジトリ内で複数の npm パッケージを管理している構成のこととします。
<h3>npm や Yarn の workspaces</h3>
npm や Yarn の workspaces は 1 つのリポジトリ内で複数の npm パッケージを管理するための機能です。
<ul>
<li><a href="https://classic.yarnpkg.com/lang/en/docs/workspaces/">Yarn(v1)</a></li>
<li><a href="https://yarnpkg.com/features/workspaces">Yarn(v2 以降)</a></li>
<li><a href="https://docs.npmjs.com/cli/v8/using-npm/workspaces">npm</a></li>
</ul>
workspaces を使うにはリポジトリのルート直下にある<code>package.json</code>に<code>workspaces</code>を追加します。
例えば<code>apps</code>配下にアプリケーションの npm パッケージを、<code>packages</code>配下に汎用的なコンポーネント、ライブラリなどの npm パッケージを入れる場合、次のようになります。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "workspaces": ["apps/*", "packages/*"]
}
</code></pre></div>
<code>apps</code> 配下にある<code>nus3-a</code>というアプリケーションから <code>packages</code> 配下にある<code>nus3-ui</code>という名前の npm パッケージを使う場合、それぞれ次のような<code>package.json</code>になります。
<code>apps/nus3-a</code>
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-a",
 "version": "0.0.0",
 "dependencies": {
 "nus3-ui": "*"
 // Yarnのv2以降であれば`workspace:`構文が使えるようになる
 // REF: (nus3) https://yarnpkg.com/features/workspaces#workspace-ranges-workspace
 // "nus3-ui": "workspace:*"
 }
}
</code></pre></div>
<code>packages/nus3-ui</code>
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-ui",
 "version": "0.0.0"
}
</code></pre></div>
workspaces 内にある npm パッケージの名前が npm に公開されているパッケージ名と同じ場合は、 workspace 内の npm パッケージが優先してインストールされます。後々 workspaces 内の npm パッケージを公開する可能性がある場合、パッケージ名は npm で公開されているパッケージ名と被らない名前にした方が良いかもしれません。
workspace 内の npm パッケージを依存関係に追加すると node_modules にシンボリックリンクが作成されます。次の画像のように node_modules 配下に<code>nus3-ui</code>と<code>nus3-a</code>のシンボリックリンクが追加されていることが確認できます。
<img src="/frontend-expert/image/considerations-for-monorepo/symlink.png" alt="node_modulesに作成されたシンボリックリンク" width="340" height="101" >
シンボリックリンクにより依存する npm パッケージのコードを直接参照するので、npm に公開しバージョン管理するまでは、version は<code>0.0.0</code>、かつ、使う側は<code>"nus3-ui": "*"</code>のようにワイルドカードを指定するとバージョンのことを意識せずに管理できます。
<h3>create-turbo で作られるモノレポ構成</h3>
create-turbo(<code>npx create-turbo@latest</code>) では作られるモノレポ構成に次のようなものが含まれます。
<ul>
<li>npm に公開せずに config をモノレポ内の別パッケージに分けて、複数のパッケージから使用する</li>
<li>React を使った汎用的なコンポーネント(tsx)を別パッケージに分けて アプリケーション(Next.js)で使用する</li>
</ul>
それぞれ見ていきましょう。
<h4>npm に公開せずに config をモノレポ内の別パッケージに分けて、複数のパッケージから使用する</h4>
ESLint や Stylelint の config は npm に公開することで、異なるプロジェクトで共通の設定を使えます。サイボウズでは<a href="https://github.com/cybozu/eslint-config">@cybozu/eslint-config</a>や<a href="https://github.com/cybozu/stylelint-config">@cybozu/stylelint-config</a>として npm に公開しています。
モノレポ内であれば ESLint や Stylelint の設定を npm に公開・管理せずに共有することもできます。
<code>packages/nus3-config</code> 
で共通の ESLint や TSConfig を定義して、<code>package.json</code> の<code>files</code> に指定します。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-config",
 "version": "0.0.0",
 "files": [
 "eslint-preset.js",
 "tsconfig.base.json",
 "tsconfig.nextjs.json",
 "tsconfig.react-library.json"
 ]
}
</code></pre></div>
<code>apps/nus3-a</code>
で<code>nus3-config</code>を追加し、<code>nus3-config</code>から TSConfig や ESLint のルールを適用します。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-a",
 "version": "0.0.0",
 "devDependencies": {
 "eslint": "8.6.0",
 "nus3-config": "*"
 }
}
</code></pre></div>
<code>apps/nus3-a/tsconfig.json</code>
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "extends": "nus3-config/tsconfig.nextjs.json"
}
</code></pre></div>
<code>apps/nus3-a/.eslintrc</code>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">module.exports = require("nus3-config/eslint-preset");
</code></pre></div>
<h4>React を使った汎用的なコンポーネント(tsx)を別パッケージに分けて アプリケーション(Next.js)で使用する</h4>
create-turbo では汎用的な React コンポーネントを tsx ファイルのまま <code>packages</code> 配下の npm パッケージで管理し、Next.js の<a href="https://github.com/martpie/next-transpile-modules">plugin</a>を使って アプリケーション 側でトランスパイルしています。
<code>packages/nus3-ui</code> 
で React(tsx)のコンポーネントを実装します。実装した tsx ファイルのパスをそのまま<code>main</code>と<code>types</code>に追加します。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-ui",
 "version": "0.0.0",
 "main": "./index.tsx",
 "types": "./index.tsx",
 "devDependencies": {
 "@types/react": "17.0.37",
 "@types/react-dom": "17.0.11",
 "typescript": "4.5.4"
 }
}
</code></pre></div>
<code>packages/nus3-ui/index.tsx</code>
<div class="remark-highlight"><pre class="language-tsx"><code class="language-tsx">import { VFC } from "react";

export const Button: VFC = () => {
 return &#x3C;button>ボタン&#x3C;/button>;
};
</code></pre></div>
<code>apps/nus3-a</code> 
<code>nus3-ui</code>の tsx ファイルを<code>nus3-a</code>で<code>next-transpile-modules</code>を使ってトランスパイルします。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-a",
 "version": "0.0.0",
 "devDependencies": {
 "next-transpile-modules": "9.0.0"
 }
}
</code></pre></div>
<code>apps/nus3-a/next.config.js</code>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const withTM = require("next-transpile-modules")(["nus3-ui"]);
module.exports = withTM({});
</code></pre></div>
<h2>フロントエンドのモノレポ戦略</h2>
筆者のこれまでの経験では、創業して間もない会社やプロダクトの初期フェーズで、複数のアプリケーションの開発が並列して始まることが多くありました。そういった状況では、モノレポを採用しておくと複数のアプリケーションで共通したコンポーネントやライブラリを少ないコストで使用できます。
また、モノレポ内で共通して使っているパッケージに変更を加える際に、その影響範囲が把握できないくらいモノレポの規模が大きくなった場合には、パッケージを npm に公開してバージョン管理することで、バージョンの変更タイミングを各々のアプリケーションに任せることができ、アプリケーションとパッケージの開発を非同期に行うことができます。
このように、初期段階では汎用的な npm パッケージをアセットとして複数のアプリケーションに提供することで開発スピードを上げられ、また、規模が大きくなってきた場合はパッケージを npm に公開するといった方針をとることもできます。
もちろん、1 つのリポジトリですべてのパッケージを管理することやコードベースが大きく複雑になることなどデメリットもあり、モノレポを採用することが適切ではない場合もあります。メリット・デメリットを踏まえつつ、フロントエンドの技術選定の中にモノレポの採用を選択肢の 1 つとして入れてもいいかもしれません。

今年からフロントエンドエキスパートチームでは活動内容の一つである探求の一環として、メンバーが気になった技術に対して、気軽に触ってみる会をしています。次の画像は筆者が Slack で、気軽に触ってみる会の開催を宣言してる時のものです。
<img src="/frontend-expert/image/turborepo/slack.png" alt="slackで気軽に触ってみる会を宣言してる" width="718" height="152.15061295971978" >
今回は<a href="https://vercel.com/blog/vercel-acquires-turborepo">去年の 12 月に Vercel に買収されたニュース</a>があった Turborepo を気軽に触ってみました。
個人的には 1 人で調べるときよりも複数人でわいわい調べた方が、その技術や関連する周辺知識の話を色んな人の観点で深掘ってできて、とても有意義な時間でした。
<h2>概要</h2>
Turborepo はモノレポのためのビルドシステムで次のような特徴があります。
<ul>
<li>Yarn, npm, pnpm の workspaces に対応してるリポジトリに対して簡単に導入できる</li>
<li>workspace 内のコマンドの依存関係をシンプルに設定してくれる</li>
<li>Turborepo で実行するコマンドがない package はスルーしてくれる(npm workspace の<code>--if-present</code>に相当)</li>
<li>ローカルキャッシュ、リモートキャッシュを生成・利用できる</li>
</ul>
<h3>サンプルで作ったモノレポ構成</h3>
今回は Yarn v1 の workspace を使ってます。 
<a href="https://github.com/nus3/p-turborepo/tree/main/yarn">https://github.com/nus3/p-turborepo/tree/main/yarn</a>
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">├── apps
│ └── nus3-a: Next.js
└── packages:
 ├── nus3-button2: Reactのコンポーネント + ViteのLibrary Modeでビルド
 ├── nus3-config: tsconfig + eslintのconfig
 └── nus3-ui: Reactのコンポーネント(ビルドせずに使う)</code></pre></div>
サンプルで作ったモノレポ内の package たちは次のような依存関係になっています。 
(色々試してたので適当な命名になってます。すんません)
<ul>
<li><code>nus3-a</code>は<code>nus3-ui</code>と<code>nus3-button2</code>に依存している</li>
<li><code>nus3-ui</code>は<code>nus3-button2</code>に依存している</li>
</ul>
<img src="/frontend-expert/image/turborepo/dependencies.png" alt="サンプルリポジトリの依存関係" width="577" height="314" >
<h3>使い方</h3>
<ol>
<li>使っているパッケージマネージャーで(Yarn, npm, pnpm)で workspace の設定</li>
<li><code>turbo</code>のインストール</li>
<li>package.json に<code>pipeline</code>の設定</li>
</ol>
<h4>1. 使っているパッケージマネージャーで(Yarn, npm, pnpm)で workspace の設定</h4>
workspace の設定については割愛します。各パッケージマネージャーのドキュメントをご覧ください。
<ul>
<li><a href="https://classic.yarnpkg.com/lang/en/docs/workspaces/">Yarn</a></li>
<li><a href="https://docs.npmjs.com/cli/v8/using-npm/workspaces">npm</a></li>
<li><a href="https://pnpm.io/workspaces">pnpm</a></li>
</ul>
<h4>2. <code>turbo</code>のインストール</h4>
<code>yarn add turbo -W --dev</code>で Turborepo を追加します。
<h4>3. package.json に<code>pipeline</code>の設定</h4>
<code>package.json</code>に<code>turbo.pipeline</code>を追加し、そこで<code>turbo run {command}</code>で実行する command の依存関係やキャッシュの設定をします。この<code>pipeline</code>で定義した command しか<code>turbo run {command}</code>では実行できません。
実際に定義したものが次の json になります。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "turbo": {
 "pipeline": {
 "build": {
 "dependsOn": ["^build"],
 "outputs": ["dist/**", ".next/**"]
 },
 "test": {
 "dependsOn": ["build"]
 },
 "lint": {},
 "deploy": {
 "dependsOn": ["build", "test", "lint"]
 },
 }
 }
}
</code></pre></div>
<code>dependsOn</code>で依存関係を、<code>outputs</code>でキャッシュするものを指定します。
定義したコマンドを一つずつ見ていきましょう。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"dependsOn": ["^build"],
</code></pre></div>
dependOn に<code>^</code>を追加したコマンド(<code>^build</code>)を指定することで workspace 内の各 package の指定したコマンド(<code>build</code>)を package 間の依存関係を考慮した順番で実行してくれます。
実際に実行してみると、サンプルで作った各 package の依存関係を考慮した順番(<code>@nus3/example-button2</code> → <code>nus3-ui</code> → <code>nus3-a</code>)でビルドされていることがわかります。 
(※今回サンプルで作った構成では<code>nus3-ui</code>はビルドの必要がないですが、依存関係を考慮した順番を表すのにあえて build コマンドを追加しています)
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">$ turbo run build
• Packages in scope: @nus3/example-button2, nus3-a, nus3-config, nus3-ui
• Running build in 4 packages
@nus3/example-button2:build: cache miss, executing a161062b16a0be35
@nus3/example-button2:build: $ vite build &#x26;amp;&#x26;amp; tsc -p ./tsconfig.build.json
...
@nus3/example-button2:build: dist/nus3-example-button2.es.js 3.30 KiB / gzip: 1.39 KiB
nus3-ui:build: cache miss, executing b32d4fb848c8658f
nus3-ui:build: $ echo &#x26;#39;build nus3-ui&#x26;#39;
...
nus3-a:build: cache miss, executing a80d8842624981a8
nus3-a:build: $ next build
...

 Tasks: 3 successful, 3 total
Cached: 0 cached, 3 total
 Time: 5.702s</code></pre></div>
次の<code>outputs</code>はコマンドを実行した際に、<code>dist</code>と<code>.next</code>配下にあるファイル群をキャッシュする設定です。<code>node_modules/.cache/turbo</code>にキャッシュしたファイルが出力されます。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"outputs": ["dist/**", ".next/**"]
</code></pre></div>
先程の build コマンドをもう一度実行すると cache が使われ、前回より早く実行されているのがわかります。
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">$ turbo run build
• Packages in scope: @nus3/example-button2, nus3-a, nus3-config, nus3-ui
• Running build in 4 packages
@nus3/example-button2:build: cache hit, replaying output a161062b16a0be35
...
nus3-ui:build: cache hit, replaying output b32d4fb848c8658f
...
nus3-a:build: cache hit, replaying output a80d8842624981a8
...

 Tasks: 3 successful, 3 total
Cached: 3 cached, 3 total
 Time: 221ms &#x26;gt;&#x26;gt;&#x26;gt; FULL TURBO

✨ Done in 0.57s.
</code></pre></div>
次のように何も指定しない場合、依存関係がないものとして認識され並列に実行されます
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"lint": {},
</code></pre></div>
次の deploy コマンドの<code>dependsOn</code>では pipeline で定義した<code>build</code>, <code>test</code>, <code>lint</code>(順不同)を実行し、終了した時点で workspace 内の各 package の<code>deploy</code>コマンドを実行します。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"deploy": {
 "dependsOn": ["build", "test", "lint"]
},
</code></pre></div>
今回定義したものの場合、Turborepo は次のようなことを考慮しながら各々の package のコマンドを実行します。
<ul>
<li><code>build</code>: モノレポ内の各 package の依存関係を考慮しつつ build</li>
<li><code>test</code>: <code>pipeline</code>で定義した<code>build</code>が実行された後に実行</li>
<li><code>lint</code>: 他のコマンドの順番を気にせず、並列で実行</li>
</ul>
deploy コマンドを実行した結果が次になります。
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">$ turbo run deploy
• Packages in scope: @nus3/example-button2, nus3-a, nus3-config, nus3-ui
• Running deploy in 4 packages
nus3-a:lint: $ next lint
@nus3/example-button2:build: $ vite build &#x26;amp;amp;&#x26;amp;amp; tsc -p ./tsconfig.build.json
...
nus3-ui:build: $ echo &#x26;#39;build nus3-ui&#x26;#39;
...
nus3-a:build: $ next build
...
nus3-a:test: $ echo &#x26;#39;test nus3-a&#x26;#39;
...
nus3-a:deploy: $ echo &#x26;#39;deploy nus3-a&#x26;#39;</code></pre></div>
実際に上記を考慮しつつ各 package のコマンドが実行された後に、最後に deploy コマンドが実行されているのがわかると思います。
また、今回はローカルキャッシュの話のみでしたが、Turborepo には<a href="https://turborepo.org/docs/features/remote-caching#vercel">Vercel</a>や<a href="https://turborepo.org/docs/features/remote-caching#custom-remote-caches">独自</a>にキャッシュを配置することで、同じハッシュのキャッシュがあった場合にそのキャッシュを使ってくれるリモートキャッシュといった機能も Beta で用意されています。
今のプロジェクトが Yarn や npm の workspace を使っているのであれば、Turborepo を試しに入れてみてもいいかもしれません。

Monorepo