各プログラミング言語では、開発を行っていく際に、単純にその言語のみを使ってプログラムを書ことはほとんどなく、多くの場合、複数のフレームワークやプラグインなどと併用して開発を行っていきます。
また、フレームワークやプラグインなどを管理するために「パッケージマネージャー」というものが使われています。

現在JavaScriptのパッケージマネージャーには「npm」と「yarn」があり、JavaScriptのエコシステムとしては最も一般的なものです。
言語の知識や技術の習得はもちろん大切ですが、これらのパッケージ管理の仕組みを理解することができると、応用的なプログラミングを実現することができます。

そこで今回は、パッケージマネージャーの概念とnpmの基本的な使い方について解説していきます。

パッケージマネージャー

「パッケージマネージャー」とは、各ソフトウェアのインストールや更新などの操作、また、他のソフトウェアとの依存関係を管理するためのツールです。

フレームワーク1つとっても、基本的には大量のプログラムで構成されていて、そのプログラムを一まとめにしたものを「パッケージ」と呼びます。

パッケージマネージャーを使うと、コマンドを入力するだけで、フレームワークやプラグインなどのあらゆるソフトウェアのインストールを高速に行えるようになります。

npm

「npm」とは、「Node Package Manager」の略で、JavaScriptで幅広く使われているパッケージマネージャーです。
名前にもNodeとあるように、Node.jsにおいてデフォルトのパッケージマネージャーとなっています。
Node.jsが2009年に誕生した翌年の2010年にnpmが導入されました。

npmで使われているコマンドを入力するだけで、パッケージの管理を簡略化できるようになります。
まずは、比較的歴史のあるnpmの操作を知っておくと良いでしょう。

npmのインストール

npmを使用するには、パソコンにNode.jsをインストールする必要があります。
逆に言うと、Node.jsがインストールされていれば、npmのコマンドが使えるようになります。

以下のリンクよりインストールを行ってください。
https://nodejs.org/ja/

インストール手順はこちらの記事を参考にしてください。

インストールが完了したら、ターミナル でバージョンを確認してみましょう。

$ npm -v
7.15.1
//出力結果は、インストールされているバージョン、インストール時期によって異なります

このようにバージョンが表示されていれば、インストールが完了されたということになります。

package.jsonファイルの作成

npm操作の準備が整ったので、実際に使用してみましょう。
JavaScript上でのプロジェクトでは、「package.json」というファイルを通じてパッケージの管理を行っています。

まずは、ルートディレクトリに「npm-test」というディレクトリを作成し、移動します。

$ mkdir npm-test
$ cd npm-test

専用のディレクトリに移動ができたら、package.jsonを作成します。作成には、「init」のコマンドを入力します。

$ npm init

すると、以下のようなpackage.jsonの内容を確認するための英文が表示されます。

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 init` 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: (npm-test)

Enterキーを押していくと1つずつ情報が表示され、最後に「Is this OK? (yes)」の質問が表示されることが確認できます。

package name: (npm-test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /ルートディレクトリ/npm-test/package.json:

{
  "name": "npm-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のファイルの作成ができたことを確認できます。

$ ls
package.json

Enterの入力が面倒な場合や、確認が必要ない場合は、以下を入力することで、これらの質問なしにpackage.jsonのファイルを作成することが可能です。

$ npm init -y

デフォルトのpackage.jsonには、ファイル作成時に確認した情報が記述されています。

$ cat package.json
{
  "name": "npm-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

npmパッケージのインストール

package.jsonファイルの生成ができたら、実際に何かパッケージをインストールしてみましょう。
npmでインストールを行うには、「npm install パッケージ名」というコマンドを使います。

ここでは試しに「lodash」というパッケージをインストールしてみます。

$ npm install lodash

インストールが完了すると、npm-testディレクトリに「node_modules」というフォルダと「package-lock.json」というファイルが新しく作成されていることに気が付きます。

$ ls
node_modules package-lock.json package.json

node_modulesは、インストールしたパッケージと、それに関連する依存パッケージが保存されているフォルダです。
package-lock.jsonは、各プロジェクトが依存しているパッケージの正確なバージョン情報が記録されているファイルです。

また、1つだけではなく、「npm install パッケージ名1 パッケージ名2 パッケージ名3」のようにして、複数のパッケージをインストールすることも可能です。
ここでは「react」と「redux」の2つのパッケージをインストールしてみます。

$ npm install react redux

インストールが完了したら、再度package.jsonを確認してみましょう。
すると、「”dependencies”」の中にインストールしたパッケージと、それらのバージョンの範囲情報が追加されているはずです。

$ cat package.json
{
...
  "dependencies": {
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "redux": "^4.1.1"
  }
}

これで任意のパッケージが使用できるようになりました。

知っておくと良いコマンド

npmは、パッケージのインストールをするために良く使用されますが、その他にもアップデートやアンインストールなどもかんたんなコマンドで実現可能です。

npmのその他の基本コマンドは以下を参考にしてください。

・バージョン確認:npm -v
・初期化:npm init
・パッケージのインストール:npm install パッケージ名
・パッケージをグローバル領域でインストール:npm install -g パッケージ名
・開発環境のみで必要なパッケージのインストール:npm install –save-dev パッケージ名
・パッケージのアップデート:npm update パッケージ名
・パッケージのアンインストール:npm uninstall パッケージ名
・ヘルプ機能:npm help
・パッケージの一覧化:npm ls など

まとめ

今回はパッケージマネージャーの概念と共に、npmのインストール方法について解説しました。

npmが使えるようになると、パッケージをかんたんにインストールできるだけでなく、メモリ消費量の効率化にも期待ができます。

Node.jsをインストールすると、npm自体も自動でインストールされるため、ぜひ触ってみてください。

JavaScript関連記事