概要
パッケージ管理システムとは、パッケージの導入や削除、パッケージ間の依存関係などを管理するシステムのことです。
パッケージ管理システムを利用することで、パッケージの導入や削除をコマンド1つで実現できます。
また、パッケージ間の依存関係も解決してくれます。
パッケージとは、あるプログラムとそれを利用するのに必要なものをひとまとめにしたものです。
これらのパッケージには依存関係があります。
パッケージAを使うにはパッケージBが必要、さらにパッケージBを使うにはパッケージCが必要、といったイメージです。
フロントエンド開発においては、「npm」や「yarn」というパッケージ管理システムを利用することが一般的です。
npm
npmは「Node Package Manager」の略称で、JavaScript開発者向けのパッケージ管理システムです。
「Node」とありますが、Node.js専用のパッケージ管理システム、というわけではありません
フロントエンド開発で使用するパッケージの導入や削除、依存関係の管理もできます。
こちらからどんなパッケージがあるか確認できます。
npmコマンドの一例
| コマンド | 実行内容 |
|---|---|
| npm install | package.json（後述）に記載されているパッケージをインストール |
| npm install --save-dev {package} | package.jsonのdevDependenciesにパッケージをインストール |
| npm uninstall --save-dev {package} | package.jsonのdevDependenciesからパッケージをアンインストール |
package.json
package.jsonとは、パッケージの情報を記載するためのJSONファイルです。
必要なパッケージ名とバージョンを記載していきます。
手動で編集できますし、コマンドでパッケージを追加した場合は自動で更新されます。
例えば、npm install --save-dev sassを実行すると、package.jsonは以下のように更新されます。
{
"devDependencies": {
"sass": "^1.49.11",
}
}
devDependencies属性には開発時に使用するパッケージを記載します。
その他にも様々な属性を記載できます。
属性の一例
| 属性名 | 役割 |
|---|---|
| name | アプリケーションの名前を記載 |
| description | アプリケーションの説明を記載 |
| dependencies | 本番環境で使用するパッケージを記載 |
| devDependencies | 開発環境で使用するパッケージを記載 |
node_modules
node_modulesとは、package.jsonを元にインストールされたパッケージの、インストール先ディレクトリのことです。
package.jsonがあればnpm installを実行することで、自動で作成、更新されます。
（手動で編集してはいけません。）
また先述したようにパッケージ間には依存関係があり、npmはそれを自動で解決してくれます。
そのため、node_modulesは膨大な量になります。
これらの理由から通常は.gitignoreに指定します。
開発時の具体例
以下は開発時に使いそうな場面についてです。
プロジェクトに参加
package.jsonがあればnpm installを実行するだけで、他のメンバーと同じパッケージをインストールすることができます。
パッケージを追加
例えばnpm install --save-dev {package}でパッケージをインストールします。（package.jsonが更新される）
問題なければ、更新されたpackage.jsonをpushします。（node_modulesは.gitignoreに指定）
他のメンバーにもpackage.jsonを共有し、npm installしてもらうことで、同じパッケージを追加できます。
まとめ
パッケージ管理システム→パッケージの導入や削除、パッケージ間の依存関係などを管理するシステム
npm→JavaScript開発者向けのパッケージ管理システム
package.json→パッケージの情報を記載するためのJSONファイル
node_modules→package.jsonを元にインストールされたパッケージのインストール先ディレクトリ