【完全比較】npm / yarn / pnpm 主要コマンド10選まとめ
フロントエンドの開発環境を構築する際、パッケージマネージャーとして npm、yarn、pnpm のどれを使うか迷うことはありませんか？
今回は、これら3つのツールでよく使う代表的なコマンド10選を比較表付きでまとめました。 プロジェクトの移行や、新しいツールを試す際のカンペとしてぜひ活用してください。
1. コマンド比較一覧表
まずは全体の比較表です。基本的な操作はどれも網羅していますが、コマンド名に若干の違いがあります。
| 操作内容 | npm | yarn (v1 / v2以降) | pnpm |
|---|---|---|---|
| 1. 初期化 | npm init |
yarn init |
pnpm init |
| 2. 全依存関係のインストール | npm install |
yarn install |
pnpm install |
| 3. 本番依存の追加 (dependencies) | npm install <pkg> |
yarn add <pkg> |
pnpm add <pkg> |
| 4. 開発依存の追加 (devDependencies) | npm install -D <pkg> |
yarn add -D <pkg> |
pnpm add -D <pkg> |
| 5. グローバルインストール | npm install -g <pkg> |
yarn global add <pkg> / dlx |
pnpm add -g <pkg> |
| 6. パッケージの更新 | npm update |
yarn upgrade / yarn up |
pnpm update |
| 7. パッケージの削除 | npm uninstall <pkg> |
yarn remove <pkg> |
pnpm remove <pkg> |
| 8. スクリプトの実行 | npm run <script> |
yarn <script> |
pnpm <script> |
| 9. パッケージの実行 (一時実行) | npx <pkg> |
yarn dlx <pkg> |
pnpm dlx <pkg> |
| 10. キャッシュの削除 | npm cache clean --force |
yarn cache clean |
pnpm store prune |
2. 各コマンドの詳細解説
1. プロジェクトの初期化 (package.json の作成)
新しくプロジェクトを始める際に、設定ファイルである package.json を生成します。
- npm:
npm init -y（-yをつけると質問をスキップできます） - yarn:
yarn init -y - pnpm:
pnpm init
2. 全依存関係のインストール
既存のプロジェクト（package.json がある状態）で、必要なライブラリを一括ダウンロードします。
- npm:
npm install(またはnpm i) - yarn:
yarn install(または単にyarn) - pnpm:
pnpm install(またはpnpm i)
3. 通常のパッケージ追加 (dependencies)
本番環境でも必要なライブラリ（React, Vue, Axiosなど）を追加します。
- npm:
npm install <package-name> - yarn:
yarn add <package-name> - pnpm:
pnpm add <package-name>
4. 開発用パッケージ追加 (devDependencies)
ビルドツールやテストツール、TypeScriptの型定義など、開発時にしか使わないライブラリを追加します。
- npm:
npm install -D <package-name> - yarn:
yarn add -D <package-name> - pnpm:
pnpm add -D <package-name>
5. グローバルインストール
PC全体（システム全体）で使えるようにツールをインストールします。
- npm:
npm install -g <package-name> - yarn:
yarn global add <package-name>（※Modern Yarn v2以降では非推奨となり、代わりにyarn dlxが推奨されます） - pnpm:
pnpm add -g <package-name>
6. パッケージの更新
インストール済みのパッケージを最新バージョン（package.json の範囲内）に更新します。
- npm:
npm update - yarn:
yarn upgrade（Modern Yarnではyarn up） - pnpm:
pnpm update
7. パッケージの削除
不要になったライブラリをプロジェクトから削除します。
- npm:
npm uninstall <package-name> - yarn:
yarn remove <package-name> - pnpm:
pnpm remove <package-name>
8. スクリプトの実行
package.json の "scripts" 項目に定義したカスタムコマンド（dev や build など）を実行します。
- npm:
npm run dev（runが必須） - yarn:
yarn dev（runを省略可能） - pnpm:
pnpm dev（runを省略可能）
9. パッケージの一時実行 (インストールせずに実行)
ローカルにインストールしていないツール（create-next-app など）を一時的にダウンロードして実行します。
- npm:
npx create-next-app@latest - yarn:
yarn dlx create-next-app@latest - pnpm:
pnpm dlx create-next-app@latest
10. キャッシュのクリア / 最適化
インストールの挙動がおかしい時などに、PC内に保存されたキャッシュを掃除します。特に pnpm はグローバルストアで管理しているため、不要なファイルを削減するコマンドになります。
- npm:
npm cache clean --force - yarn:
yarn cache clean - pnpm:
pnpm store prune（不要な孤立ファイルを削除）
3. どれを選ぶべき？ ざっくり特徴まとめ
- npm: Node.js標準なので安心感と情報量が随一。迷ったらこれ。
- yarn: かつてnpmが遅かった時代に登場。現在のModern Yarn (v2〜) は**Plug’n’Play (PnP)**という独自機能で厳格な管理が可能。
- pnpm: とにかく爆速でディスク容量を節約できる。複数のプロジェクトで同じライブラリを使う場合、PC内の実体は1つだけ（ハードリンク）にするため、ストレージにとても優しい。
最近のトレンドとしては、速度とディスク容量削減の観点から pnpm を採用するプロジェクトが非常に増えています。自分のプロジェクトの規模やチームの方針に合わせて選んでみてください！