Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

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

 本連載では主に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でも利用したい」という要求をストレートに実現する意味で、依然として有用なツールといえます。


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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5