Node.jsに含まれているnpm（パッケージ管理ツール）の基本的な使い方について解説しています。
npmとは開発するプロジェクトにライブラリなどを簡単に導入するための機能です。Node.jsをインストールするとnpmも同時にインストールされます。
インストール方法についてはこちらで詳しく解説しています。
Node.js command promptを起動しよう
Windows10のケースで解説しています。他のOSを使用している場合は、そのOSのアプリケーション起動方法に従ってください。
Node.js command prompt
スタートメニューからNode.jsの欄を探してください。そしてNode.js command promptを起動してみましょう。
起動後
黒い文字だけの画面が起動されると思います。npmは基本的にこのコマンドプロンプトを利用して操作していきます。
以下のコマンドを入力してEnterを押してみてください。
node -v
上記のようにバージョンが表示されると思います。これはあなたの環境にインストールされているNode.jsのバージョンです。
テストプロジェクトを作成する
npmの使い方を覚えるために、テストプロジェクトを作成してみましょう。どこでも構いませんので、新しくフォルダ（ディレクトリ）を作成してみてください。
この解説ではこのようにフォルダを作成しています。
Cドライブ > xampp > htdocs > test
フォルダが完成しましたら、Node.js command promptに戻りましょう。そして cdコマンドを利用して、今作成したフォルダの場所へ移動します。
cdコマンドというのは、ディレクトリ（フォルダ）を移動するためのコマンドです。主に利用するのは以下のコマンドです。よく利用しますので覚えておきましょう。
cd test
現在のディレクトリ内に存在するtestディレクトリに移動する。
cd ../
現在のディレクトリからひとつ上のディレクトリに移動する。
cd ../../
現在のディレクトリからふたつ上のディレクトリに移動する。
cd /
ルートディレクトリに移動する。例えば今、Cドライブ内のどこかのフォルダにいる場合は、Cドライブのトップに移動します。
現在、こちらの環境では上記のように表示されています。これはCドライブの中にある、Usersフォルダの中にある、AZフォルダに現在いるということです。
ここからさきほど作成したtestフォルダにcdコマンドで移動してみましょう。
cd ../../xampp/htdocs/test
これは現在のディレクトリからふたつ上のディレクトリに移動し、さらにxampp/htdocs/testに移動するというコマンドです。個別に cd ../../、cd xampp/htdocs/testと2回打っても同じ結果になります。
移動ができたら以下のような表示になります。
C:\xampp\htdocs\test>
ちなみにバックスラッシュと￥記号は同じものと考えてください。Windowsのコマンドプロンプトではバックスラッシュの代わりに￥記号が表示されます。
あなたが作成したテストプロジェクトのフォルダに移動できたら、次に進んでください。
package.jsonを作成する
npmを使うためにはまずpackage.jsonというファイルを作成しなければなりません。簡単に作成するコマンドが用意されていますので、以下を入力してみてください。
npm init
英語がズラズラと表示されると思います。これは対話式でpackage.jsonを作成するコマンドで、質問に答えていくとpackage.jsonが作成される仕組みになっています。
とりあえずテストプロジェクトなので、なにも入力せずにEnterだけを何度も押し続けましょう。内容について今は理解する必要はありません。
name: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
最後の質問でEnterを押すと、テストプロジェクトのフォルダ内にpackage.jsonというファイルが作成されます。エディターで開いて中身をチェックしてみましょう。
これでnpmを利用する準備は整いました。
パッケージをインストールする
npmを使ってパッケージをインストールしてみましょう。今回はテストプロジェクト内にjQueryをインストールしてみます。以下のコマンドを入力してみてください。
npm install jquery --save
すると以下のような表示になると思います。
C:\xampp\htdocs\test>npm install jquery --save test@1.0.0 C:\xampp\htdocs\test `-- jquery@3.2.1 npm WARN test@1.0.0 No description npm WARN test@1.0.0 No repository field. C:\xampp\htdocs\test>
テストプロジェクトのフォルダをチェックしてみてください。node_modulesというフォルダが新たに作成されています。その中をのぞくと、jqueryというフォルダも存在しています。
npmではnode_modulesというフォルダ内に、インストールしたパッケージを保存していきます。今回はこれでjQueryがインストールされたということです。
次にpackage.jsonを再度エディターで開いてみてください。
"dependencies": {
"jquery": "^3.2.1"
}
このような表示が追加されていると思います。これはテストプロジェクトにjQueryのバージョン3.2.1をインストールしました、という記録です。npmを使って様々なパッケージをインストールしていくと、ここにどんどん追加されていきます。
この記録をチェックすると、自分がなんのパッケージ（ライブラリ）のどのバージョンをインストールしたのかが、ひと目でわかるようになります。
npmの基本的なコマンド
npmを使う上で必要になる基本的なコマンドについて解説します。
npm install パッケージ名
パッケージをインストールするコマンドです。–save または –save-dev をつけずに使うことはおすすめしません。
npm install パッケージ名 --save
パッケージをインストールするコマンドに –save というオプションを追加しています。これをつけると、package.jsonのdependenciesに記録が残るようになります。
本番環境にアップロードして利用するパッケージをインストールする場合に –save をつけてください。
npm install パッケージ名 --save-dev
–save-dev は開発環境だけで使うパッケージをインストールする時につけるオプションです。本番環境にアップロードしなくてもいいパッケージは –save-dev をつけてインストールしましょう。
package.jsonにdevDependenciesとして記録されます。
npm install
パッケージ名を指定しない場合は、package.jsonの dependencies と devDependencies に記載されているパッケージをまとめてインストールします。
npm update
これまでにインストールしたパッケージを、まとめて新しいバージョンにアップデートします。個別にアップデートしたい場合は updateの後にパッケージ名を記述してください。
npm uninstall パッケージ名
インストールしたパッケージをアンインストールします。
-g オプションについて
ブログなどでnpmについて書かれた記事に -g というオプションがついていることがありますが、これはグローバルというNode.jsの一番上の階層にインストールするオプションです。
様々なプロジェクトで共通して利用するようなパッケージをインストールする場合に使うオプションで、基本的には使わなくていいものだと考えてください。
Node.js command promptの初期フォルダを設定する
スタートメニューのショートカットから普通にNode.js command promptを起動した場合、Windows10では最初にユーザーのフォルダが開かれると思います。
毎回、開発をするときにcdコマンドで開発しているプロジェクトに移動するのはめんどうなので、アプリケーションを開いた時に、指定のフォルダを開くように設定しましょう。
スタートメニュー
- スタートメニューでNode.jsを開く
- Node.js command promptを右クリック
- その他を選ぶ
- ファイルの場所を開く
エクスプローラーが開きます
ファイルの場所を開くとエクスプローラーが開きます。ここでNode.js command prompt上で右クリックを押して出てきたメニューから、ショートカットの作成を選びましょう。
ここにショートカットを作成することはできません。デスクトップ上に作成しますか？と尋ねられますので、はいを押してください。
デスクトップに作成されたNode.js command promptのショートカット上で右クリックを押し、プロパティを選んでください。
ショートカットのプロパティ
プロパティ内部の作業フォルダーの欄を変更しましょう。
"C:\Program Files\nodejs\" ↓ "C:\xampp\htdocs\test\"
開きたいフォルダのアドレスに変更してから、OKを押してプロパティを閉じてください。次回からそのショートカットを使ってNode.js command promptを起動すると、指定したフォルダの場所が開いた状態で開始されます。
最後に
基本的なnpmの使い方は理解してもらえたのではないでしょうか。
上記のテストプロジェクトでは、package.jsonのプロジェクト名は test で、ライセンスもISC（フリーソフトウェアライセンス）と記述されていますが、一人で開発を進める場合はそのままでも問題はありません。
しかしプロジェクトを複数人で開発する場合や、ネットに公開する場合は、正式な書き方でpackage.jsonを作成するようにしましょう。以下のサイトを参考にしてもらうとわかりやすいと思います。
ちなみにGame Usersのpackage.jsonはこのようになっています。
npmについてさらに詳しく知りたい方は、公式サイトのドキュメント（英語）を確認してください。
以上でnpmの解説を終わります。
