きちんとわかる、npm install 第1回 PCにコマンドをインストールする
普段何気なく使っているNode.jsのパッケージツール「npm」。パッケージのインストールに使うnpm installの使い方と動作を解説します。まずはグローバルインストールからです。
はじめに
最近のフロントエンドでは、当たり前のように使っているNode.jsのnpmコマンド。その中でもnpm installはとりあえず、パッケージ（ライブラリ）をインストールのため、最初に実行するものという認識だけで、なんとなく使っている人も多いのではないでしょうか。
このシリーズでは、npm installにどのようなオプションがあり、どのような動作をするのかを中心に解説します。きちんと仕組みを知っておくことで、生成されたpackage-lock.jsonをどう扱えば良いのか、困った時にはどうすれば良いのかわかるようになります。
また、もう1つのインストールコマンドであるnpm ciの仕組み*を知っておくと、既存プロジェクトを一時的に試す場合やCIを設定・チューニングする際に便利です。
*注：npm ci
シリーズの次回以降で解説する予定です。
npm install の動作
npm installは指定するオプションによって大きく動作が変わります。主に以下の3つの用途で使われます。
- 指定のパッケージをグローバルインストールする
- 指定のパッケージをローカルインストールする
- package.jsonに記載された依存パッケージをまとめてローカルインストールする
なお、npm installはnpm iやnpm addというエイリアスがあります。つまりnpm iに置き換えて実行しても動きます。ただ、記事では省略して書いてしまうと1文字のコマンドやオプションばかりになり、わかりづらいのでnpm installに統一しています。
そのような理由でnpm installを使っているので、実際の開発ではnpm iやnpm addに置き換えて使ってもらっても問題ありません。
このシリーズでは、3つの用途を順番に見ていきます。なお、以降の記事はNode.jsのバージョンは12.18.0、npmのバージョンは6.14.4を元に執筆しています。
指定のライブラリをグローバルインストールする
主にコマンドでテンプレートからファイルを生成したり、サービスをコマンドで操作するためのツールをインストールするにはグローバルインストールを使います。プロジェクトで使うライブラリのインストールではなく、PCに新しいコマンドをインストールする方法だと思っておくとよいでしょう。
次のコマンドを実行すると、npmレジストリ*と呼ばれる、インターネット上のnpmのライブラリを管理する場所から指定のパッケージの最新版がダウンロードされ、PCにインストールされます。
*注：npmレジストリ
npmレジストリでデフォルトとして設定されているのは、npmです。独自に開発したライブラリは、必ずしもここで管理しなければいけないというわけではなく、自分で独自のレジストリを運用することもできます。
$ npm install -g {パッケージ名}オプションの-gは--globalとしても同じですが、ほとんどのツールは-gで案内されています。
コマンドベースのツールの使い方で紹介されるのは、このインストール方法です。たとえば、具体的には以下のようなツールがあり、どれもインストールのチュートリアルで-gをつけてインストールする方法が紹介されています。
グローバルインストールは、PC上のどのディレクトリからもコマンドが実行できる場所（PATHが通った場所）にインストールされます。特定のプロジェクトではなく、プロジェクトを問わずよく使う可能性のあるコマンドは、グローバルインストールしておくと便利です。
ただし、プロジェクトに依存しないコマンドとして使いたいツールなら良いですが、PCのどこからでも使えるようにインストールするという仕組み上、プロジェクトごとにバージョンを切り替えたりはできません。また、同じプロジェクトのメンバーとインストールするツールを揃えるのも難しくなるので注意しましょう。そういった用途では、次に紹介するローカルインストールがおすすめです。
筆者は本当によく使うツールである場合と、学習中など一時的に試す場合以外はグローバルインストールではなく、ローカルインストールするようにしています。
グローバルインストール先を変更する
グローバルインストールされたパッケージの場所は、次のコマンドで表示できます。
$ npm config get prefixMacで公式サイトからNodeをダウンロードしてインストールした場合は/usr/localになっているはずです。
この場所はroot権限が必要な場所ですので、グローバルインストール時にroot権限で実行するsudoが必要になってしまいます。
$ sudo npm install -g {パッケージ名}そこで、グローバルインストールの先を自分のホームディレクトリに変えておくとsudoをつけなくてもインストールできるようになります。
たとえば、自分のホームディレクトリの.npm_globalに変えるには、次のようにconfigを設定します。
$ npm config set prefix=$HOME/.npm_globalこのコマンドを実行すると、~/.npmrcに設定が追加されます。
prefix=/Users/kyosuke/.npm_globalなお、nodenvなどNode.jsのバージョン管理ツールを使用した場合はこのような設定をしなくても、そもそもグローバルインストールはホームディレクトリに保存されます。
npm install時のパッケージ指定
次にもう少し、{パッケージ名}の部分についての指定方法を解説します。
npm installで指定する{パッケージ名}は、どこにあるパッケージをインストールするかで、主に3つほどパターンがあります。
- npmレジストリで公開されているパッケージのインストール
- GitHubなどのgitリポジトリからのインストール
- PC上にあるパッケージのインストール
これは先ほど解説したグローバルインストールでも、次回解説するローカルインストールに共通の指定方法です。
npmレジストリで公開されているパッケージのインストール
通常は、次のようにnpmに登録されているパッケージ名を指定します。
$ npm install react前述したように、グローバルインストールならパッケージ名の前に-gをつけるだけです。ただ、パッケージによってはグローバルインストールされることを想定しないものも多いので注意してください。コマンドによるインターフェイスが用意されているものでないとグローバルインストールする意味はありません。
また最近は@で始まるスコープがついたパッケージもあります。
$ npm install @11ty/eleventyこの、npmレジストリのパッケージを指定するというのが通常の使い方です。
また、これらのnpmで公開されているパッケージでは後ろにバージョンを指定できます。バージョンはメジャーバージョンだけ、マイナーバージョンまでなど、柔軟に指定でき、指定の中での最新版がインストールされます。
たとえば、次のコマンドはreactのバージョン16の中の最新版をインストールします。 この指定は最新版だと何かしらの問題があって動かないため、古いバージョンをインストールしたい場合によく使います。
$ npm install react@16また、次期バージョンを試したい場合にも便利です。
たとえばvueの次期バージョンである3をインストールするには次のようにバージョンを指定します。新しいバージョンを試す場合は、ベータとしてリリースされているバージョンを指定するだけです。
$ npm install [email protected]また、ほかにもリリースの最新版や次のバージョンの最新版という指定のためにtagが用意されている場合があり、そのtagを指定してインストールすることもできます。
用意されているtagはnpmのサイトのパッケージのページでxxx Versionsとなっているタブで確認できます。
vueでは現在、latest,nextというタグが用意されているので、以下のコマンドで次期バージョンの最新版がインストールできます。
$ npm install vue@nextGitHubなどのgitリポジトリからのインストール
npmレジストリではなく、GitHubリポジトリから直接インストールすることもできます。
npmで公開されている最新版にバグがあって困っているが、GitHubのソースでは修正されている場合や、そもそもnpmで公開されていない自作のパッケージなどをインストールする場合に便利です。
以下では、日付ライブラリであるDay.jsをnpmで公開されているものではなく、GitHubからインストールしています（通常はnpmのリリース版を使うべきですので理由がなければこのようなインストールはしないでください）。
$ npm install iamkun/dayjsスコープがついたパッケージのインストールに似ていますが、@がつかないものはGitHubからのインストールになりますので注意してください。
GitHubからのインストールの場合は、ブランチ名を指定することもできます。指定するには#に続いてブランチ名を入れます。
$ npm install iamkun/dayjs#masterまたコミットハッシュを入れ、特定の時点でのパッケージをインストールすることもできます。
$ npm install iamkun/dayjs#c17c664f5e773115ea0676f14aab8537c590a907GitHub以外のgitリポジトリからのインストール
GitHub以外でもgitリポジトリであればインストールできます。その場合は、{対応しているサービス名}:をつけます。
npm install gitlab:mygitlabuser/myprojectnpm install bitbucket:mybitbucketuser/myprojectnpm install gist:101a11beef
gitをpullするときに使うようなプロトコルを指定したURL形式もあります。
npm install git+https://[email protected]/npm/cli.git
ローカルにあるディレクトリやtgzに固めたパッケージのインストール
そのほか、package.jsonのあるローカルのディレクトリを指定したり、tgzに固めたパッケージを指定してインストールもできます。
ローカルのディレクトリ指定は、コマンドツールを開発中にグローバルインストールしておくと便利です。
また、tgz形式で公開されているパッケージをインストールすることもできます。ローカルに置いてあるtgzでもよいですし、Webで公開されているtgzを直接指定もできます。
たとえば、経済産業省が公開したIMIコンポーネントツールはnpmレジストリではなく、tgzで公開されています。
このツールのうち住所変換コンポーネントをインストールするには、次のようにします。
npm install https://info.gbiz.go.jp/tools/imi_tools/resource/imi-enrichment-address/imi-enrichment-address-2.0.0.tgzグローバルインストールされたパッケージの削除
不要になった場合など、グローバルインストールしたツールを削除するにはnpm uninstallに-gオプションをつけてパッケージを指定します。
$ npm uninstall -g {パッケージ名}また、今現在グローバルインストールしたパッケージの一覧を表示するには以下を使います。
$ npm ls -g --depth=0次のようにパッケージがリストになって表示されます（この例ではパッケージは少ないようです）。
├── [email protected]
├── [email protected]
└── [email protected]グローバルインストールしたパッケージはバージョンの古いものが残りがちですので、定期的に見直し、不要なら削除すると良いでしょう。
まとめ
今回は、npm installの機能の中でも、PCにコマンドを入れるのに使う、グローバルにパッケージをインストールすることについて詳しく解説しました。
次回はプロジェクトで使うパッケージをインストールする、ローカルインストールについて解説します。