By Leave a Comment on Node.js モジュールの作成方法

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

はじめに

Node.js において、モジュールとは外部アプリケーションによって使用できる JavaScript 関数とオブジェクトの集合体のことです。 モジュールとしてコードの一部を記述することは、コードが何であるかよりも、それが何をするかということに言及します-その関数とデータが外部プログラムで使用できるようになれば、どんな Node.js ファイルまたはファイルのコレクションもモジュールと考えることができます。 有用な関数やデータをエクスポートするモジュールを書けるようになると、より広い Node.js コミュニティに貢献できるようになります。

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

前提条件

  • 開発環境には、Node.jsとnpmがインストールされている必要があります。 このチュートリアルでは、バージョン 10.17.0 を使用します。 macOS や Ubuntu 18.04 にインストールする場合は、「macOS で Node.js をインストールしてローカル開発環境を作成する方法」の手順、または「Ubuntu 18.04 に Node.js をインストールする方法」の「PPA を使用してインストールする」セクションに従ってください。 このチュートリアルでは、バージョン 6.11.3.
  • を使用します。また、package.json ファイルに精通している必要があり、npm コマンドの使用経験もあると便利です。 この経験を積むには、How To Use Node.js Modules with npm and package.json (特に Step 1 – Creating a package.json File) を参照してください。
  • Node.js REPL (Read-Evaluate-Print-Loop) に慣れておくことも役に立ちます。 これは、モジュールをテストするために使用されます。 これに関する詳細な情報が必要な場合は、「Node.js REPL の使用方法」を参照してください。

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

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

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

     
  • mkdir colors
    •  
  • cd colors
    •

Initialize npm so other programs can import this module later in the tutorial:

  • npm init -y

あなたは、package.json をカスタマイズするために通常のプロンプトをスキップして -y フラグを使用しました。 これが npm に公開したいモジュールであれば、How To Use Node.js Modules with npm and package.json で説明したように、これらのプロンプトすべてに関連データを回答するでしょう。

この場合、出力は次のようになります。 まず、Colorクラスを定義します。 あなたのColorクラスは、その名前とHTMLコードでインスタンス化されます。

~/colors/index.js
class Color { constructor(name, code) { this.name = name; this.code = code; }}

さて、Color のデータ構造ができたので、モジュールにいくつかのインスタンスを追加してください。

~/colors/index.js
class Color { constructor(name, code) { this.name = name; this.code = code; }}const allColors = ;

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

~/colors/index.js
class Color { constructor(name, code) { this.name = name; this.code = code; }}const allColors = ;exports.getRandomColor = () => { return allColors;}exports.allColors = allColors;

キーワードexportsはすべての Node.js モジュールで利用できるグローバルオブジェクトを参照するものです。 モジュールの exports オブジェクトに格納されているすべての関数とオブジェクトは、他の Node.js モジュールがそれをインポートしたときに公開されます。 例えば、getRandomColor()関数はexportsオブジェクトに直接作成されました。

When other modules import this module, both allColors and getRandomColor() will be exposed and available for usage.

Save and exit the file.

So far, you have created a module that contains an array of colors and a function that returns one randomly.

So far, you had a module that contains an配列の色を含むモジュールを作成しました。 また、配列と関数をエクスポートして、外部のプログラムから使用できるようにしました。 次のステップでは、作成したモジュールを他のアプリケーションで使用し、exportの効果を実証します。

ステップ 2 – REPL を使用してモジュールをテストする

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

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

  • node

REPLが開始すると、>プロンプトが表示されます。 これは、すぐに評価される JavaScript コードを入力できることを意味します。

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

  • colors = require('./index');

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

Output
{ getRandomColor: , allColors: }

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

colors モジュールで exports に getRandomColor() と allColors を追加したことを思い出してください。

At the prompt, test the getRandomColor() function:

  • colors.getRandomColor();

You’ll be prompt with a random color:

Output
Color { name: 'groovygray', code: '#D7DBDD' }

As the index is random, your output may vary.This reason, you see both them in the REPL when they are imported.

Attributes in the REPLの中で、これらの関数をテストしてください。 colors モジュールが動作していることを確認したので、Node.js REPL を終了します。

  • .exit

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

Step 3 – ローカルのモジュールを依存関係として保存する

REPL でモジュールをテストしている間、相対パスでモジュールをインポートしました。 これは、作業ディレクトリに対する index.js ファイルの位置を使用して、そのコンテンツを取得したことを意味します。 これは機能しますが、コンテキストが変更されたときにインポートが壊れないように、通常はモジュールをその名前でインポートする方が良いプログラミング経験になります。 このステップでは、npm のローカル モジュール install 機能を使用して colors モジュールをインストールします。

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" }}

ファイルから抜け出します。

node_modules ディレクトリへ、colorsモジュールがコピーされていることがわかります。 

  • ls node_modules

このコマンドを実行すると、次のような出力が得られます： 

Output
colors

この新しいプログラムで、インストールしたローカルモジュールを使用します。 テキストエディタを再度開き、別の 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

でこのスクリプトを実行すると、次のような出力が得られます。 しかし、ローカルの colors モジュールにさらに色や機能を追加した場合、新しいオプションを使用できるようにするために、アプリケーションで npm update を実行する必要があります。 次のステップでは、ローカル モジュール colors を別の方法で使用し、モジュール コードが変更されたときに自動更新を取得します。

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

ローカル モジュールが重い開発段階にある場合、継続的にパッケージを更新することは退屈になる可能性があります。 代替案は、モジュールをリンクすることです。 モジュールをリンクすることにより、モジュールへの更新がそれを使用するアプリケーションに即座に反映されることが保証されます。

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

最初に、ローカル・モジュールをアンインストールします。

  1. Creating a global link to the module.npm creates a symlink between your global node_modules directory and the directory of your module.npm created a symlink to the global node_modules directory and the module directory. グローバルな node_modules ディレクトリは、システム全体の npm パッケージがインストールされる場所です (-g フラグでインストールしたすべてのパッケージ)。
  2. ローカルリンクの作成。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

Note: もしあなたがもう少し少ない入力で済ませたいなら、linkの代わりにlnを使用することが可能です。 たとえば、npm ln colors でもまったく同じように動作します。

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

  • node index.js

あなたの出力は次のようになります:

Output
You 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 = ;exports.getRandomColor = () => { return allColors; }exports.allColors = allColors;exports.getBlue = () => { return allColors;}

ファイルを保存して終了し、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

以下のような出力が得られます:

Output
You should use brightred on your website. It's HTML code is #E74C3CMy favorite color is skyblue/#5DADE2, btw

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

より大きく、より複雑なアプリケーションを書くときは、関連するコードをどのようにモジュールにグループ化できるか、また、これらのモジュールをどのようにセットアップしたいかを考えてみてください。 モジュールが 1 つのプログラムによってのみ使用される場合、同じプロジェクト内にとどまり、相対パスによって参照されることができます。 もしモジュールが後で別々に共有されたり、今作業しているプロジェクトとは全く異なる場所に存在する場合は、インストールやリンクの方がより現実的かもしれません。 開発中のモジュールは、リンクによる自動更新の恩恵を受けることができます。

おわりに

このチュートリアルでは、Node.js モジュールが、他のプログラムから使用できる関数やオブジェクトを含む JavaScript ファイルであることを学びました。 次に、モジュールを作成し、関数とオブジェクトをグローバル exports オブジェクトにアタッチして、外部プログラムから利用できるようにしました。 モジュールを作成する方法がわかったので、書きたいプログラムの種類を考え、それをさまざまなコンポーネントに分解し、アクティビティとデータの各ユニークなセットを独自のモジュールに保持するようにします。 モジュールを書く練習をすればするほど、学習の旅で質の高いNode.jsプログラムを書くことができるようになります。 モジュールを使用する Node.js アプリケーションの例については、Ubuntu 18.04 のチュートリアル「How To Set Up a Node.js Application for Production」

を参照してください。

コメントを残す

メールアドレスが公開されることはありません。