はじめに
jsフレームワークの勉強をしている中で、パッケージマネージャーについて調べることが多かったので、ここでまとめてみます！
この記事では、パッケージマネージャーについての概要と、どんな種類があるのかを説明します！
パッケージマネージャーとは？
パッケージマネージャーは、ソフトウェアやライブラリ（パッケージ）を簡単に「インストール・更新・削除」できるツールのことです！
フロントエンド開発では、例えば「Reactを使いたい」と思ったときに、パッケージマネージャーを使えば簡単に関連パッケージをインストールできます。
npm install react
この1コマンドで、React本体や依存ライブラリを自動で取得、管理してくれる超便利ツールです！
ソフトウェアとライブラリの違いって？
| 項目 | ソフトウェア（アプリ） | ライブラリ |
|---|---|---|
| 目的 | ユーザーが直接使うため | 他のソフトから呼び出される部品 |
| 使い方 | 実行する（例：Chrome, VS Code） | インポートして使う（React, Lodash） |
| 単独で動作？ | 動作する | 単独では動作しない |
たとえば…
ソフトウェア：Figma、Slack
ライブラリ：React（UIを作る部品群）、Axios（HTTP通信ライブラリ）
パッケージマネージャーを使わなければどうなる？
手動でライブラリ管理しなきゃいけない…
- 自分でGitHubからZIPをダウンロード
- 解凍して
libs/フォルダに置く - 依存ライブラリもまた手動で探す
- バージョン更新も全部手動…
デメリットだらけ！
- 依存関係の崩壊 (AがBに依存、BがCに依存...)
- 更新ミスでバグ発生
- チーム開発で環境差異が出る（誰かのPCでは動かないとか）
パッケージマネージャーを使えば…
- 必要なものだけを
package.jsonに書いておけばOK！ - ワンコマンドで全部そろうし、更新も管理できる！
では実際、こうした管理は「どこにどう記録されるのか？」を見てみましょう！
依存や設定はどこに記録される？
package.jsonとは？
パッケージマネージャーの「設計図」みたいなもので、プロジェクトで必要なパッケージ・バージョン・実行スクリプトなどを定義するファイル。
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"react": "^18.2.0"
},
"devDependencies": {
"eslint": "^8.50.0"
}
}
| 項目 | 意味 | 使われるタイミング（いつ） | 目的（なんのために） |
|---|---|---|---|
| name | プロジェクト名（npm公開する場合は一意） | プロジェクトを新しく作るとき、npmに公開するとき | 友達や世界中の人に自分のアプリを配るときに「どのアプリか」区別するため |
| version | プロジェクトのバージョン | アプリをアップデートして公開するとき | 「どのバージョンか」分かるようにして、古いバージョンと区別するため |
| scripts | コマンドを短縮して定義できる（例: npm run dev） | 開発中や本番公開前にコマンドを実行するとき | 「npm run dev」みたいに、長いコマンドを短く簡単に実行できるようにするため |
| dependencies | 本番で必要なパッケージ（Reactなど） | アプリを動かすためにnpm installしたとき、本番サーバーで動かすとき | アプリがちゃんと動くように、必要な部品（ライブラリ）を自動で入れるため |
| devDependencies | 開発時だけ使うパッケージ（ESLint, Viteなど） | 自分のパソコンで開発するとき、npm installしたとき | コードチェックやビルドなど、開発を便利にする道具を入れるため（本番には不要） |
ロックファイルとは？
npmではpackage-lock.json、Yarnではyarn.lockなどがある。
package.json はあくまで 希望（バージョン指定の範囲） であって、「絶対このバージョン」とは限らない。
例
"react": "^18.2.0"
これは「18.2.0以上のマイナーバージョン（例: 18.2.3）」までOKという意味。
でもこれだと…
| 環境 | バージョン |
|---|---|
| 自分の環境 | 18.2.0 |
| 同僚の環境 | 18.2.3 |
| CIの環境 | 18.3.0（互換性が壊れてた！） |
みたいに環境差が起きる可能性がある。
それを防ぐために登場するのが ロックファイル！
（個人的に鍵のロックをかけるみたいな意味で考えると理解しやすいです！）
ロックファイルがやってること
- 実際に install された正確なバージョンを記録
- 依存関係の依存（＝ツリーの下の方）も全記録
- チームで同じ lock ファイルを使えば、全く同じ node_modules が再現できる
package.json / lockファイル / node_modules の関係図
プロジェクト/
├── package.json ← インストールしたい「希望」
├── package-lock.json ← 実際に入った「確定記録」
└── node_modules/ ← パッケージの「中身そのもの」
JavaScript系 主なパッケージマネージャー
1. npm (Node Package Manager)
- Node.js の標準パッケージマネージャー
- 利用者数が最も多い
-
package-lock.jsonで依存を固定
npm install lodash
2. Yarn
Yarn v1（Classic）
- node_modules/ フォルダを生成する
- .yarnrc や yarn.lock を使う
- ほぼ npm と似た動作（速い＆キャッシュが優秀）
- 今でも多くのプロジェクトが使ってる安定版
yarn add lodash
Yarn v2以降（Berry系）
- 2020年以降登場の次世代Yarn
- Plug'n'Play（PnP）という独自の仕組みがある
- 少し学習コストが高めだが、高速かつ強力
3. pnpm
- 次世代マネージャー
- 依存を効率的に管理（重複を避ける）
- 最速クラス
-
pnpm-lock.yamlで管理
pnpm add lodash
BunやDenoのような“全部入りランタイム”もある！
最近は、ランタイム＋パッケージ管理＋ビルド/テストが一体化したオールインワンツールも登場しています。
Bun：爆速＆オールインワンの、Node.js互換の新しいランタイム。
Deno：Node.jsの作者が再設計したランタイム。依存はURLで読み込み、node_modules を使わずに実行。
※ランタイム＝JavaScriptをサーバー側で実行するためのエンジン・環境のこと
選び方のポイント
| パッケージマネージャー | 速さ | ディスク効率 | 安定性 | 特徴 |
|---|---|---|---|---|
| npm | △ | △ | ◎ | 標準的で最も広く使われる。Node.jsに最初から入ってる。 |
| Yarn v1 | ○ | ○ | ○ | npmより高速＆安定を目指して作られた。キャッシュに強く、今でも多くのプロジェクトで使われる。 |
| pnpm | ◎ | ◎ | ○ | 重複のない依存管理が特徴。最速クラスで、ディスク節約にも優れる。 |
| Yarn v2以降 | ◎ | ◎ | △〜○ | node_modulesを使わない独自方式（PnP）。カスタマイズ性が高い反面、やや学習コストあり。 |