ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

Node.js npm, パッケージ管理の使い方。今やWebで必須のコマンド。

Node.js image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

Node.jsのnpmはパッケージを管理するコマンドツールです。

パッケージはJavaScriptの拡張プログラムで、必要なものをインストールして、効率的に目的の機能のプログラムを作ります。

今やWebはNode.jsなしでは語れません。npmは必須。（知らない人はバッタ者。）

そのnpmコマンドの使い方をご紹介します。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

JavaScriptのパッケージとは何か？

JavaScriptはいろいろな機能を追加できます。それらがパッケージという単位でGitHubなどで公開されています。そのパッケージを管理するツールがnpmです。

PHPのcomposer、Pythonのpip、Rubyのgemと同じようなものと考えればよいでしょう。

プログラムパッケージ管理
JavaScript(Node.js)npm
PHPcomposer
Pythonpip
Rubygem

npmのコマンドを使って、パッケージの追加・アップデート・削除などの処理を行います。

また最近では、タスクランナーのgulp, webpackなどの有名なツールも、npmを使ってかんたんにインストールします。

JavaScript開発では必ず使うコマンドです。

npmはPHPのcomposerと中身も似ています。

  • サブコマンドの名称
  • 設定ファイルとロックファイル
  • グローバルインストールとプロジェクトインストール
  • インストールされたパッケージのディレクトリ構成
  • npmコマンド自身がパッケージ

など、同じような働きをします。composerを使ったことがある人は覚えやすいでしょう。また、npmを覚えればcomposerもすぐに使えるようになります。

npmはOSS (Open Source Software)です。npmでインストールするパッケージもOSSです。

OSSは無償で使えます。でもすべてがフリーウェアでないことに注意です。

OSSにもライセンスがあり、ただ

  • 『お金はいりません』
  • 『プログラムの改修を認めます』
  • 『プログラムの再配布を認めます』

などが許可されているだけです。

（くわしいライセンスは、npmの設定ファイルに記述します。）

すべて『フリー』でないことに注意しましょう。

（何をしてもかまわないという考えはやめましょう。）

npmのインストール方法

npmにはNode.jsが必要です。Node.jsをインストールすると、標準パッケージとして一緒にインストールされます。

Node.jsアイコン

ダウンロード | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.ダウンロードサイトには、Windows, Mac, Linux版が用意されています。自分の環境に合ったものをダウンロードしてインストールしましょう。

nodejs.org

npmを利用したパッケージのインストール方法

インストール方法は

  • OSにインストール（グローバルインストール）
  • 特定のプロジェクトだけにインストール（ローカルインストール, 指定ディレクトリに限定）

のふたつがあります。

OSにインストール

npm install -g package_name

OSにインストールするとき、複数のプロジェクトで同じパッケージを使えます。テストツール、タスクランナーなど、共通で使うパッケージをインストールします。

パッケージのインストールにはinstallコマンドを使い、オプション-gをつけます。これでOSにインストールします。

OSにインストールするときのnpmのホームディレクトリは次の場所です。

windowsC:\Users{user_name}\AppData\Roaming\npm\node_modules
mac, Linux/usr/local/lib/node_modules/

ホームディレクトリにpackage.jsonファイルとnode_modulesディレクトリが作成されます。

package.jsonは、npmで管理するパッケージ情報が書いてある設定ファイルです。

また、npmでインストールされたパッケージがnode_modulesディレクトリに追加されます。

プロジェクトにインストール

プロジェクトだけで（特定のディレクトリ配下だけで）使うパッケージをインストールします。

プロジェクトへのインストールは次の手順です。

Step1.  プロジェクトのホームディレクトリに移動

プロジェクトのホームディレクトリへ移動します。

Step2. npmの初期処理を実行

すでにプロジェクトにpackage.jsonがある場合は不要です。次のステップへ進んでください。

JavaScriptプロジェクトのホームディレクトリでnpmのパッケージ管理の環境をつくります。

npmの初期処理
npm init --yes

--yesフラグは、コマンドプロンプトで入力を求められるのがめんどうなので、すべての設定をデフォルトで進めます。あとで変更できます。

すると、プロジェクトのホームディレクトリにpackage.jsonファイルが作られます。プロジェクトとnpmのホームディレクトリは同じです。

package.json
{
  "name": "npm",
  "version": "1.0.0",
  "description": "This README would normally document whatever steps are necessary to get your application up and running.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://***@bitbucket.org/***/***.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/***/***#readme"
}

デフォルトのnameは作業したディレクトリ名です。

また、Gitリポジトリ上で作業すると、repositoryとhomepageにGitリポジトリが自動で設定されるので便利です。

プロジェクトのホームディレクトリでnpmコマンドを実行すると、プロジェクト内だけでパッケージの管理をします。

Step3. パッケージの追加

npmを使ってインストールします。次のコマンドを実行するだけです。 

npm install pagekage_name

OSにインストールするコマンドから-gをはずしたものと同じです。

package.json と package-lock.json ファイルの違い

package.json, package-lock.jsonファイルは、パッケージの依存関係を書いた点では同じです。しかし決定的にちがいます。

package.jsonは設定ファイルです。一方、package-lock.jsonは結果ファイルです。パッケージの依存関係に変更があるnpmコマンドを実行すると作られます。

package.jsonは直接編集してもいいですが、package-lock.jsonは直接編集してはいけません。

npmコマンドの結果ファイルだからです。

また、package.jsonはインストールしたパッケージが追記されます。しかし、そのパッケージがさらにどのパッケージに依存しているかは管理しません。

それに対し、package-lock.jsonは、依存するパッケージのさらに依存しているパッケージの情報まで、すべての情報が書き込まれます。

package.json すべてのパッケージの依存関係の検査が未完了の状態ファイル
package-lock.json パッケージの依存関係の検査が完了済みのファイル

とも言えます。

npm installを実行するとどうなるか？

このようなことから、npm installを実行すると、package-lock.jsonの有無で、パッケージのインストールのスピードがちがいます。

package-lock.jsonがないとき
package.jsonからすべてのパッケージの依存関係を検査。
↓
package-lock.jsonに結果を出力。
↓
パッケージのインストール。
package-lock.jsonがあるとき
package.jsonからの依存関係の検査スキップ。
↓
すでにあるpackage-lock.jsonを使う。
↓
パッケージのインストール。

package-lock.jsonファイルがあれば、依存関係の検査が完了した状態からパッケージのインストールがはじまるので作業が早く終わります。

package-lock.jsonは、すべてのパッケージがまったく同じの、プロジェクトのコピー作成や、本番環境の構築などで使います。

npmのコマンド

npmのサブコマンドにはいろいろな操作があります。ここでは、よく使うものを紹介します。

init - 初期処理 -

npm init

パッケージ管理の初期化処理です。基本的に最初に1回だけ実行します。

npmのホームディレクトリにpackage.jsonファイルを作ります。package.jsonは、環境に追加されているパッケージとそのバージョン、また、開発環境用のパッケージなど、パッケージに関する設定があります。

package.jsonがある状態で実行すると、package.jsonの内容が上書きされてしまいます。

install - インストール -

npm install [-g] package_name
alias（短縮形）
npm i [-g] package_name

パッケージをインストールします。node_modulesディレクトリにパッケージが追加されます。

また、package.jsonファイルのdependenciesにパッケージを追記し、package-lock.jsonを更新します。package-lock.jsonにすべてのパッケージのインストール情報があります。

複数のパッケージをまとめてインストールすることもできます。

まとめてインストール
npm install pkg1 pkg2 ...

プロジェクトのコピー・復元

別プロジェクトで作成されたpackage.json（あればpackage-lock.jsonも）を配置して、パッケージ名を省略したコマンドを実行すると、プロジェクトのコピーがかんたんにできます。

プロジェクトのコピー
npm install

パッケージ依存のタイプ指定

package.jsonファイルのパッケージ依存関係（dependencies）のタイプを指定することもできます。

dependencies - デフォルト（運用環境）-

オプション
-P
--save-prod
npm install -P package_name
npm install --save-prod package_name

デフォルトです。未指定のとき--save-prodを指定するのと同じです。

package.jsonのdependenciesに追加されます。

--saveを指定するという情報がありますが、現在のupdateコマンドの公式ドキュメントでは、"--save"というフラグはありません。

いまは、未指定（デフォルト）でdependenciesに追加されるので、--saveを使う意味がありません。

devDependencies - 開発環境 -

オプション
-D
--save-dev
npm install -D package_name
npm install --save-dev package_name

開発環境に使うパッケージで指定します。テストツールやタスクランナーなどのパッケージなどで使われます。

optionalDpendencies - スキップ -

オプション
-O
--save-optional
npm install -O package_name
npm install --save-optional package_name

インストールできないときスキップするパッケージに指定します。特定のOSだけインストールすなどで使います。

（Mac専用のパッケージのとき、Windowsでインストールするときはスキップしてエラーにさせないなど）

パッケージ管理の除外

オプション
--no-save
npm install --no-save package_name

パッケージをインストールしますが、パッケージ管理をしないものに指定します。package.jsonファイルのdependenciesに追加しません。

（ほとんど使う機会はありません。）

追加オプション

上記のオプションのどれかを使ってpackage.jsonに依存関係を保存するとき、ふたつの追加のオプションフラグがあります。

バージョンの固定
オプション
-E
--save-exact
dependenciesのバージョンを固定
npm install -E package_name
npm install --save-exact package_name

package.jsonファイルのdependensiesのバージョンは、キャレット（^）がついています。このフラグを指定した場合、バージョン番号だけ（x.x.x）がpackage.jsonファイルに記載されます。

（バージョン番号についてはupdateで説明します。）

これで、package.jsonファイルを編集しないかぎり、updateコマンドで更新してもアップデートされません。

未登録パッケージ管理
オプション
-B
--save-bundle
bundleDependencies
npm install -B package_name
npm install --save-bundle package_name

自作や改良パッケージなど、npmに登録されていないパッケージをインストールするときに指定します。

update - バージョン変更 -

npm update [-g] package_name
alias（短縮形）
npm up [-g] package_name
npm upgrade [-g] package_name

package.jsonのdependenciesの内容から、パッケージをアップデート/ダウングレードします。そして、package-lock.jsonファイルを更新します。

-gをつけたときは、グローバルにインストールしたパッケージを更新します。

（ローカルパッケージは更新しません。）

また、package-lock.jsonを更新します。

パッケージを省略したときは、package.jsonに書かれたすべてのパッケージを更新します。

インストールされたすべてのパッケージを更新
npm update

複数パッケージをまとめて更新することができます。

まとめて更新
npm update pkg1 pkg2 ...

パッケージのバージョン変更など、package.jsonファイルを直接編集して更新してもかまいません。

開発時には頻繁に使いますが、運用時で利用する場面は、アプリケーションのバージョンアップ作業以外ないでしょう。

パッケージのバージョン番号の見方

パッケージのバージョン番号は

1.1.2

のように、3つの番号をカンマ（.）で区切って表現します。この番号はそれぞれ意味があります。

メジャー番号.マイナー番号.パッチ番号

パッチ番号は、ビルド番号やリビジョン番号ともいいます。

メジャー番号大きな仕様変更。
ユーザエクスペリエンス（UX。ユーザーの使いやすさ）が変わるなど。
マイナー番号機能追加、削除。
バグフィックスなどの小さい変更。
パッチ番号自動発番されたり、使い方の幅は広い。
バグフィックスで使われることもある。

マイナーアップデート

updateコマンドでは、package.jsonファイルの内容によって更新されるバージョンが異なります。

package.json
"dependencies": {
    "node-sass": "^4.10.0"
}

先頭にキャレット（^）がついているときは、メジャー番号は固定で、マイナー番号・ビルド番号の最新の状態に更新します。

ここでは、4.10.0 < 5.0.0のあいだで最新のバージョンに更新します。 範囲外のときは更新しません。

ビルドアップデート

package.json
"dependencies": {
    "node-sass": "~4.10.0"
}

先頭にチルダ（~）ついているときは、メジャー番号とマイナー番号は固定で、ビルド番号の最新の状態に更新します。

ここでは、4.10.0 < 4.11.0のあいだで最新のバージョンに更新します。範囲外のときは更新しません。

完全一致のアップデート

package.json
"dependencies": {
    "node-sass": "4.10.0"
}

バージョン番号だけのときは、完全一致したバージョンに更新します。

パッケージのダウングレードや、アップデートをせずにバージョンを固定するときに使います。

npmの標準機能では、最新版にアップデートする機能はありません。別のパッケージのインストールが必要です。くわしい方法はあとで説明します。

outdated - 最新バージョン確認 -

npm outdated [package_name]

インストールされているパッケージの更新状態を確認します。

Current 現在のバージョン
Wanted updateコマンドで更新できる範囲内の最新バージョン
Latest パッケージの最新バージョン

Wantedは、package.jsonで指定したバージョンにチルダ（~）や、キャレット（^）があるときの範囲での最新のバージョンです。

（package.jsonファイルはそのままで、updateコマンドで更新できます。）

パッケージ名を省略した場合、すべてのパッケージについて確認します。

このコマンドは、パッケージのアップデート情報を確認しているだけで、package.jsonファイルを最新のバージョンに更新しません。

最新のバージョンに更新するには、自分でpackage.jsonファイルを編集して、updateコマンドを実行します。

alias（短縮形）はありません

uninstall - 削除 -

npm uninstall [-g] package_name
alias（短縮形）
npm remove [-g] package_name
npm rm [-g] package_name
npm r [-g] package_name
npm un [-g] package_name
npm unlink [-g] package_name

インストールしたパッケージを削除します。

このままでは、packace.jsonの設定は削除されません。フラグの指定が必要です。

dependencies

オプション
-S
--save
dependencies
npm uninstall -S package_name
npm uninstall --save package_name

package.jsonのdependenciesからもパッケージを削除します。

devDependencies

オプション
-D
--save-dev
devDependencies
npm uninstall -D package_name
npm uninstall --save-dev package_name

package.jsonのdevDependenciesからもパッケージを削除します。install時に、--save-devを指定したものが対象です。

optionalDependencies

オプション
-O
--save-optional
optionalDependencies
npm uninstall -O package_name
npm uninstall --save-optional package_name

package.jsonのoptionalDependenciesからもパッケージを削除します。install時に、--save-optionalを指定したものが対象です。

ls - リスト表示 -

npm ls package_name

alias（短縮形）
npm list package_name
npm la package_name
npm ll package_name

インストールされているパッケージリストを表示します。表示する内容は、依存関係を階層化したものです。

パッケージ名を省略したとき、すべてのパッケージリストを表示します。パッケージ名を指定したときは、そのパッケージの依存関係を表示します。

公式ドキュメントには書いていませんが、-gを使って、グローバルインストールしたリストを見ることができます。

search - パッケージの検索 -

npm search search_terms ...

alias（短縮形）
npm s search_terms
npm se search_terms
npm find search_terms
search_terms検索ワード

インストールしたいパッケージを検索します。検索ワードを半角スペースで区切って複数指定できます。

root - インストール先表示 -

npm root [-g]

npmパッケージのインストールディレクトリ（node_modules）のパスを表示します。

bin - 実行ファイルパス表示 -

npm bin [-g]

npmコマンドの実行ファイルのパスを表示します。プロジェクトにインストールしたときは

node_modules/.bin

グローバルインストールのときは、OSによって異なります。

windowsC:\Users{user_name}\AppData\Roaming\npm
mac, Linux usr/local/bin

windowsのとき、ログインユーザのフォルダが表示されますが、AppData\Roaming\npmにはnpmコマンドはありません。

本当のインストール先ディレクトリは、デフォルトはc:\ProgramFiles\npmです。。

（パスのリダイレクトが行われている）

ただし、パッケージのグローバルインストール先は、...\Roaming\npm\node_modulesです。

help - ヘルプ -

npm help command_name ...
command_nameコマンド名

ヘルプを表示します。コマンド名が未指定のとき、サブコマンドのリストを表示します。

パッケージを最新版にアップデートするには

一般的に、アプリケーションは最新版にアップデートします。でも、npmでは自動で最新版にできません。

次の作業が必要です。

最新への更新手順
outdateでlatest（最新版）のバージョンを確認。
↓
package.jsonファイルのdependenciesのバージョンを直接編集。
↓
updateコマンド実行。

アップデートするバージョンを細かくコントロールするには便利ですが、いつもの『アップデート』だと思っていると不便です。

そこで、npm-check-updatesパッケージを使って最新版にアップデートします。

インストール
npm install -g npm-check-updates

プロジェクトに入れる必要はないので、-gをつけます。

すると、ncuコマンドが使えるようになるので

package.jsonファイルの更新
ncu -u

を実行して、package.jsonのバージョンをlatestに更新します。

パッケージ更新
npm update

を実行すれば、すべてのパッケージを最新版に更新します。

ncu -uでは、『＾』『~』の範囲内のlatestは更新しません。

（もともとupdateコマンドで更新できるため）

package.jsonのすべてのパッケージを最新版に書き換えるには

all update
ncu -a

を使います。

まとめ

npmの使い方はこれだけではありません。テストの実行、タスクランナーの操作など、大事なことはたくさんあります。

今回は、パッケージ管理の部分の最低限の使い方だけをご紹介しました。

そのほかのくわしい使い方はおいおい追記していく予定です。

（別記事になると思います。）

npm公式ページ

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ
前の投稿
JavaScript ES2015, アロー関数ってなんだ？
最新Node.jsをOS全体のシステムにインストールする方法
次の投稿
  1. ホーム /
  2. 中級者 - Webマスターへの道 /
  3. JavaScript /
  4. Node.js /
  5. Node.js npm, パッケージ管理の使い方。今やWebで必須のコマンド。

JavaScriptの本

post-cta-image

『自分は向いていない』『やってみたけど挫折した』『プログラマだけどjavaScriptは未経験』『フロントエンドエンジニアを目指したい』など、いろいろなタイプに合わせた書籍を集めました。

どうしてもネットで自分で調べるのが苦手という人におすすめです。

将来的には、書籍を買わずにネット上の公式ドキュメントで情報収集できるようなものを選んでいます。

コメントを残す

*

新着記事