フロントエンド開発でパッケージ管理に利用される npm（エヌピーエム）、yarn（ヤーン）、pnpm（ピーエヌピーエム）、bun（バン） について、それぞれ解説します。
パッケージとは？
パッケージとは、再利用可能なコードの集まりのことです。JavaScriptやNode.jsの世界では、これらのパッケージは特定の機能や問題を解決するためのコードをまとめたものです。
以下はパッケージの例です。
- React: ユーザーインターフェースを構築するためのライブラリ
- Sass/SCSS: CSSを拡張した言語で、変数、ネスト、ミックスインなどの機能を追加
- Axios: HTTPリクエストを簡単に行うためのライブラリ
パッケージマネージャー（npm、yarn、pnpm、bun）は、これらのパッケージをインストール、更新、管理するためのツールです。npm install react のようなコマンドを実行すると、パッケージマネージャーが自動的にパッケージをダウンロードし、プロジェクトで使えるようにセットアップします。
各パッケージマネージャーについて
npm（Node Package Manager）
npmはNode.jsをインストールすると、自動的にインストールされます。
最も古いパッケージマネージャーです。
yarn
Facebookが開発したnpm代替パッケージマネージャー。
npmの問題点（当時の速度や安全性の問題）を解決するために作られました。
並列インストールにより高速化され、キャッシュの活用で再インストールが速くなりましたが、現在ではnpmも高速化され劇的な違いは無くなりました。
pnpm
すべてのプロジェクトで同じパッケージを共有するシンボリックリンクを使用することで、複数のプロジェクトで同じパッケージを使う場合、ディスク容量を大幅に節約できるようになりました。
厳格な依存関係の分離による安全性の向上も図られています。
bun
最も新しいツール（2023年に1.0が登場したばかり）で、単なるパッケージマネージャーではなく、JavaScriptランタイム（JavaScriptコードを実行するための環境や実行システムのこと。他にはNodeやDenoなどがあります）・ビルダー・テストランナーも含みます。
Zigという言語で書かれており、非常に高速に動作し、インストールやランタイム実行速度でnpm、yarn、pnpmを大きく上回るベンチマークとなっています。
ただ、新しいこともあり、互換性や安全性はまだ不安定なところがあるので、今後の情報を踏まえながら使っていきましょう。
インストール方法
npmはNode.jsをインストールした時点で自動的にインストールされますが、他のパッケージマネージャーのインストールはnpmがインストールされていれば、同じような方法でダウンロードすることができます。
パッケージマネージャー | mac / windows 共通 |
|---|---|
yarn | npm i -g yarn |
pnpm | npm i -g pnpm |
bun | npm i -g bun |
ちなみに、iはinstallの略で、-gオブションの意味としてはglobal（PC全体）という意味です。
各パッケージマネージャーのコマンドなど
操作 | npm | yarn | pnpm | bun |
|---|---|---|---|---|
インストール | npm i | yarn または yarn install | pnpm i | bun i |
パッケージのインストール | npm i パッケージ名 | yarn add パッケージ名 | pnpm add パッケージ名 | bun add パッケージ名 |
パッケージのアンインストール | npm uninstall パッケージ名 | yarn remove パッケージ名 | pnpm add パッケージ名 | bun add パッケージ名 |
スクリプト実行 | npm run スクリプト名 | yarn スクリプト名 | pnpm スクリプト名 | bun スクリプト名 |
ロックファイル | package-lock.json | yarn.lock | pnpm-lock.yaml | bun.lockb（バイナリ形式） |
アップデート確認 | npm outdated | yarn outdated | pnpm outdated | bun outdated |
依存関係アップデート | npm update | yarn upgrade | pnpm update | bun update |
プロジェクト構造可視化 | npm ls | yarn list | pnpm list | bun pm ls |
