JavaScript

package-lock.jsonの役割とは?【Node.js】

どうも、つよぽんです!

今回は、npm installでライブラリをインストールすると自動で作成・更新される「package-lock.jsonとは何か?」について解説していきます。

今回の記事の内容は以下の解説記事でも使っているスライドの内容をさらに詳しく解説したものとなります。

あわせて読みたい
【Node.JS】package-lock.jsonの役割を理解する今回はnpmでライブラリをインストールするときに自動で生成されるpackage-lock.jsonが何を意味するのか学習します。結論から言うとpackage-lock.jsonで行っていることは依存ライブラリのバージョンの固定です。バージョンを固定する意味も学習します。...

今回の記事は次のような方に向けて書きました。

想定読者
  1. 「npm install」ライブラリをインストールする方法を理解している
  2. 「package-lock.json」がどんな役割を果たしているのか分からない

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた
  • 「package-lock.json」の役割がわかるようになる
  • package.jsonに記述されているライブラリのバージョンの読み方がわかるようになる

それでは以下の内容で話を進めていきます。

今回の内容
  1. package-lock.jsonとは
  2. package-lock.jsonは依存ライブラリのバージョンを固定する

package-lock.jsonとは

package-lock.json」はnpmコマンド、つまり「npm install ライブラリ名」でライブラリをインストールすると自動で作成されるファイルとなります。

npm installを実行する前のディレクトリ内の様子

以下の画像は「npm install ライブラリ名」を実行する前のディレクトリ内の様子をあらわしたものになります。(※画像をクリックすると別タブで画像が開きます)

npm installでライブラリをインストールする前はpackage-lock.jsonは無いnpm installでライブラリをインストールする前はpackage-lock.jsonは無い

上の画像内の赤枠部分をみて分かる通り、package.jsonだけが表示されていて、package-lock.jsonはまだ作られていません。

npm installを実行した後のディレクトリ内の様子

以下の画像は、package-lock.jsonがディレクトリ内に存在しない状態から「npm install ライブラリ名」を実行して、package-lock.jsonが作成された様子をあらわしたものです。(※画像をクリックすると別タブで画像が開きます)

npm installでライブラリをインストールした後にpackage-lock.jsonは自動で作成されるnpm installでライブラリをインストールした後にpackage-lock.jsonは自動で作成される

上の画像内の赤枠部分をみて分かる通り、さきほどまで「package.json」のみでしたが、package-lock.jsonも新たに作成されました。

上の画像のディレクトリ内をよく見ると、package-lock.json以外にも「node_modules」ディレクトリが自動で作成されていうのがわかるかと思います。

こちらは以前書いた記事「npmでライブラリをインストールする方法【Node.JS】」でも書いていますが、インストールしたライブラリ本体が格納されるディレクトリとなります。

そして、「package-lock.json」が存在する状態で、新たに別のライブラリを「npm install」でインストールした場合は、「package-lock.json」の中身は自動で更新されます。

package-lock.jsonの更新はパッと見ではわかりづらいです。

しかし、プロジェクトをgitでバージョン管理している場合は、ライブラリをインストールした後に「git status」コマンドを実行すると「package-lock.json」に変更があったことが確認できます。

はじめてのGit!git statusで変更内容を確認する方法

package-lock.jsonは依存ライブラリのバージョンを固定する

前の章で、「package-lock.json」が「npm install」をすると自動で作成・更新されるということを説明しました。

この章では、package-lock.jsonの役割について解説します。

この章の見出しでも既に書いてあるとおり、package-lock.jsonの役割は「依存ライブラリのバージョン固定」になります。

おさらい : package.jsonのdependenciesとdevDependenciesの役割

「npm install ライブラリ名」でライブラリをインストールするとpackage.json内の「dependencies」、「devDependencies」のいずれかにライブラリ情報が自動で追記されていきます。

dependenciesとdevDependenciesによって、node_modulesがない場合でも、「npm install」を実行するだけで依存ライブラリを一気にインストールすることができます。

「dependencies」「devDependencies」「npm installで一気にインストール」に関することを詳しく知りたい方は、以下の記事で詳しく解説しているのでそちらを参照していただけたらと思います。

あわせて読みたい
npmでライブラリをインストールする方法【Node.JS】今回はnpmを使ってライブラリをインストールする方法を解説します。ライブラリをインストールする方法によって、package.jsonの記述のされ方が変わってきます。またライブラリを全部削除したとしてもpackage.jsonの情報を使って依存ライブラリを一気にインストールすることもできます。...

dependencies・devDependenciesで指定しているライブラリバージョンは固定されている?

package.jsonの「dependencies」と「devDependencies」のライブラリ情報の右側に書いてある数字は、依存ライブラリのバージョン情報になります。

以下の画像の赤枠で示している部分がライブラリのバージョン情報をあらわしている部分です。(※画像をクリックすると別タブで画像が開きます)

package.jsonのライブラリバージョンの読み方package.jsonのライブラリバージョンの読み方

上の画像の場合は「^4.16.4」と書いてあるので、バージョンが4.16.4のライブラリをインストールすると考える方もいらっしゃるかるかと思います。

結論を言うと、「^4.16.4」という記述は「4.16.4」をインストールするとは限りません。

詳しくは以下の参考記事に任せますが、「^」がついている場合は、一番左のバージョンを固定した、一番最新のバージョンという意味になります。

つまり、今回の場合は「^4.16.4」なので、バージョン範囲は「4.xx.xx」の中でも最新版ということになります。

例えば、「^4.16.4」とかいてあっても、バージョン4系の最新が「4.99.99」の場合は、「4.99.99」を使うことになります。

package-lock.jsonでインストールするライブラリのバージョンを固定する

package.jsonで指定しているライブラリのバージョンは、「^」や「~」などが先頭についていると、厳格な意味でバージョンが固定されていないことを説明しました。

なので、ライブラリのバージョンが固定されておらず、常に最新のバージョンをインストールするようになると、ライブラリのバグや、仕様変更によって動かなくなる可能性があります。

そのため、インストールしたライブラリがうまく動くことが確認できたら、そのライブラリバージョンを固定する必要があります。

そこでバージョンを固定するために「package-lock.json」が重要になってきます。

「package-lock.json」の中身を見ると、インストールしたライブラリの他に、そのライブラリが依存しているライブラリも含めて、全てのライブラリ情報が記述されています。

その中で、各ライブラリの中に「version」という項目があり、「npm install」でライブラリを一気にインストールするときは、この「version」に対応するライブラリをインストールします。

package.json」ではライブラリのバージョンを固定していなくても、このように「package-lock.json」がインストールするライブラリのバージョンを固定してくれているのです。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • package-lock.jsonは「npm install ライブラリ名」を実行すると自動で作成・更新されるファイル
  • package-lock.jsonの役割は、依存ライブラリのバージョンを固定すること
  • package.jsonに書かれているライブラリのバージョン情報は固定されているとは限らない

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
【Node.JS】package-lock.jsonの役割を理解する今回はnpmでライブラリをインストールするときに自動で生成されるpackage-lock.jsonが何を意味するのか学習します。結論から言うとpackage-lock.jsonで行っていることは依存ライブラリのバージョンの固定です。バージョンを固定する意味も学習します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です