npmのpackage.jsonと依存関係を理解しよう！

はじめに

JavaScriptを使って開発や勉強をしていると、npm や package.json という用語をよく目にするかと思いますが、何となく書いてある通りのコマンドを実行しているという方も多いのではないでしょうか？
今回は、npmプロジェクトを1からセットアップしてみることでしっかり理解していきましょう！

npmとは

npmとはNode Package Managerの略で、JavaScriptライブラリのパッケージマネージャーです。その名の通りNode.jsで動くライブラリが主ですが、現在ではブラウザで動くJavaScriptライブラリやコマンドラインツールなど様々なパッケージが登録されています。

npmプロジェクトの情報管理しているのが package.json というファイルです。このファイルを手動で編集したり npm コマンドを通して更新していきます。
npm コマンドはNode.jsをインストールすると一緒にインストールされます。

npmプロジェクトを初期化しよう

手動でpackage.jsonを作る

一番簡単な初期化方法は、空の package.json を作ってしまうことです。

$ echo {} > package.json

npm initコマンドを使う

もしくは npm init コマンドを使って pakage.json を作成します。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.


See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: <プロジェクトのパッケージ名>
version: <バージョンコード(x.y.z形式)>
description: <パッケージの説明>
entry point: <ライブラリとして呼び出されるときのエントリーポイント>
test command: <テストコマンド>
git repository:  <gitリポジトリのURL>
keywords: <関連ワード>
author: <作者名>
license: <ライセンス(MIT, GPLなど)>

いろいろと情報を入力する必要がありますが、これらの情報はプロジェクトをnpmパッケージとして公開するときに使われます。公開する予定がない場合は省略したり適当に入力してしまっても構いません。

package.jsonがすでに存在しているとき

最近のWebフレームワークはJavaScript関連の機能をnpmに任せてしまっていることが多く、その場合はプロジェクトを作成すると最初から package.json が入っています。この場合は既に入っているライブラリを消すと正しく動かないので、 入っている package.json に追記する形で、必要に応じてpackageやversionなどを書き換えて使います。

依存関係でライブラリを追加しよう

プログラム内である外部ライブラリを使っていて、それがないと動かないという状態を依存関係といいます。プロジェクトにnpmを導入する理由で最も多いのはこの依存関係を管理するためでしょう。

dependenciesに追加する

例えば、 lodash というライブラリを追加するために

$ npm install lodash

というコマンドを実行すると、 lodash がインストールされた上で、 package.json に以下のように書き込まれます。（以前は --save オプションが必要でしたが、npm5からは package.json に書き込むのがデフォルトになりました）

  "dependencies": {
    "lodash": "^4.17.10"
  }

右の数字はバージョン番号で、 npm install を実行したときの最新のリリースバージョンが書き込まれます。
dependenciesに追加されたパッケージは、次からは単に

$ npm install

のみでインストールされます。

devDependenciesに追加する

また、 --save-dev というオプションを使って依存関係を追加することもできます。

$ npm install --save-dev eslint

このコマンドを実行すると、 eslint がインストールされ、 pakage.json には以下のように書き込まれます。

  "devDependencies": {
    "eslint": "^4.19.1"
  }

--save-dev を使うと、dependenciesではなくdevDependenciesとして追加されます。この2つには以下の違いがあります。

• npm install に --production が渡されたり環境変数が NODE_ENV=production にセットされているとき、devDependenciesはインストールされない
• そのプロジェクトがnpmパッケージとしてインストールされたとき、dependenciesのパッケージは一緒にインストールされるが、devDependenciesはインストールされない

普段の用途ではあまり意識することはないですが、他にも peerDependencies, bundledDependencies, optionalDependencies があります。詳しくはnpmのドキュメントを読んでみましょう。

バージョン番号とロックファイルを理解しよう

バージョン番号と記号

先ほど、バージョン番号として ^4.17.10 のような数字がでてきましたが、先頭についている ^ は何なのでしょう。^ は省略することができたり、他にも ~ という記号をつけることがよくあります。

このようにバージョン番号を3つの数字で表すとき、それぞれを x.y.z とすると、

x: メジャーバージョン
y: マイナーバージョン
z: パッチバージョン

と呼びます。このバージョン番号に ^ や ~ を付けた場合以下のような意味になります。

 4.17.10: 完全一致 (version = 4.17.10)
^4.17.10: メジャーバージョンが一致 (4.17.10 <= version < 5.0.0)
~4.17.10: マイナーバージョンが一致 (4.17.10 <= version < 4.18.0)

これは、ライブラリに機能改善やバグ修正があった場合に自動で適用してくれるための仕組みです。

ロックファイルとは

この仕組みによって勝手に違うバージョンのライブラリがインストールされてしまうと、プロジェクトを何もいじっていないのにライブラリのバージョンが変わって急に動かなくなった、ということが起こると困りますよね。（一般にはメジャーバージョンが変わらない限り後方互換性を持たせるルールですが、守られない場合もあります）

そこで登場するのがロックファイルです。npm install を実行すると package-lock.json というファイルが作成されるのですが、これがロックファイルです。 package.json に変更がない限りは package-lock.json に書き込まれたバージョンのパッケージがインストールされます。こういった理由があるため、gitを使っていてロックファイルをgitignoreするべきかどうかという質問がよくあるのですが、git管理下に追加するようにしましょう。

補足: npmとyarn

この記事では npm コマンドを使っていましたが、npmパッケージのインストールには yarn というコマンドを使うこともできます。
yarn は npm コマンドのインストール速度などを改良することを目指して開発されたツールで、同じnpmのパッケージを参照しますし、 package.json によって管理するところも同じです。

依存関係に追加されたnpmパッケージをインストールする際、 package-lock.json の代わりに yarn を使うと yarn.lock というロックファイルが作成されます。

複数人で開発する場合や既存のプロジェクトを引き継ぐ場合、どちらのロックファイルが存在するかを見て npm を使うか yarn を使うかを統一するといいでしょう。

他の記事でご紹介している create-react-app や react-native init で作るReact(Native)のプロジェクトは、 yarn がインストールされている場合そちらを優先して使うようになっています。

まとめ

今回はnpmプロジェクトの初期化方法と依存関係の管理について勉強しました。
npm コマンドには他にもさまざまな機能があり、それらの設定も package.json を利用します。

公式ドキュメントを読むと、これから勉強する方だけでなく業務で使っているという方も新たな発見があると思いますので、一度目を通してみるのはいかがでしょうか。

npm Documentation