12周年記念パーティ開催! 2024/5/10(金) 19:00

きちんとわかる、npm install 第1回 PCにコマンドをインストールする

普段何気なく使っているNode.jsのパッケージツール「npm」。パッケージのインストールに使うnpm installの使い方と動作を解説します。まずはグローバルインストールからです。

発行

著者 中村 享介 Jamstackエンジニア
きちんとわかる、npm install シリーズの記事一覧

はじめに

最近のフロントエンドでは、当たり前のように使っているNode.jsのnpmコマンド。その中でもnpm installはとりあえず、パッケージ(ライブラリ)をインストールのため、最初に実行するものという認識だけで、なんとなく使っている人も多いのではないでしょうか。

このシリーズでは、npm installにどのようなオプションがあり、どのような動作をするのかを中心に解説します。きちんと仕組みを知っておくことで、生成されたpackage-lock.jsonをどう扱えば良いのか、困った時にはどうすれば良いのかわかるようになります。

また、もう1つのインストールコマンドであるnpm ciの仕組み*を知っておくと、既存プロジェクトを一時的に試す場合やCIを設定・チューニングする際に便利です。

*注:npm ci

シリーズの次回以降で解説する予定です。

npm install の動作

npm installは指定するオプションによって大きく動作が変わります。主に以下の3つの用途で使われます。

  1. 指定のパッケージをグローバルインストールする
  2. 指定のパッケージをローカルインストールする
  3. package.jsonに記載された依存パッケージをまとめてローカルインストールする

なお、npm installnpm inpm addというエイリアスがあります。つまりnpm iに置き換えて実行しても動きます。ただ、記事では省略して書いてしまうと1文字のコマンドやオプションばかりになり、わかりづらいのでnpm installに統一しています。

そのような理由でnpm installを使っているので、実際の開発ではnpm inpm 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 prefix

Macで公式サイトから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@next

GitHubなどの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#c17c664f5e773115ea0676f14aab8537c590a907

GitHub以外のgitリポジトリからのインストール

GitHub以外でもgitリポジトリであればインストールできます。その場合は、{対応しているサービス名}:をつけます。

  • npm install gitlab:mygitlabuser/myproject
  • npm install bitbucket:mybitbucketuser/myproject
  • npm install gist:101a11beef

gitをpullするときに使うようなプロトコルを指定したURL形式もあります。

ローカルにあるディレクトリや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にコマンドを入れるのに使う、グローバルにパッケージをインストールすることについて詳しく解説しました。

次回はプロジェクトで使うパッケージをインストールする、ローカルインストールについて解説します。

中村 享介
PixelGrid Inc.
Jamstackエンジニア

2009年、JavaScriptの会社として株式会社ピクセルグリッドを設立。 多数のWebリニューアル、新規立ち上げを取り仕切った経験を持ち、情報設計、フロントエンド、クラウド活用、開発フローの効率化を得意とする。 Webをより発展させるため、新しくブラウザに実装された機能の活用事例を数多く生み出しつつ、日々、クラウドサービスを利用した効率のよい制作・開発手法の試行錯誤を続けている。現在の興味はWeb Componentsを使ったマークアップの改善とJamstack。 著書に『WebクリエイティブのためのDOM Scripting』(単著:毎日コミュニケーションズ、2007年)など。ここ数年は書籍の執筆をせず、フロントエンド技術情報メディア「CodeGrid」で精力的に執筆活動を行っている。

この記事についてのご意見・ご感想 この記事をXにポストする

全記事アクセス+月4回配信、月額880円(税込)

CodeGridを購読する

初めてお申し込みの方には、30日間無料でお使いいただけます