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

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

　本連載では主にHTML／JavaScript開発作業を効率化する様々なツールやライブラリを紹介します。今回は、Node.jsで別のJavaScriptモジュールを参照するためのrequireメソッドをWebブラウザでも利用できるようにJavaScriptをビルドするツール、Browserifyを取り上げます。Browserifyを使えば、Webブラウザで実行するJavaScriptでNode.jsのモジュールを利用したり、JavaScriptファイル同士の依存関係をシンプルに管理したりできます。本記事では、Browserifyのインストールや利用方法をサンプルを挙げながら紹介していきます。

対象読者

• 便利なモジュールを手軽に使いたい方
• JavaScript同士の依存関係に手間をかけたくない方
• Node.jsのrequireメソッドを手放せなくなってしまった方

必要な環境の準備

　Browserifyの実行にはNode.jsが必要になります。公式サイトからダウンロードしてインストールしてください。

　Node.jsがインストールされた環境でリスト3のコマンドを実行するとBrowserifyがインストールされます。「-g」（または「--global」）は（特定のプロジェクトやフォルダにではなく）システム自体にインストールするためのオプションです。

リスト1　Browserifyをインストールするコマンド

npm install -g browserify

　今回は以下の環境で動作を確認しています。

• Windows 7 64bit版
• Node.js v5.8.0 64bit版
• Browserify v13.0.0
• Internet Explorer 11

依存関係の解決（基本）

　HTML／JavaScript開発において、一般にJavaScriptファイルの依存関係はHTMLファイルへの記述順で表されます。HTMLファイルで先にscriptタグが記述されたJavaScriptは、後に記述されたJavaScriptから参照できます。

リスト2　JavaScriptファイルの依存関係

<script src="libs.js"></script>
<script src="logic.js"></script>

　リスト2の場合、先に記述されたlibs.jsは、後に記述されたlogic.jsから変数やメソッドを参照できますが、逆向きの参照はできません。このような記述順による依存関係の管理は、JavaScriptファイルの数が増えてくると、全体の把握を非常に困難にします。

　JavaScript実行環境として知られるNode.jsでは、あるJavaScriptから別のJavaScriptモジュールを参照する記述をrequireメソッドで、リスト3のように行います。JavaScriptの各ソースコードで必要とするモジュールをrequireメソッドで参照すれば、全体の依存関係が自動的に解決されます。

リスト3　requireメソッドで他のJavaScriptモジュールを参照するNode.js記述

var someModule = require("<モジュール名>");

　しかし、一般のWebブラウザでは、requireメソッドを動作させることができません。そこでBrowserifyを使うと、requireメソッドを含むJavaScriptコードを、Webブラウザで動作する形式に変換してくれます。

JavaScriptモジュール管理の動向

　このようなJavaScriptのモジュール管理を行うツールは、Browserifyばかりではありません。現在利用できる主なツールを表1に示します。表の「開発開始時期」はGitHubのリポジトリが生成された時期です。

表1　Browserifyとその他のJavaScript依存解決ツール

名前	開発開始時期	対応モジュール	処理方法
Browserify	2010年9月	Node.js型式	ビルド
RequireJS	2010年2月	AMD	実行時に依存解決
webpack	2012年3月	CommonJS/AMD	ビルド
Rollup	2015年5月	ES6 Modules	ビルド

　RequireJSはBrowserifyと同じ時期のツールで、AMD（Asynchronous Module Definition）と呼ばれる記述型式のJavaScriptモジュールを依存解決するフレームワークです。依存解決は実行時に行われるので、ファイルの変換を行わずそのままWebブラウザで実行できます。

　webpackはAMDのほかにCommonJSと呼ばれる記述型式のモジュールに対応した依存解決ツールです。BrowserifyやRequireJSより世代が新しく、CoffeeScriptやLESSへの対応など、より多機能になっています。

［Note］CommonJSとAMD

　CommonJSは、もともとWebブラウザで利用されていたJavaScriptを、サーバーサイドなどの一般的な利用に適用するための規格です。ファイルI/Oやネットワークなど複数の規格からなり、モジュール規格（Modules）はその1つです。requireメソッドやモジュール記述形式など、Node.jsのモジュールと類似していますが、全く同一ではありません。

　AMD（Asynchronous Module Definition）は、複数のJavaScriptモジュールを定義して、非同期にロードすることを目的としたモジュール規格です。モジュールの依存性を解決しつつ非同期に読み込むことで、読み込みのボトルネックを低減できます。

［Note］CoffeeScriptとLESS

　CoffeeScriptはコンパイルしてJavaScriptを生成する言語（いわゆるaltJS）、LESSはコンパイルしてCSSファイルを生成する言語（いわゆるaltCSS）です。CoffeeScriptは中括弧を使わないことによる高い可読性、LESSは変数や演算でスタイルのパラメータを定義できる機能など、JavaScriptやCSSに対して便利な機能を付加します。

　Rollupはさらに新しいツールで、JavaScript標準であるECMAScript 2015で導入された（AMDともCommonJSとも異なる）ES2015 modules型式のモジュールをビルドしてまとめることができます。オプション指定によりAMDやCommonJS型式モジュールや、Webブラウザで直接実行できるコードへの変換をサポートします。

　JavaScriptモジュール管理の動向は動きが速く、Browserifyはその中では比較的歴史のある（古い）ツールです。しかしながらBrowserifyは「Node.jsのrequireメソッドをWebコンテンツのJavaScriptでも利用したい」という要求をストレートに実現する意味で、依然として有用なツールといえます。