概要

パッケージ管理システムとは、パッケージの導入や削除、パッケージ間の依存関係などを管理するシステムのことです。

パッケージ管理システムを利用することで、パッケージの導入や削除をコマンド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は以下のように更新されます。

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を元にインストールされたパッケージのインストール先ディレクトリ