SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード BrowserifySample.zip (6.0 KB)

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)
図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)
図4 greetObjモジュールであいさつ文を表示(hello_browserify_3)

まとめ

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

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

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
HTML/JavaScript開発作業を効率化する便利ツールの活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9370 2016/05/20 19:24

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング