WEB開発入門者でnpmをほとんど使ったことない人、npmがよくわかならくてどう扱っていいかわからない人向けの文書です。ホームページ制作やWEB開発で最も身近なパッケージの一つであるjQueryパッケージを使ってnpmのパッケージ管理の基礎を説明しています。

npmのインストール

npmを使用した経験がない人はまずnpmのインストールを行う必要があります。MACを使用している人は下記を参考に行ってください。

npmとは

npmはnode package manager(ノードパッケージマネージャ)の略で、Javascriptのパッケージを効率良く管理するためのツールです。ネットで検索するとnode.jsのパッケージを管理するツールというふうに記載されている場合が多く、node.jsを使わない場合はこのツールは必要ないのかと混乱する人もいるかと思います。ここから先は、node.jsのことは一度忘れて読み進めてください。

jQueryの読み込みについて

初心者がjQueryを使用する場合、通常は以下の2つの方法が考えられます。

  • cdnを利用してjQueryの読み込む方法
  • jQueryのファイルをローカルにダウンロードして読み込む方法

cdnを利用したjQueryの読み込み

cdnのURLを下記のようにscriptタグに指定すればファイルをダウンロードすることなくjQueryを利用することができます。


<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

jQueryのファイルをローカルにダウンロード

jQueryのサイトにアクセスして、jQueryのファイルをダウンロード。下記のようにローカルに保存したjQueryファイルを指定して読み込むことでjQueryを利用することができます。


<script src="js/jquery-3.4.1.js"></script>

npmを使用したjQueryの読み込み

npmを使用した場合にどのようにjQueryを使用するか確認していきます。

npmを使用してjQueryをインストールする場合は、jQueryのダウンロードページに記載されているようにコマンドラインで行います。

npmによるjQueryのインストール
npmによるjQueryのインストール

記載通りnpm install jqueryコマンドを実行すると実行したディレクトリ直下にjQueryに関連するファイルがダウンロードされ保存されます。


mac$ npm install jquery
npm WARN saveError ENOENT: no such file or directory, open '/Users/mac/Documents/test/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/mac/Documents/test/package.json'
npm WARN test No description
npm WARN test No repository field.
npm WARN test No README data
npm WARN test No license field.

⸨            ░░░░░░⸩ ⠏ postinstall: WARN test No license field.

実行するとpackage.jsonがnpmを実行したディレクトリに存在しないので警告エラーが表示されます。ダウンロードが失敗したエラーの表示ではないので、lsコマンドを実行するとjQueryのパッケージがダウンロードされていることを確認することができます。

package.jsonがなくてもインストールを行うことができます。

npmインストールを実行するとnode_modulesディレクトリとpackage-lock.jsonファイルが作成されます。

※index.html, jsディレクトリはコマンド実行前から存在するファイル。


mac$ ls
index.html		node_modules
js			package-lock.json

node_modulesを中を見てみるとnode_modules/jquery/distの下にjQueryのファイルが保存されていることが確認できます。


mac$ ls
core.js			jquery.min.map		jquery.slim.min.map
jquery.js		jquery.slim.js
jquery.min.js		jquery.slim.min.js

ここに保存されているファイルを指定すれば、jQueryを読み込んで使用することができます。


<script src="node_modules/jquery/dist/jquery.js"></script>

ローカルファイルのjQueryを使う場合は、jQueryのサイトからファイルのダウンロードを行い、適切な場所に保存する必要がありました。npm installでjQueryをインストールするとコマンド1つでjQueryを使用するために必要なファイルをダウンロードすることができることがわかりました。

またパッケージが必要なくなった場合は、npm uninstallコマンドを使用することでパッケージを削除することができます。


mac$ npm uninstall jquery
npm WARN saveError ENOENT: no such file or directory, open '/Users/mac/Documents/test/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/Users/mac/Documents/test/package.json'
npm WARN test No description
npm WARN test No repository field.
npm WARN test No README data
npm WARN test No license field.

removed 1 package in 0.545s
found 0 vulnerabilities

このようにパッケージのインストール(追加)、削除がコマンド一つで簡単に行えるということからもnpm(node package manager)は効率的なパッケージ管理ツールだということを理解できます。

npmのinstall, uninstallコマンドを使うことでパッケージの追加/削除ができることが確認できたので、次はnpmコマンド実行時に表示されていたpackage.jsonについて確認していきます。

npmのpackage.jsonを作成する

npm initコマンドを使うとパッケージ管理に必要なpackage.jsonファイルを作成することができます。npm initを実行すると対話式に質問に答える必要がありますが、特に入門者はEnterを押すだけの結果になるので、対話が行われないnpm init –yesコマンドを実行します。実行すると実行したフォルダにpackage.jsonファイルが作成されます。

作成されたpackage.jsonファイルは拡張子の通りJSONで記述されています。本文書ではパッケージ管理のみに焦点を当てているので、下記のキーや設定値についての説明は省かせてもらいます。


mac$ npm uninstall jquery
mac$ npm init --yes
Wrote to /Users/mac/Document/test/package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.jsonがある場合のインストール

今回は、package.jsonがある状態でjQueryのインストールを行います。メッセージは出力されていますが、package.jsonファイルの存在に関するエラーは消えています。またjqueryの3.4.1のバージョンがダウンロードされていることもわかります。


mac$ npm install jquery
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

+ jquery@3.4.1
added 1 package from 1 contributor and audited 1 package in 1.082s
found 0 vulnerabilities

package.jsonの中身を確認するとキーdependenciesが新たに追加されインストールしたjqueryとそのバージョン情報が記載されていることがわかります。


  "dependencies": {
    "jquery": "^3.4.1"
  }
}
dependenciesへの登録は、npm installコマンドに-saveをつけなくても登録されます

これまで1つのパッケージのみインストールを行ってきたので、別のパッケージであるbootstrapをインストールしてみましょう。コマンドはこれまでと同様にnpm installでその後ろのパッケージ名をbootstrapに変更しています。


mac$ npm install bootstrap
npm WARN bootstrap@4.3.1 requires a peer of popper.js@^1.14.7 but none is installed. You must install peer dependencies yourself.
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

+ bootstrap@4.3.1
added 1 package from 2 contributors and audited 2 packages in 4.652s
found 0 vulnerabilities

実行ログには、boostrap@4.3.1はpropper.jsが必要だと表示されています。しかし、bootstrapのインストールには成功しています。

package.jsonに手入力したパッケージのインストール

先ほどのbootstrapのインストールで、propper.jsに関するエラーが表示されていたので、propper.jsをインストールするためにpackage.jsonにpropper.jsの情報を記述します。これまでのbootstrapとjqueryの記述を参考にパッケージ名とバージョンを入力します。


  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.14.1"
  }

今回はpackage.jsonにpopper.jsを手動で追加したので、パッケージ名を指定せずにnpm installを実行します。package.jsonの記述に誤りがある場合はエラーが表示されます。エラーが出た場合は修正を行い、再度npm installを実行してください。


mac$ npm install
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

added 1 package from 2 contributors and audited 3 packages in 2.657s
found 0 vulnerabilities

インストールしたパッケージはnpm listコマンドで確認することができます。


mac$ npm list
test@1.0.0 /Users/reffect/Desktop/test
├── bootstrap@4.3.1
├── jquery@3.4.1
└── popper.js@1.15.0

個別のパッケージの情報についてはnpm infoで確認することができます。


mac$ npm info jquery

jquery@3.4.1 | MIT | deps: none | versions: 50
JavaScript library for DOM operations
https://jquery.com

keywords: jquery, javascript, browser, library

package.jsonを再利用してインストール

先ほどとは異なる場所に全く同じパッケージをインストールしたい場合は、package.jsonを利用するで同じパッケージを自動でインストールすることができます。

先ほど3つのパッケージをインストールした後のpackage.jsonを別のディレクトリに移動またはコピーし、npm initコマンドを実行します。


mac $ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

added 3 packages from 5 contributors and audited 3 packages in 1.909s
found 0 vulnerabilities

npmでパッケージ管理をしていない場合、別の場所でパッケージを利用しようとするとダウンロードしたファイルをコピーしたり、再度サイトからダウンロードする必要があります。しかし、パッケージ管理のnpmのpackage.jsonを使えば別の場所でも簡単に同じ環境を作ることができます。

まとめ

npmのコマンドを掲載しているサイトはたくさんありますが、実際の動作を詳細に記載しているページはあまりないかと思います。今回jQueryのnpmのインストールを通して、できるだけ詳細にnpmの動作を記載しているので、npmのパッケージ管理の基本については理解できたのではないでしょうか。