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アプリケーションをセットアップする方法のチュートリアルを参照してください。