2018年6月11日

プログラミング

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

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

目次

  1. はじめに
  2. npmとは
  3. npmプロジェクトを初期化しよう
  4. 依存関係でライブラリを追加しよう
  5. バージョン番号とロックファイルを理解しよう
  6. 補足: npmとyarn
  7. まとめ

はじめに

JavaScriptを使って開発や勉強をしていると、npmpackage.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はインストールされない

POINT!!

全てdependenciesに追加してしまってもいいのですが、これらの違いはNode.jsサーバーとして動かすときやパッケージを公開するときに影響してきます。普段から、プログラムの動作には必要なく開発やテストのときのみに使うパッケージは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 というコマンドを使うこともできます。
yarnnpm コマンドのインストール速度などを改良することを目指して開発されたツールで、同じnpmのパッケージを参照しますし、 package.json によって管理するところも同じです。

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

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

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

まとめ

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

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

npm Documentation

9

0

AUTHOR

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP