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

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

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

パッケージマネージャー

パッケージマネージャーとは、各ソフトウェアのインストールや更新などの操作、また他のソフトウェアとの依存関係を管理するためのツールです。
フレームワーク1つとっても、基本的には大量のプログラムで構成されていて、そのプログラムを一まとめにしたものをパッケージと呼びます。

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

npm

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

>>npm

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

npmのインストール

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

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

インストール手順はこちらの記事で紹介していますので、参考にしてください。

2021.10.07

2022.05.26

【JavaScriptの応用】サーバーサイドで使用できる「node.js」とは？インストール手順も解説

JavaScriptと言えば、Web制作やWebアプリに利用されるスクリプト言語のことで、表示部分を制御するクライアント言語と呼ばれています。最近では、JavaScriptがサーバー言語としても利用されているのです。 そこで今回は、サーバーサイドで利用できるJavaScriptの中でも、初心者...

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

$ 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：各プロジェクトが依存しているパッケージの正確なバージョン情報が記録されているファイル

また、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のエコシステム
・パッケージマネージャー -Yarn