前回までのあらすじ

この記事は続編となっています。シリーズ一覧はこちら:

Part 1 では JavaScript のモジュール機能の代表的な2つの仕様を紹介し、Part 2 ではブラウザや Node.js で実際にモジュールのインポートやエクスポートをする方法を紹介しました。

前回までは自分で作ったモジュールを自分で使う方法しか紹介しませんでしたが、今回はサードパーティー製のモジュールを使う方法として、npm パッケージ について紹介します。

サードパーティー製モジュールを使用する

サードパーティー製モジュールを使用するための Node.js の仕様を紹介したのち、実際に使用する方法を紹介します。

仕様

Part 2 で紹介した通り、Node.js では require() や import 構文でモジュールをインポートできます。それらの構文でモジュールの読み込みを行う対象には node_modules という名前のディレクトリも含まれます。

If the module identifier passed to require() is not a built-in module, and does not begin with '/', '../', or './', then Node.js starts at the directory of the current module, and adds /node_modules, and attempts to load the module from that location. Node.js will not append node_modules to a path already ending in node_modules.

そのため、node_modules ディレクトリにサードパーティー製のモジュールを置いて、それをインポートすることが多いのですが、手動で node_modules ディレクトリに置くのではなく、 パッケージマネージャー を使用して パッケージ をインストールして使うことが一般的です。

ですので、サードパーティー製のモジュールを使いこなすためには、「パッケージ」「パッケージマネージャー」「パッケージレジストリ」について理解する必要があります。それぞれ簡単に説明するとこんな感じです。

パッケージ
- モジュールと package.json を含むディレクトリ
- 例: React
パッケージマネージャー
- パッケージのインストールなどを行うためのツール
- 例: npm, yarn, pnpm など
パッケージレジストリ
- パッケージの保存、管理、配布ができるサービス
- 例: npm Registory

これらを使用して、実際にサードパーティー製モジュールをインポートしてみましょう。

実践

試しに npm パッケージ cowsay をインストールしてみましょう。（npm コマンドを実行できる環境が必要です）空のディレクトリに移動して、以下のコマンドを実行しましょう。

$ npm init -y
$ npm install cowsay

added 41 packages in 1s

3 packages are looking for funding
  run `npm fund` for details

すると、以下のファイルやディレクトリが作成されたかと思います。

package.json
- dependencies に cowsay が記載されている
package-lock.json
- cowsay が依存するパッケージなどが記載されている
node_modules/
- cowsay と cowsay が依存するパッケージが

試しにインストールされた cowsay コマンドを実行してみると以下のように表示されます。

$ npx cowsay hello
 _______
< hello >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

では、インストールしたパッケージのモジュールをインポートしてみましょう。
main.js を作成し、以下を入力します。

main.js

const cowsay = require('cowsay');

console.log(cowsay.say({ text: "Hello, World!" }));

require('cowsay') で node_modules 内にインストールされた cowsay パッケージのモジュールがインポートできます。

実行すると、問題なく cowsay モジュールが使用できていることが確認できます。

$ node main.js
 _______________
< Hello, World! >
 ---------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

(補足): `require('cowsay')` と書くと、 `node_modules` 内のどのファイルの内容がインポートされるの？

require.resolve() を使うと実際にどのファイルが読み込まれたか確認することができます。

console.log(require.resolve('cowsay'));
// => /(省略)/node_modules/cowsay/index.js

require がファイルを探す順番は Node.js の仕様で決まっています。
今回だと cowsay の package.json で main フィールドに index.js が指定されているので、そのファイルが読み込まれました。

package.json

  "main": "./index",

詳細はこちら: https://nodejs.org/docs/latest/api/modules.html

まとめと次回予告

この記事では、JavaScript でサードパーティーライブラリを使用する代表的な方法として、npmパッケージについて紹介しました。

Node.js の require()
- node_modules というディレクトリ内も読み込みの対象
npmパッケージ
- package.json というファイルで設定する
- npm Registory などのパッケージレジストリでパッケージが保管されている
- npm などのパッケージマネージャーで node_modules にインストールする

Part 3 はここまでです。Part 4 以降では以下について書こうと思います。

TypeScript とモジュールの関係
Webpack とモジュールの関係