CodeZine(コードジン)

特集ページ一覧

モジュール管理を簡単にするBrowserifyをAPIや他ツール連携で使いこなす

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

Browserify/Watchifyとgulpを組み合わせた自動更新

 以下ではより実践的な例として、モジュールのJavaScriptコードをWatchifyに監視させて、変更時に変換処理とブラウザの自動更新を行うサンプルを説明します。このサンプルではタスク実行環境gulpとBrowserify/WatchifyのAPIを組み合わせて利用します。なおgulpの利用法については本連載の過去記事で紹介していますので参考にしてください。

 gulpの設定ファイルをリスト10に示します。

リスト10 gulpの設定ファイル(browserify_and_gulp/gulpfile.js)
// gulpの指定 ...(1)
var gulp = require("gulp");

// LiveReloadプラグインの指定 ...(2)
var liveReload = require("gulp-livereload");

// BrowserifyとWatchifyの指定 ...(3)
var browserify = require("browserify");
var watchify   = require("watchify");
var source     = require("vinyl-source-stream");

// Browserify/Watchifyタスクの定義 ...(4)
gulp.task("browserify", function() {
    // Browserifyオブジェクトの生成 ...(5)
    var b = browserify({
      entries: ["js_src/index.js"],
      cache: {},
      packageCache: {},
      plugin: [watchify] // watchifyプラグインを指定 ...(5a)
    });

    // Browserify処理を行うメソッド   ...(6)
    var bundle = function() {
      return b.bundle()            // ...(6a)
        .pipe(source("bundle.js")) // ...(6b)
        .pipe(gulp.dest("js"));    // ...(6c)
    };

    // JavaScript更新時にBrowserifyの処理を再実行 ...(7)
    b.on("update", bundle);

    // 処理結果を返却
    return bundle();
});

// 変更監視タスクの定義 ...(8)
gulp.task("watch", function() {
    // LiveReloadサーバーを開始
    liveReload.listen();
    // HTML/JavaScriptファイルが変更されたらliveReloadタスクを実行
    gulp.watch(["./*.html", "js/*.js"], ["liveReload"]);
});

// liveReloadタスクの定義 ...(9)
gulp.task("liveReload", function() {
    // ブラウザリロード
    liveReload.reload();
});

// defaultタスクの定義 ...(10)
gulp.task("default", ["browserify", "watch"]);

 (1)はgulp本体、(2)はブラウザリロードを行うLiveReloadプラグインの指定です。(3)でBrowserifyとWatchifyを指定しています。「vinyl-source-stream」は、Browserifyの処理結果をファイルに保存するためのモジュールです。

 (4)がBrowserify/Watchify処理のタスク定義です。まず(5)でBrowserifyオブジェクトを生成するとき、(5a)でWatchifyをプラグインとして指定します。(6)がBrowserifyの処理です。(6a)で変換処理を行って(6b)でファイル名を設定し、(6c)でjsフォルダに書き込みます。(7)はBrowserify対象ファイルの変更イベント(update)発生時にbundleメソッドを再実行する記述です。

 (8)、(9)はgulpによるファイル監視処理です。Browserify/WatchifyによりJavaScriptファイルがjsフォルダに書き込まれたり、HTMLファイルが直接修正されたりすると、gulpのファイル監視によりブラウザがリロードされます。(10)はdefaultタスク定義です。

 WatchifyはBrowserify処理対象ファイルのうち修正されたモジュールだけを差分で変換する機能を持っており、速度面で有利です。この利点を活かして、サンプルではBrowserifyが処理するファイルを直接gulp.watchで監視せず、Watchifyで監視して自動変換されたファイル(bundle.js)の変更をgulp.watchで監視しています。

 リスト10のタスクを実行してモジュールを修正すると、Browserifyの自動変換が行われたあとでブラウザが更新され、修正が反映されます。

図3 モジュール修正時に自動的にBrowserifyの変換処理を実行してブラウザをリロード(browserify_and_gulp)
図3 モジュール修正時に自動的にBrowserifyの変換処理を実行してブラウザをリロード(browserify_and_gulp)

まとめ

 本記事ではBrowserifyについて、オプションやAPI、他ツールとの連携などの活用例を紹介しました。Browserify自体は「Node.jsのモジュール管理形式記述を含むJavaScriptを変換してWebブラウザで動作させられる」シンプルなツールですが、さまざまな呼び出し方で深く使いこなしていけるツールといえます。

 前回記事でも紹介したようにJavaScriptのモジュール管理方式は様々なものが存在し、Browserifyはその中でも古いほうに分類されます。対照的に、次世代JavaScript規格「ECMAScript 2015」のモジュール管理方式は最も先進的なものといえます。ECMAScript 2015ではリスト11のようにexportキーワードで外部に公開する処理を記述します。

リスト11 ECMAScript 2015のモジュール記述例
// lib.jsに記述
export function func1(){/* func1の処理 */ }
export function func2(){/* func2の記述 */ }

 一方、利用する側はリスト12のように、importキーワードでモジュールを導入します。

リスト12 ECMAScript 2015のモジュール利用例
import {func1, func2} from "lib"; // lib.jsを参照
func1();    // func1を利用
func2();    // func2を利用

 ECMAScript 2015が普及すれば、標準環境でモジュール管理が利用できるようになり、Browserifyのような変換処理が不要になります。長期的にはECMAScript 2015の方式が標準になることは疑いないところですが、ブラウザの対応に時間がかかる点や、すでにモジュールの過去資産がある点から、Browserifyを含めた従来のモジュール管理ツールがすぐに使われなくなるわけではありません。当面の間はサポートするブラウザの環境や利用したいモジュールの充実度を見ながら、複数の方法を使い分けていくことになるでしょう。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

もっと読む

著者プロフィール

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

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5