コンテンツにスキップ
JavaScript実践

第6回 - npm install

npm installの概要図

パッケージを新規にインストールする場合

Section titled “パッケージを新規にインストールする場合”

npm installコマンドを使用する場合には、

  • 本番環境で必要なパッケージなのか
  • 開発時にのみ必要なパッケージなのか

で、使用するコマンドを使い分ける必要がある。

npm installコマンドでパッケージをインストールする方法
# 本番環境で必要なパッケージをインストールする場合
npm install --save パッケージ名
# または
npm install パッケージ名


# 開発時にのみ必要なパッケージをインストールする場合
npm install --save-dev パッケージ名
# または
npm install -D パッケージ名

npm installコマンドを使用してパッケージをインストールするとpackage.jsonが自動生成され、インストールしたパッケージの名前と使用するバージョンが記載される。

  • --saveを使用してインストールしたパッケージはpackage.jsonのdependenciesに記載
  • --save-devを使用してインストールしたパッケージはpackage.jsonのdevDependenciesに記載
package.json
{
  "dependencies": {
    "本番環境で必要なパッケージ名": "^4.18.2"
  },
  "devDependencies": {
    "開発時に必要なパッケージ名": "^5.1.6"
  }
}

--saveを使用してインストールするべきパッケージ

Section titled “--saveを使用してインストールするべきパッケージ”
  • 本番環境で必要なパッケージ
  • アプリケーションの実行に必須のパッケージ（Webサーバーなど）
  • 本番環境のコードで直接使用されるライブラリ（UI用のプラグインなど）

--save-devを使用してインストールするべきパッケージ

Section titled “--save-devを使用してインストールするべきパッケージ”
  • 開発環境でのみ必要なパッケージ
  • テストやリンティング、フォーマッターなどの開発支援ツール
  • 本番環境では不要なもの

インストールされたパッケージのバージョン

Section titled “インストールされたパッケージのバージョン”

バージョン指定は、セマンティックバージョニング ↗を使用して記載され、 package.jsonに記載されるバージョンの表記は^、~などを使用して許容するバージョンの幅を表現する。

セマンティックバージョニングの図

記号意味例インストール可能なバージョン
^マイナー・パッチ更新を許容^4.18.24.18.2 〜 4.x.x（5.0.0未満）
~パッチ更新のみ許容~4.17.214.17.21 〜 4.17.x（4.18.0未満）
なし完全固定1.4.01.4.0 のみ

package-lock.json

Section titled “package-lock.json”

package.jsonファイルと同時に生成されるpackage-lock.jsonファイルには、インストールしたパッケージとそのパッケージが依存する他のパッケージの完全なバージョンなどが記録される。

package-lock.jsonファイルは基本的に自動生成されるファイルなので、手作業で編集することは無い。

node_modules

Section titled “node_modules”

インストールされたパッケージはnode_modulesディレクトリ以下にダウンロードされる。

このディレクトリはパッケージをインストールしたタイミングで生成されるので、node_modulesディレクトリは共有せず、package.jsonやpackage-lock.jsonを使用してダウンロードし直す形を推奨。

既存のpackage.jsonを元にパッケージをインストールする場合

Section titled “既存のpackage.jsonを元にパッケージをインストールする場合”

パッケージ名を指定せずに、npm installコマンドを実行すると、すでに存在するpackage.jsonのdependenciesやdevDpendenciesを元に、パッケージを一気にインストールすることが可能。

package-lock.jsonが有る場合は、package-lock.jsonに記載されているバージョンがインストールされる。

package.jsonを元にインストール
# 既存のpackage.jsonを元にインストール
npm install

package.jsonとpackage-lock.jsonの違い

Section titled “package.jsonとpackage-lock.jsonの違い”
  • package.json
    • インストールを許容するバージョンの範囲を指定する
    • インストールしたパッケージが依存している他のパッケージは記載されない
    • 大まかな設計書のようなもの
  • package-lock.json
    • 実際に、インストールされた正確なバージョンを記録する
    • インストールしたパッケージが依存している全ての（子孫）パッケージを記録する
    • 詳細な設計書のようなもの
  • package.jsonとpackage-lock.jsonを共有することで、全員が同じ環境を再現することができる

ただし、

  • package.jsonは存在するが、package-lock.jsonが無い場合
    • package.jsonで許容されたバージョンの最新バージョンを記載したpackage-lock.jsonが作成される
  • package.jsonで指定されているパッケージのバージョンを手動で更新した後にpackage-lock.jsonを更新していない場合
  • package.jsonとpackage-lock.jsonの内容に矛盾がある場合

と言った一部の状況ではpackage-lock.jsonが自動的に作成もしくは、更新されることがある。

参考URL

Section titled “参考URL”