Vue 3のドキュメントで頻出するnpm, pnpm, yarn, bun（パッケージマネージャー）について

はじめに

この記事では、Vue 3のドキュメントで頻出するnpm, pnpm, yarn, bun についてを自分用としてまとめます。

npm, pnpm, yarn, bunは「パッケージマネージャー」

パッケージマネージャーとは、ソフトウェアの依存関係を管理するためのツールです。具体的には、アプリケーションの開発や実行に必要な外部ライブラリやパッケージを効率的に管理することを目的としています。以下は主な機能です。

• パッケージのインストール
• パッケージのバージョン管理
• 依存関係の管理
• パッケージの更新
• スクリプトの管理

npm (Node Package Manager)

npmはNode.jsの標準のパッケージマネージャーで、JavaScriptパッケージのインストール、管理、共有を行うためのツールです。npm は Node.js の標準のパッケージマネージャーであると同時に、世界最大のJavaScriptパッケージレジストリでもあります。

インストール方法

• Node.jsをインストールすると自動的にインストールされます。

主要機能

• パッケージのインストール: npm install <package-name>
• パッケージのバージョン管理: package.json ファイル
• スクリプトの実行: npm run <script-name>
• 依存関係の管理: dependencies と devDependencies

pnpm (Performant npm)

pnpmは高速で効率的なパッケージマネージャーです。ディスクスペースの効率的な使用とキャッシュの有効利用により、特に大規模プロジェクトでのパフォーマンスが向上します。

インストール方法

• npm install -g pnpm

主要機能

• 効率的なパッケージインストール: pnpm install <package-name>
• ディスクスペースの節約（パッケージの重複を避ける）
• 高速なインストールプロセス
• モノリポジトリのサポート（複数のプロジェクトを一つのリポジトリで管理）

yarn

yarnはMeta (旧Facebook) が開発した高速で信頼性の高いパッケージマネージャーです。yarnはnpmの代替として開発されましたが、現在ではnpmとの互換性が高く、多くの機能がnpmにも取り込まれています。

インストール方法

• npm install -g yarn

主要機能

• パッケージのインストール: yarn add <package-name>
• 依存関係のロックファイル: yarn.lock
• キャッシュの利用による高速なインストール
• ワークスペースのサポート（複数のプロジェクトを一つのリポジトリで管理）

bun

bunは高速なJavaScriptランタイムとパッケージマネージャーを提供するツールです。Node.jsの代替として、サーバーサイドJavaScriptの実行と依存関係の管理を効率的に行うことができます。なおbunはまだ実験的な段階であり、全てのNode.jsパッケージがbunで動作するわけではありません。

インストール方法

• curl https://bun.sh/install | bash

主要機能

• パッケージのインストール: bun add <package-name>
• 高速なJavaScriptの実行
• 組み込みのTypeScriptサポート
• 一貫した開発環境を提供するためのツールセット

依存関係の自動記入

パッケージマネージャーを使用するとpackage.json ファイルの dependencies フィールド（または devDependencies フィールド）にパッケージ名とバージョンが自動的に追加されます。ここでは詳しいことは書きません。

ロックファイル

ロックファイルはプロジェクトの依存関係 (外部ライブラリやパッケージ) のバージョンを固定するためのファイルです。ロックファイルにはプロジェクトで直接使用している依存関係だけでなく、それらの依存関係がさらに依存しているパッケージ (間接的な依存関係) のバージョンも記録されます。これにより、依存関係のツリー全体を固定し、プロジェクトの安定性を確保します。

なぜロックファイルが必要なのか？

• 再現性の確保：プロジェクトを別の環境で再現する場合や、チーム開発で他のメンバーが同じプロジェクトをビルドする場合、ロックファイルがあれば、全員が全く同じバージョンの依存関係をインストールできます。これにより、環境の違いによる不具合を防ぐことができます。
• セキュリティの向上：依存関係のバージョンを固定することで、悪意のあるコードが紛れ込むリスクを低減できます。
• ビルドの高速化：ロックファイルがあることで、パッケージマネージャーは依存関係の解決をスキップできるため、インストール時間を短縮できます。

package-lock.json

package-lock.jsonはプロジェクトの依存関係を固定し、再現性を確保するためのファイルです。npm install を実行した際に自動的に生成されます。このファイルは、package.jsonに記載されている依存関係の正確なバージョンとその依存関係のツリーを記録します。

主な機能と目的

• 依存関係の固定：package-lock.jsonには具体的なバージョンが記録され、同じ依存関係を持つ環境を再現できます。
• 再現性の保証：他の開発者がプロジェクトをクローンしてnpm installを実行した際に、全ての依存関係が同じバージョンでインストールされ、一貫性が保たれます。
• パフォーマンスの向上：npm installのパフォーマンスを向上させるために、package-lock.jsonに記録された情報をキャッシュとして使用します。

yarn.lock

package-lock.jsonのyarnバージョン。

pnpm-lock.yaml

package-lock.jsonのpnpmバージョン。

各パッケージマネージャーの比較表

特徴	npm	yarn	pnpm
インストール速度	遅い	npmより高速	npm、yarnより高速
ディスク容量	パッケージの重複により容量を消費しやすい	npmより効率的	パッケージの重複を避けるため非常に効率的
コマンド	npm install	yarn add / yarn install	pnpm add / pnpm install
ロックファイル	package-lock.json	yarn.lock	pnpm-lock.yaml

定番のパッケージマネージャは？

現在JavaScriptのパッケージマネージャとして広く使われているのはnpm、pnpm、yarn、bunの4つです。それぞれの定番度や利用シーンについて：

npm

• 利点: 広範なコミュニティサポート、豊富なパッケージ数、標準ツール
• 欠点: インストール速度が遅い場合がある、パッケージの重複が発生しやすい

yarn

• 利点: 高速なインストール、キャッシュ機能による効率的な依存関係管理、優れたロックファイル管理
• 欠点: 初期設定がやや複雑な場合がある

pnpm

• 利点: 高速なインストール、ディスクスペースの効率的な利用、優れたモノリポジトリサポート
• 欠点: 一部のツールやパッケージと互換性がない場合がある

bun

• 利点: 非常に高速なJavaScriptの実行、組み込みのTypeScriptサポート、一貫した開発環境
• 欠点: 実験的な段階であり、互換性の問題が発生する可能性がある

定番の選択

• 初心者や標準的なプロジェクト: npm
• 大規模プロジェクトやパフォーマンスが重要な場合: yarn
• ディスクスペースの効率を重視する場合やモノリポジトリ: pnpm
• 最新技術を試してみたい場合: bun

複数のパッケージマネージャを併用してもいいの？

よくなさそう。理由は以下の通り：

依存関係の競合：

• 複数のパッケージマネージャを使用すると、異なるバージョンの依存関係がインストールされる可能性があり、予期しない競合やバグが発生することがあります。

ロックファイルの一貫性：

• 各パッケージマネージャは独自のロックファイル（package-lock.json、yarn.lock、pnpm-lock.yaml）を生成します。複数のパッケージマネージャを使用すると、これらのファイルが一致せず、依存関係の整合性が崩れることがあります。

開発環境の混乱：

• プロジェクトメンバーが異なるパッケージマネージャを使用すると、インストール方法や依存関係の管理に一貫性がなくなり、開発環境が混乱する可能性があります。

まとめ

• npm, pnpm, yarn, bunは「パッケージマネージャー」であり、開発において欠かせないツールである。
• パッケージのインストールに加えて、パッケージのバージョン管理、依存関係の管理、パッケージの更新、スクリプトの管理を行ってくれる。
• それぞれに違いある。
• 複数のパッケージマネージャを併用しないほうがよい。最も利用者が多いのは「npm」か。