対象読者
- 便利なモジュールを手軽に使いたい方
- JavaScript同士の依存関係に手間をかけたくない方
- Node.jsのrequireメソッドを手放せなくなってしまった方
必要な環境の準備
Browserifyの実行にはNode.jsが必要になります。公式サイトからダウンロードしてインストールしてください。
Node.jsがインストールされた環境でリスト3のコマンドを実行するとBrowserifyがインストールされます。「-g」（または「--global」）は（特定のプロジェクトやフォルダにではなく）システム自体にインストールするためのオプションです。
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から参照できます。
<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メソッドで参照すれば、全体の依存関係が自動的に解決されます。
var someModule = require("<モジュール名>");
しかし、一般のWebブラウザでは、requireメソッドを動作させることができません。そこでBrowserifyを使うと、requireメソッドを含むJavaScriptコードを、Webブラウザで動作する形式に変換してくれます。
JavaScriptモジュール管理の動向
このようなJavaScriptのモジュール管理を行うツールは、Browserifyばかりではありません。現在利用できる主なツールを表1に示します。表の「開発開始時期」はGitHubのリポジトリが生成された時期です。
| 名前 | 開発開始時期 | 対応モジュール | 処理方法 |
|---|---|---|---|
| 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でも利用したい」という要求をストレートに実現する意味で、依然として有用なツールといえます。
