Node.jsモジュールを作成する方法

著者は、 Open Internet / Free Speech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Node.jsでは、 module は、外部アプリケーションで使用できるJavaScript関数とオブジェクトのコレクションです。コードの一部をモジュールとして説明することは、コードが何であるかではなく、コードが何をするかを意味します。Node.jsファイルまたはファイルのコレクションは、その機能とデータが外部プログラムで使用できるようになっている場合、モジュールと見なすことができます。

モジュールは、多くの大規模なプログラムで再利用できる機能の単位を提供するため、複雑さに応じて拡張できる疎結合アプリケーションを作成し、コードを他の開発者と共有するための扉を開くことができます。有用な関数とデータをエクスポートするモジュールを作成できると、より広いNode.jsコミュニティに貢献できるようになります。実際、npmで使用するすべてのパッケージは、モジュールとしてバンドルおよび共有されています。これにより、モジュールの作成はNode.js開発者にとって不可欠なスキルになります。

このチュートリアルでは、Web開発者がデザインで使用する色を提案するNode.jsモジュールを作成します。色を配列として格納し、ランダムに取得する関数を提供して、モジュールを開発します。その後、モジュールをNode.jsアプリケーションにインポートするさまざまな方法を実行します。

前提条件

開発環境にNode.jsとnpmをインストールする必要があります。このチュートリアルでは、バージョン10.17.0を使用します。これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04にNode.jsをインストールする方法。 Node.jsをインストールすると、npmもインストールされます。このチュートリアルではバージョン6.11.3を使用します。
package.jsonファイルにも精通している必要があり、npmコマンドの経験も役立ちます。この経験を積むには、 npmおよびpackage.jsonでNode.jsモジュールを使用する方法、特にステップ1 —package.jsonファイルを作成してください。
また、Node.js REPL（Read-Evaluate-Print-Loop）に慣れることも役立ちます。これを使用してモジュールをテストします。これについてさらに情報が必要な場合は、 Node.jsREPLの使用方法に関するガイドをお読みください。

ステップ1—モジュールの作成

このステップでは、最初のNode.jsモジュールを作成する手順を説明します。モジュールには配列内の色のコレクションが含まれ、ランダムに色を取得する関数を提供します。 Node.jsの組み込みexportsプロパティを使用して、関数と配列を外部プログラムで使用できるようにします。

まず、モジュールに保存する色に関するデータを決定することから始めます。すべての色は、人間が簡単に識別できるnameプロパティと、HTMLカラーコードを含む文字列であるcodeプロパティを含むオブジェクトになります。 HTMLカラーコードは6桁の16進数で、Webページ上の要素の色を変更できます。このHTMLカラーコードと名前の記事を読むと、HTMLカラーコードの詳細を知ることができます。

次に、モジュールでサポートする色を決定します。モジュールには、6色を含むallColorsという配列が含まれます。モジュールには、配列からランダムに色を選択して返すgetRandomColor()という関数も含まれています。

ターミナルで、colorsという名前の新しいフォルダーを作成し、そのフォルダーに移動します。

mkdir colors
cd colors

npmを初期化して、他のプログラムがチュートリアルの後半でこのモジュールをインポートできるようにします。

npm init -y

-yフラグを使用して、package.jsonをカスタマイズするための通常のプロンプトをスキップしました。これがnpmに公開したいモジュールである場合は、 npmおよびpackage.jsonでNode.jsモジュールを使用する方法で説明されているように、これらすべてのプロンプトに関連データで応答します。

この場合、出力は次のようになります。

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

次に、nanoなどのコマンドラインテキストエディタを開き、モジュールのエントリポイントとして機能する新しいファイルを作成します。

nano index.js

モジュールはいくつかのことを行います。まず、Colorクラスを定義します。 Colorクラスは、その名前とHTMLコードでインスタンス化されます。次の行を追加して、クラスを作成します。

〜/colors/index.js

class Color {
  constructor(name, code) {
    this.name = name;
    this.code = code;
  }
}

Colorのデータ構造ができたので、モジュールにいくつかのインスタンスを追加します。次の強調表示されたarrayをファイルに書き込みます。

〜/colors/index.js

class Color {
  constructor(name, code) {
    this.name = name;
    this.code = code;
  }
}

const allColors = [
  new Color('brightred', '#E74C3C'),
  new Color('soothingpurple', '#9B59B6'),
  new Color('skyblue', '#5DADE2'),
  new Color('leafygreen', '#48C9B0'),
  new Color('sunkissedyellow', '#F4D03F'),
  new Color('groovygray', '#D7DBDD'),
];

最後に、作成したallColors配列からアイテムをランダムに選択する関数を入力します。

〜/colors/index.js

class Color {
  constructor(name, code) {
    this.name = name;
    this.code = code;
  }
}

const allColors = [
  new Color('brightred', '#E74C3C'),
  new Color('soothingpurple', '#9B59B6'),
  new Color('skyblue', '#5DADE2'),
  new Color('leafygreen', '#48C9B0'),
  new Color('sunkissedyellow', '#F4D03F'),
  new Color('groovygray', '#D7DBDD'),
];

exports.getRandomColor = () => {
  return allColors[Math.floor(Math.random() * allColors.length)];
}

exports.allColors = allColors;

exportsキーワードは、すべてのNode.jsモジュールで使用可能なグローバルオブジェクトを参照します。モジュールのexportsオブジェクトに格納されているすべての関数とオブジェクトは、他のNode.jsモジュールがインポートするときに公開されます。たとえば、getRandomColor()関数はexportsオブジェクト上に直接作成されました。次に、スクリプトの前半で作成したローカル定数allColors配列を参照するexportsオブジェクトにallColorsプロパティを追加しました。

他のモジュールがこのモジュールをインポートすると、allColorsとgetRandomColor()の両方が公開され、使用できるようになります。

ファイルを保存して終了します。

これまでに、色の配列と1つをランダムに返す関数を含むモジュールを作成しました。また、配列と関数をエクスポートして、外部プログラムがそれらを使用できるようにしました。次のステップでは、他のアプリケーションでモジュールを使用して、exportの効果を示します。

ステップ2—REPLを使用したモジュールのテスト

完全なアプリケーションを作成する前に、モジュールが機能していることを確認してください。このステップでは、REPLを使用してcolorsモジュールをロードします。 REPLにいる間に、getRandomColor()関数を呼び出して、期待どおりに動作するかどうかを確認します。

index.jsファイルと同じフォルダーでNode.jsREPLを開始します。

node

REPLが開始されると、>プロンプトが表示されます。これは、すぐに評価されるJavaScriptコードを入力できることを意味します。これについて詳しく知りたい場合は、REPLを使用したに関するガイドに従ってください。

まず、次のように入力します。

colors = require('./index');

このコマンドでは、require()はエントリポイントでcolorsモジュールをロードします。 ENTERを押すと、次のようになります。

Output{
  getRandomColor: [Function],
  allColors: [
    Color { name: 'brightred', code: '#E74C3C' },
    Color { name: 'soothingpurple', code: '#9B59B6' },
    Color { name: 'skyblue', code: '#5DADE2' },
    Color { name: 'leafygreen', code: '#48C9B0' },
    Color { name: 'sunkissedyellow', code: '#F4D03F' },
    Color { name: 'groovygray', code: '#D7DBDD' }
  ]
}

REPLは、colorsの値を示します。これは、index.jsファイルからインポートされたすべての関数とオブジェクトです。 requireキーワードを使用すると、Node.jsはモジュールのexportsオブジェクト内のすべてのコンテンツを返します。

colorsモジュールのexportsにgetRandomColor()とallColorsを追加したことを思い出してください。そのため、インポート時にREPLに両方が表示されます。

プロンプトで、getRandomColor()関数をテストします。

colors.getRandomColor();

ランダムな色でプロンプトが表示されます。

OutputColor { name: 'groovygray', code: '#D7DBDD' }

インデックスはランダムであるため、出力は異なる場合があります。 colorsモジュールが機能していることを確認したら、Node.jsREPLを終了します。

.exit

これにより、ターミナルのコマンドラインに戻ります。

REPLを使用して、モジュールが期待どおりに機能することを確認しました。次に、実際のプロジェクトで行うのと同じように、これらの同じ概念を適用し、モジュールをアプリケーションにロードします。

ステップ3—ローカルモジュールを依存関係として保存する

REPLでモジュールをテストしているときに、相対パスを使用してモジュールをインポートしました。これは、作業ディレクトリに関連するindex.jsファイルの場所を使用して、その内容を取得したことを意味します。これは機能しますが、コンテキストが変更されたときにインポートが中断されないように、モジュールを名前でインポートする方が通常は優れたプログラミングエクスペリエンスです。このステップでは、colorsモジュールをnpmのローカルモジュールinstall機能とともにインストールします。

colorsフォルダーの外に新しいNode.jsモジュールをセットアップします。まず、前のディレクトリに移動して、新しいフォルダを作成します。

cd ..
mkdir really-large-application

次に、新しいプロジェクトに移動します。

cd really-large-application

colorsモジュールと同様に、フォルダーをnpmで初期化します。

npm init -y

次のpackage.jsonが生成されます。

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

次に、colorsモジュールをインストールし、--saveフラグを使用して、package.jsonファイルに記録されるようにします。

npm install --save ../colors

colorsモジュールを新しいプロジェクトにインストールしました。 package.jsonファイルを開いて、新しいローカル依存関係を確認します。

nano package.json

次の強調表示された行が追加されていることがわかります。

〜/ really-large-application / package.json

{
  "name": "really-large-application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "colors": "file:../colors"
  }
}

ファイルを終了します。

colorsモジュールがnode_modulesディレクトリにコピーされました。次のコマンドを使用して、そこにあることを確認します。

ls node_modules

これにより、次の出力が得られます。

Outputcolors

この新しいプログラムで、インストールしたローカルモジュールを使用します。テキストエディタを再度開き、別のJavaScriptファイルを作成します。

nano index.js

プログラムは最初にcolorsモジュールをインポートします。次に、モジュールが提供するgetRandomColor()機能を使用して、ランダムに色を選択します。最後に、使用する色をユーザーに通知するメッセージをコンソールに出力します。

index.jsに次のコードを入力します。

〜/ really-large-application / index.js

const colors = require('colors');

const chosenColor = colors.getRandomColor();
console.log(`You should use ${chosenColor.name} on your website. It's HTML code is ${chosenColor.code}`);

このファイルを保存して終了します。

これで、アプリケーションはWebサイトコンポーネントのランダムな色のオプションをユーザーに通知します。

次のコマンドでこのスクリプトを実行します。

node index.js

出力は次のようになります。

OutputYou should use leafygreen on your website. It's HTML code is #48C9B0

これで、colorsモジュールが正常にインストールされ、プロジェクトで使用されている他のnpmパッケージと同じように管理できます。ただし、ローカルのcolorsモジュールに色と機能を追加した場合、新しいオプションを使用できるようにするには、アプリケーションでnpm updateを実行する必要があります。次のステップでは、ローカルモジュールcolorsを別の方法で使用し、モジュールコードが変更されたときに自動更新を取得します。

ステップ4—ローカルモジュールをリンクする

ローカルモジュールの開発が進んでいる場合、パッケージを継続的に更新するのは面倒な場合があります。別の方法は、モジュールをリンクすることです。モジュールをリンクすると、モジュールへの更新が、それを使用するアプリケーションにすぐに反映されます。

このステップでは、colorsモジュールをアプリケーションにリンクします。また、colorsモジュールを変更し、再インストールやアップグレードを行わなくても、最新の変更がアプリケーションで機能することを確認します。

まず、ローカルモジュールをアンインストールします。

npm un colors

npmは、シンボリックリンク（またはsymlinks）を使用してモジュールをリンクします。これは、コンピューター内のファイルまたはディレクトリを指す参照です。モジュールのリンクは、次の2つのステップで実行されます。

モジュールへのグローバルリンクを作成します。 npmは、グローバルnode_modulesディレクトリとモジュールのディレクトリの間にシンボリックリンクを作成します。グローバルnode_modulesディレクトリは、システム全体のすべてのnpmパッケージ（-gフラグを付けてインストールするパッケージ）がインストールされる場所です。
ローカルリンクを作成します。 npmは、モジュールを使用しているローカルプロジェクトとモジュールのグローバルリンクの間にシンボリックリンクを作成します。

まず、colorsフォルダーに戻り、linkコマンドを使用して、グローバルリンクを作成します。

cd ../colors
sudo npm link

完了すると、シェルは次のように出力します。

Output/usr/local/lib/node_modules/colors -> /home/sammy/colors

node_modulesフォルダにcolorsディレクトリへのシンボリックリンクを作成しました。

really-large-applicationフォルダーに戻り、パッケージをリンクします。

cd ../really-large-application
sudo npm link colors

次のような出力が表示されます。

Output/home/sammy/really-large-application/node_modules/colors -> /usr/local/lib/node_modules/colors -> /home/sammy/colors

注：少し少なく入力したい場合は、linkの代わりにlnを使用できます。たとえば、npm ln colorsはまったく同じように機能します。

出力が示すように、really-large-applicationのローカルnode_modulesディレクトリからグローバルnode_modulesのcolorsシンボリックリンクへのシンボリックリンクを作成しました。 colorsモジュールを含む実際のディレクトリ。

リンクプロセスが完了しました。ファイルを実行して、ファイルが引き続き機能することを確認します。

node index.js

出力は次のようになります。

OutputYou should use sunkissedyellow on your website. It's HTML code is #F4D03F

プログラムの機能は損なわれていません。次に、更新がすぐに適用されることをテストします。テキストエディタで、colorsモジュールのindex.jsファイルを再度開きます。

cd ../colors
nano index.js

次に、存在する最高の青の色合いを選択する関数を追加します。引数をとらず、常にallColors配列の3番目の項目を返します。次の行をファイルの最後に追加します。

〜/colors/index.js

class Color {
  constructor(name, code) {
    this.name = name;
    this.code = code;
  }
}

const allColors = [
  new Color('brightred', '#E74C3C'),
  new Color('soothingpurple', '#9B59B6'),
  new Color('skyblue', '#5DADE2'),
  new Color('leafygreen', '#48C9B0'),
  new Color('sunkissedyellow', '#F4D03F'),
  new Color('groovygray', '#D7DBDD'),
];

exports.getRandomColor = () => {
        return allColors[Math.floor(Math.random() * allColors.length)];
        }

exports.allColors = allColors;

exports.getBlue = () => {
  return allColors[2];
}

ファイルを保存して終了し、really-large-applicationフォルダにあるindex.jsファイルを再度開きます。

cd ../really-large-application
nano index.js

新しく作成したgetBlue()関数を呼び出し、色のプロパティを使用して文を印刷します。次のステートメントをファイルの最後に追加します。

〜/ really-large-application / index.js

const colors = require('colors');

const chosenColor = colors.getRandomColor();
console.log(`You should use ${chosenColor.name} on your website. It's HTML code is ${chosenColor.code}`);

const favoriteColor = colors.getBlue();
console.log(`My favorite color is ${favoriteColor.name}/${favoriteColor.code}, btw`);

ファイルを保存して終了します。

コードは、新しく作成されたgetBlue()関数を使用するようになりました。前と同じようにファイルを実行します。

node index.js

次のような出力が得られます。

OutputYou should use brightred on your website. It's HTML code is #E74C3C
My favorite color is skyblue/#5DADE2, btw

スクリプトは、npm updateを実行しなくても、colorsモジュールの最新の関数を使用できました。これにより、開発中のこのアプリケーションに簡単に変更を加えることができます。

より大規模で複雑なアプリケーションを作成するときは、関連するコードをモジュールにグループ化する方法と、これらのモジュールをどのように設定するかを検討してください。モジュールが1つのプログラムでのみ使用される場合、モジュールは同じプロジェクト内にとどまり、相対パスによって参照されます。モジュールが後で個別に共有される場合、または現在作業しているプロジェクトとはまったく異なる場所に存在する場合は、インストールまたはリンクがより実行可能である可能性があります。活発に開発されているモジュールも、リンクの自動更新の恩恵を受けています。モジュールが活発に開発されていない場合は、npm installを使用する方が簡単なオプションです。

結論

このチュートリアルでは、Node.jsモジュールが他のプログラムで使用できる関数とオブジェクトを含むJavaScriptファイルであることを学びました。次に、モジュールを作成し、関数とオブジェクトをグローバルexportsオブジェクトにアタッチして、外部プログラムで使用できるようにしました。最後に、そのモジュールをプログラムにインポートして、モジュールがどのように大きなアプリケーションにまとめられるかを示しました。

モジュールの作成方法がわかったので、作成するプログラムの種類を考えて、さまざまなコンポーネントに分解し、それぞれの固有のアクティビティとデータのセットを独自のモジュールに保持します。モジュールの作成を練習すればするほど、学習の過程で高品質のNode.jsプログラムを作成する能力が向上します。モジュールを使用するNode.jsアプリケーションの例を実行するには、 Ubuntu18.04で本番用にNode.jsアプリケーションをセットアップする方法のチュートリアルを参照してください。