Node.jsのモジュール依存解決メソッドをブラウザでも使えるBrowserify

HTML／JavaScript開発作業を効率化する便利ツールの活用 第7回

Browserifyで自作モジュールの依存解決を行う

　Node.jsのモジュールと同じように、自作モジュールをrequireメソッドで参照したJavaScriptもBrowserifyでビルドして実行できます。以下では、自作モジュールの記述と参照の方法を紹介します。

モジュール自体を関数として記述する場合

　モジュール内に処理を1個だけ含める（モジュール自体を関数にする）場合はリスト6のように、module.exportsに処理内容を含む関数定義を代入します。

リスト6　モジュール自体を関数にする記述方法

module.exports = function(){
    // 処理内容を記述
};

　具体例として、引数で指定されたDateオブジェクトの内容によりあいさつ文を出し分けるあいさつモジュールの例をリスト7に示します。

リスト7　あいさつモジュール（hello_browserify_2/js/modules/greet.js）

module.exports = function(date){
    // 時間によりあいさつ文を出し分け
    var hour = date.getHours();
    if (hour >= 6 && hour < 12) {
        return "おはようございます";
    }
    else if (hour >= 12 && hour < 17) {
        return "こんにちは";
    }
    else if (hour >= 17 && hour < 22) {
        return "こんばんは";
    }
    else {
        return "おやすみなさい";
    }
};

　リスト7のモジュールを呼び出す記述はリスト8となります。

リスト8　あいさつモジュールを利用する記述（hello_browserify_2/js/index.js）

// greetモジュールからオブジェクトを生成 ...（1）
var greet = require("./modules/greet");
// あいさつ文を取得 ...（2）
var result = greet(new Date());
// 文字列をページに表示 ...（3）
document.getElementById("show-result").textContent = result;

// 比較用に現在日時を表示 ...（4）
require("date-utils");
document.getElementById("show-time").textContent
= new Date().toFormat("YYYY/MM/DD HH24時MI分SS秒");

　（1）ではrequireメソッドの引数に相対パスでモジュールを記述したJavaScriptファイル名（「.js」は除く）を指定します。取得されるモジュールのオブジェクトは関数そのものなので、（2）のようにして実行します。（3）は画面出力処理です。

　（4）は、Webページに現在日時をフォーマット表示するためのコードです。これには、Node.jsのdate-utilsモジュールを利用しています。date-utilsを利用するためにはリスト9のコマンドであらかじめインストールしておきます。

リスト9　date-utilsモジュールをインストールするコマンド

npm install date-utils

　以上のサンプルをBrowserifyでビルドして実行すると、図3のように、時間により異なるあいさつ文が画面に表示されます。

図3　greetモジュールであいさつ文を表示（hello_browserify_2）

モジュールに複数の処理を含める場合

　1つの処理に対して1つのモジュールを実装するのは煩雑なので、現実的には1つのモジュールに複数の処理を含める場合が多いでしょう。この場合の記述はリスト10のようにmodule.exportsに複数の関数を含むJavaScriptオブジェクトを代入します。

リスト10　モジュールに複数の処理を含める記述1

module.exports = {
        <メソッド名1> : function(){
            // 処理内容
        },
        <メソッド名2> : function(){
            // 処理内容
        },
        // 中略
    }
};

　JavaScriptオブジェクトとしてまとめて代入する代わりに、関数を個別に代入することもできます。リスト11はリスト10と等価です。

リスト11　モジュールに複数の処理を含める記述2

module.exports.<メソッド名1> = function(){
    // 処理内容
};
module.exports.<メソッド名2> = function(){
    // 処理内容
};
// 以下略

　具体例として、リスト7のあいさつモジュールを内部的に利用して、複数パターンのあいさつ処理を提供する拡張あいさつモジュールの実装例をリスト12に示します。

リスト12　拡張あいさつモジュール（hello_browserify_3/js/modules/greetObj.js）

module.exports = {
    /**
     * あいさつをする ...（1）
     */
    doGreet: function() {
        var greet = require("./greet");
        return greet(new Date());
    },
    /**
     * 名前を指定してあいさつをする ...（2）
     */
    doGreetToPerson: function(personName) {
        // utilモジュールのformatメソッドでフォーマット
        var util = require("util");
        return util.format("%sさん、%s！", personName, this.doGreet());
    }
};

　（1）のdoGreetメソッドは単純なあいさつ文を取得するメソッドで、requireメソッドでリスト7のgreetモジュールを参照してあいさつ文を出力しています。（2）のdoGreetToPersonメソッドは相手の名前を指定してあいさつ文を取得するメソッドです。引数personNameの内容と、（1）のdoGreetメソッドで取得したあいさつ文を、リスト4で説明したutilモジュールのformatメソッドでフォーマットして出力します。

　このようにgreetObjモジュールは、内部の処理でgreetモジュールとutilモジュールを利用します。

　リスト12のモジュールを呼び出す記述は、リスト13です。（1）でgreetObjモジュールのオブジェクトを取得し、（2）で引数に名前を引数にしてdoGreetToPersonメソッドを実行してあいさつ文を取得しています。

リスト13　拡張あいさつモジュールを利用する記述（hello_browserify_3/js/index.js）

// greetObjモジュールからオブジェクトを生成 ...（1）
var greetObj = require("./modules/greetObj");
// あいさつ文を取得 ...（2）
var result = greetObj.doGreetToPerson("吉川英一");
// 文字列をページに表示 ...（3）
document.getElementById("show-result").textContent = result;

　（1）でgreetObjモジュールだけをrequireメソッドで参照している点に注目してください。greetObjモジュールがさらに内部で参照するgreetモジュールやutilモジュールへの依存関係はBrowserifyが自動的に処理してくれます。

　リスト12、13をBrowserifyでビルドして実行すると、図4のように、名前を指定してあいさつ文が表示されます。

図4　greetObjモジュールであいさつ文を表示（hello_browserify_3）

まとめ

　本記事では、Node.jsでモジュールを参照できるrequireメソッドをWebブラウザでも動作させることができるツールBrowserifyの概要と利用例を紹介しました。Node.jsモジュールの多くを利用できるほか、自作JavaScriptファイルもモジュール型式で記述して、煩雑なJavaScriptの依存性管理をBrowserifyに任せることができます。

　今回は主にコマンドラインを用いた利用法を紹介しましたが、次回はBrowserifyが提供するAPIや、変更を監視しての自動実行、他ツールとの組み合わせなど、より多岐な利用法を紹介していきます。

参考資料

• Browserify
• Node.js