どうも、つよぽんです！
今回は、npm installでライブラリをインストールすると自動で作成・更新される「package-lock.jsonとは何か？」について解説していきます。
今回の記事の内容は以下の解説記事でも使っているスライドの内容をさらに詳しく解説したものとなります。
今回の記事は次のような方に向けて書きました。
- 「npm install」ライブラリをインストールする方法を理解している
- 「package-lock.json」がどんな役割を果たしているのか分からない
この記事を読み終えた後のあなたは次のことがわかるようになっています。
- 「package-lock.json」の役割がわかるようになる
- package.jsonに記述されているライブラリのバージョンの読み方がわかるようになる
それでは以下の内容で話を進めていきます。
- package-lock.jsonとは
- package-lock.jsonは依存ライブラリのバージョンを固定する
目次
package-lock.jsonとは
「package-lock.json」はnpmコマンド、つまり「npm install ライブラリ名」でライブラリをインストールすると自動で作成されるファイルとなります。
npm installを実行する前のディレクトリ内の様子
以下の画像は「npm install ライブラリ名」を実行する前のディレクトリ内の様子をあらわしたものになります。(※画像をクリックすると別タブで画像が開きます)
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は自動で作成される上の画像内の赤枠部分をみて分かる通り、さきほどまで「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」に変更があったことが確認できます。
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で一気にインストール」に関することを詳しく知りたい方は、以下の記事で詳しく解説しているのでそちらを参照していただけたらと思います。
dependencies・devDependenciesで指定しているライブラリバージョンは固定されている？
package.jsonの「dependencies」と「devDependencies」のライブラリ情報の右側に書いてある数字は、依存ライブラリのバージョン情報になります。
以下の画像の赤枠で示している部分がライブラリのバージョン情報をあらわしている部分です。(※画像をクリックすると別タブで画像が開きます)
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に書かれているライブラリのバージョン情報は固定されているとは限らない
今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。
Webエンジニアになりたい人向けに、MENTA 
にて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。
このプランでは、主に「【学習コンテンツ】Web開発」を使って学習を進めていただきます。
誰向けのプラン？
こちらのプランは次のような方に向けて作られています。
- Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
- Webエンジニアになるまでの学習プランがあると助かる
- 学習していてわからないところが出てきたときに質問したい
- コードレビューして欲しい
- オンライン講義に参加したい
- 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
- おすすめの学習教材を知りたい
- Webフロントエンド・バックエンドを学習したい
- フルスタックエンジニアになりたい
- 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
- 将来フリーランスになることを目指している
プラン内容は？
『【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。
- Web白熱教室の学習コンテンツをメインに、指定した教材を使って学習する (学習プランに沿って学習を進めていただきます。)
- 学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
- プラン契約者が参加するSlackグループにて質問し放題
- Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
- 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
- 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)
- 不定期で行うオフラインでの勉強会に参加(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
1日1回カフェでコーヒー1杯頼むくらいの金額で参加できます
「1日1回、カフェでコーヒー1杯分くらいの値段(約330円)」で以下の環境が手に入るとイメージして頂けたらと思います。
- コードを添削してもらえる
- 学習したことのアウトプットに対してフィードバックしてもらえる
- いつでも質問出来る
- 週1のオンライン講義に参加できる
- 過去のオンライン講義動画を好きな時間に復習できる(いつでも閲覧可能)
- 不定期で行うオフラインでの勉強会に参加できる(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
- 自分の住まいの近場のメンティーさん同士で集まって、オフラインで勉強会を開くのも可能(初めて開催する場合は事前に僕に連絡をいただけたらと思います)
学習教材には、このサイトで用意している「【学習コンテンツ】Web開発」を使います。
「【学習コンテンツ】Web開発」を使って学習を進めることで、Webのフロントエンドとバックエンドのスキルを身につけていくことができます。
プログラミングスクールとの比較
プログラミングスクールに通う場合は1ヶ月で10万円以上するところも多いですし、3ヶ月で50万円、更には100万円するところもあります。
プログラミングスクールの値段が高い理由は、「プログラミングスクールで働いている人の人件費」「就職のサポート」なども含まれているからです。
「10万円・50万円・100万円」のいずれの場合も、自己投資とはいえ、支払うのにはだいぶ勇気がいる金額かと思います。
オススメの学習方法
個人的にオススメするのは、プログラミングのできるメンター(師匠)を見つけて、まずは1ヶ月プログラミング学習をしてみて、自分にプログラミングが向いているかどうか確かめてみることです。
「10万円・50万円・100万円」を払って、学習していく中で「やっぱり自分にはプログラミングは向いてない」と判断した場合、その金額はかなりの痛手となります。
そのため、まずは「これくらいの金額なら最悪失っても痛くないな」の値段で教えてくれるメンターを見つけて、そのメンターに色々と質問をしてみましょう。
それで、「良さそうだな」と思ったら教えてもらうといった流れで学習を始めると、金額もだいぶ節約できます。
注意点
ただし、参加者が増えてきたら、1人1人へのサポートの質を維持するのが難しくなるので、値上げする可能性もあります。
値上げする理由は次の以下の理由となります。
- 値段を上げて参加ハードルをあげることで、自己解決スキルも身につけたいと考えている学習意欲の高い人だけが参加するようになる
- 調べたらすぐにわかることを、自分で調べずに何でもかんでも質問すると、自己解決スキルも身につかない
- 更に、他のメンティーさんの対応する時間が取れなくなりサポートの質の低下にも繋がる
詳しく話を聞いてみたい方は
以下のいずれかでメッセージをいただけたらと思います^^
プラン内容については以下のリンク先からも確認することが出来ます^^
