■はじめに

はじめまして。白水（しらみず）と申します。
普段は不動産スタートアップでフロントエンドエンジニアとしてお仕事しています。
今回は「package-lock.jsonファイルの役割」について記事にしました。
良ければご覧ください。

Shiramizu_Junya lit.link(リットリンク)

■環境

Mac
- チップ：Apple M2 Max
- OS：macOS Sonoma バージョン14.6.1
npm：10.8.2

■環境構築

// SSH
❯ git clone --filter=blob:none --no-checkout git@github.com:shiramizu-junya/private-tech-blog.git && cd private-tech-blog && git sparse-checkout set --cone && git 
checkout main && git sparse-checkout set 2024-09-23-sample

// HTTPS
❯ git clone --filter=blob:none --no-checkout https://github.com/shiramizu-junya/private-tech-blog.git && cd private-tech-blog && git sparse-checkout set --cone && 
git checkout main && git sparse-checkout set 2024-09-23-sample

上記コマンドを実行して、リポジトリをCloneします。
package.jsonファイルの作り方がわからない人は利用ください。

■パッケージの情報を確認

◆パッケージの情報を調べる方法

❯ npm view babel-cli

まずは、パッケージの情報を調べてみます。

npm view <パッケージ名>でパッケージの情報を確認する事ができます。

babel-cli@6.26.0
- パッケージ名と現在の安定バージョン
MIT
- ライセンス
deps: 15
- dependenciesで依存しているパッケージの数
versions: 75
- NPMレジストリに公開されているパッケージのバージョン数
https://babeljs.io/
- パッケージのホームページ
https://registry.npmjs.org/babel-cli/-/babel-cli-6.26.0.tgz
- パッケージのダウンロードに使用されるURL
dependencies
- dependenciesで依存しているパッケージの一覧
latest: 6.26.0
- 現在の安定バージョン
next: 7.0.0-beta.3
- 次の公開バージョン

◆パッケージバージョン一覧を調べる方法

❯ npm view babel-cli versions

npm view <パッケージ名> versionsとコマンドを打つと、パッケージのバージョンを一覧で確認できます。

npm view babel-cliと打ったときの表示と、バージョン一覧が対応している事がわかります。

ここで表示されているいずれかのバージョンのパッケージをインストールすることができます。

■package.lock.jsonとは？

npmでパッケージをインストールすると、インストールしたパッケージと、インストールしたパッケージが依存している、パッケージもインストールされます。

例えば、babel-cliをインストールすると、babel-cliは１５個の依存関係があったので、１５個の依存パッケージもインストールされます。

package-lock.jsonには、インストールしたパッケージと、依存関係にあるパッケージのバージョンなどが記録されます。

npmバージョン「5.0.0」から自動でpackage-lock.jsonファイルが作成されるようになりました。

お店でものを購入した際に発行される「レシート」のような役割を担うファイルです。

■package-lock.jsonファイルが無い場合の問題点

package.lock.jsonファイルが無いプロジェクトがあったとします。

Aさんが「babel-cli」の「6.4.0」をインストールして、プロジェクトのベースコードを作成しました。

その後、Bさんがチームに加入して、Bさんがgit cloneしてnpm installコマンドを実行しました。

このときはまだ、「babel-cli」の「6.4.0」が安定バージョンだったため、「6.4.0」がBさんのローカルにインストールされました。

月日が流れ、Cさんがチームに加入しました。

Cさんがgit cloneしてnpm installコマンドを実行しました。

このとき、「babel-cli」がバージョンアップされていて、「6.8.0」が安定バージョンだったと仮定します。

すると、「^」はマイナーバージョンの変更までは許容するので、Cさんのローカルには「6.8.0」がインストールされます。

マイナーバージョンの更新は、いくつかの新機能が追加されるとマイナーバージョンが上がるので、Cさんは新しい機能が使えて、

AさんとBさんは使えないという状況になり、コード内に「6.8.0」の新機能コードが入っていると、AさんとBさんのローカルプロジェクトはエラーになります。

また、package.jsonには「babel-cli」が更に依存している他の子孫パッケージのバージョンなどは記載されていないため、子孫パッケージのバージョンアップが起こった際も、バグが発生する可能性があります。

これらの人によってバージョンが変わる＝環境の差異が出ることを解決するのが「package-lock.json」ファイルです。

「package-lock.json」には「package.json」ファイルに記載されている「^6.4.0」のような曖昧なバージョンではなく、

固定されたバージョンが記載されます。

そのため、「package-lock.json」があると、npm installコマンドを実行した際に、「package-lock.json」に記載されているパッケージのバージョンをインストールするため「Aさん・Bさん・Cさん」のローカル環境に差異が出ません。

■実際にやってみる

❯ npm install babel-cli@6.4.0

npm install babel-cli@6.4.0コマンドを実行すると、package-lock.jsonファイルには、キャレット無しの「6.4.0」が記載されています。

そのため、現在「babel-cliの6.4.0」がインストールされています。

node_modules配下のbabel-cliディレクトリ内のpackage.jsonを確認しても、バージョンが「6.4.0」になっていることがわかります。

ここでnode_modulesとpackage-lock.jsonファイルを削除して、再度npm installコマンドを実行してみます。

pacakge.jsonファイルのみ残っています。

すると、「babel-cli」の「6.26.0」がインストールされました。

package-lock.jsonファイルがないと、package.jsonファイルを見て、「^6.4.0」と記載されているので、マイナーバージョンの中で最新の安定版である「6.26.0」がインストールされます。

もし、別の人がインストールした際に「6.30.0」がリリースされていたら、「6.30.0」がインストールされます。

このようにpackage-lock.jsonファイルがないと、npm installコマンドを実行する時期のバージョンに応じて、ここのローカル環境が変わってしまいます。

逆に、package-lock.jsonファイルがある状態で、npm installコマンドを実行すると、package-lock.jsonに記載されているバージョンのパッケージがインストールされるため、環境に差異が出ません。

■package-lock.jsonファイルの中身を確認してみる

❯ npm install mocha -D

"version": "10.7.3",
- インストールされているバージョン
"resolved": "https://registry.npmjs.org/mocha/-/mocha-10.7.3.tgz",
- インストールに使用されたURL
"dev": true,
- devDependenciesでインストールされた場合は、"dev": true,になる。
  
  mochaが依存しているパッケージも全て"dev": true,になる。
  
  dependenciesでインストールすると、"dev": true,は無くなります。
dependencies
- mochaが依存しているパッケージの一覧
  
  node_modules/mocha/package.jsonのdependenciesに記載されているパッケージが表示されています。
  
  そのためdevDependenciesはインストールされていません。

■【おまけ】node_modulesディレクトリ配下の容量を確認してみる

❯ du -hs node_modules/

上記コマンドで、node_modules/配下の容量を確認できます。

■まとめ

package-lock.jsonファイルがあることで、プロジェクトの環境構築で人によって差異が出ないことという役割がわかりました。
また、package-lock.jsonファイルを確認すれば、どのパッケージがどのバージョンでインストールされているのかもわかります。
そのため、package-lock.jsonもGitの管理下にcommitする必要があります。