【入門編】pnpmで始める高速かつクリーンなフロントエンド開発！workspace機能によるモノレポ管理術 – ビルド・パッケージ管理ツール生産性向上バイブル

フロントエンド開発の現場で「`node_modules`の迷宮」に迷い込み、PCのファンが唸りを上げるたびに時間を浪費していませんか？

こんにちは。開発環境を極めることに情熱を燃やすエンジニアです。今回は、現代のフロントエンド開発における「究極の最適解」とも言えるpnpmと、その真骨頂であるWorkspace機能について解説します。

単なる「npmの代替」ではありません。これを知れば、あなたの開発ライフサイクルは劇的に、そしてエレガントに進化します。

—

npmやyarn（v1）の最大の弱点は、プロジェクトごとに `node_modules` を生成し、ディスクを浪費することです。例えば、10個のプロジェクトでReactを使っていれば、同じファイルが10箇所にコピーされます。

pnpmが革新的なのは、「コンテンツアドレス指定ストレージ」と「ハードリンク」を組み合わせた点です。

単一ソースの原則: コンピュータ内にパッケージの本体は1つだけ存在します（グローバルストア）。
ハードリンクの魔法: プロジェクトの `node_modules` には、実際のファイルではなく「実体へのリンク」が置かれます。OSレベルでポインタを指すだけなので、インストールは一瞬であり、ディスク容量は驚くほど節約されます。
フラットではない構造: npm特有の「幽霊依存関係（インストールしていないパッケージがなぜか使えてしまう問題）」を排除し、厳格な依存関係グラフを構築します。

結果として、「速い・軽い・壊れない」という、エンジニアが喉から手が出るほど欲しい環境が手に入るのです。

—

モノレポ（Monorepo）とは、複数のアプリケーションやライブラリを一つのリポジトリで管理する手法です。pnpmのWorkspace機能を使えば、これらを驚くほど直感的にリンクさせることができます。

まずは、プロジェクトのルートに `pnpm-workspace.yaml` を作成します。これがモノレポの司令塔です。

pnpm-workspace.yaml
packages:

これだけで、`apps/` や `packages/` 以下のディレクトリが、それぞれ独立したパッケージとして認識されます。

—

実際に、`packages/ui` という共通ボタンコンポーネントを、`apps/web` というアプリから呼び出す構成を作ってみましょう。

packages/ui ディレクトリを作成
mkdir -p packages/ui
cd packages/ui
pnpm init # package.jsonを生成

`packages/ui/package.json` には以下のように名前を定義します。

{
“name”: “@my-repo/ui”,
“version”: “1.0.0”,
“exports”: {
“.”: “./index.js”
}
}

次に、アプリ側でこのライブラリを導入します。ここがpnpmの凄まじいところです。

cd ../../apps/web
ローカルパッケージを依存関係に追加（シンボリックリンクが自動生成される）
pnpm add @my-repo/ui –workspace

この `–workspace` フラグが重要です。これにより、公開されているnpmレジストリではなく、ローカルの `packages/ui` を参照しに行きます。 コードを修正すれば、即座にアプリ側に反映される開発体験は、一度味わうと戻れません。

—

モノレポ運用で毎日使うコマンドはこれらだけです。

特定のパッケージに対してのみコマンドを実行します。
例：`pnpm -F web dev` （webアプリだけ開発サーバーを起動）

すべてのパッケージに対して一括でコマンドを実行します。
例：`pnpm -r test` （全パッケージのテストを実行）

—

環境構築に時間をかけることを「無駄」だと思う人がいますが、それは違います。開発環境は、あなたの思考の解像度を上げるための最高の投資です。

pnpmを導入することで、依存関係の地獄から解放され、コーディングそのものに集中できるようになります。もしあなたがこれから新しくプロジェクトを始めるなら、迷わずpnpmを選んでください。

「インストールが終わるのを待つ」という時間は、あなたの人生から消し去りましょう。さあ、この高速でクリーンな環境で、最高のアウトプットを生み出してください。応援しています！