CodeZine(コードジン)

特集ページ一覧

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

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

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

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

目次

Browserifyで公開モジュールを参照して使う

 最初に、公開されているNode.jsのモジュールを利用するBrowserifyのサンプルを紹介します。

 リスト4は、文字列をフォーマットして、Webページに表示するサンプルです。文字列フォーマット処理はJavaScript標準で提供されていないので、Node.jsのutilモジュールが提供するフォーマット機能を利用します。

リスト4 requireメソッドでモジュールを参照するサンプル(hello_browserify_1/js/index.js)
// utilモジュールからオブジェクトを生成 ...(1)
var util = require("util");
// util.formatメソッドで文字列をフォーマット ...(2)
var result = util.format("%sの動作テストです。", "Browserify");
// 文字列をページに表示 ...(3)
document.getElementById("show-result").textContent = result;

 (1)でrequireメソッドを使ってutilモジュールのオブジェクトを生成し、(2)でformatメソッドにより文字列を整形しています。第1引数のフォーマット文字列中「%s」部分に第2引数の文字列が適用されます。(3)は結果文字列をページに表示する処理です。

 リスト4はrequireメソッドを含むため、そのままWebブラウザで動作させることができません。そこでBrowserifyの出番です。JavaScriptファイルが存在するフォルダでリスト5のコマンドを実行すると、BrowserifyでJavaScriptファイルをビルドできます。

リスト5 BrowserifyでJavaScriptをビルドするコマンド
browserify index.js -o bundle.js

 browserifyコマンドの引数としてビルドするJavaScriptファイル(スペース区切りで複数指定可能)、-oオプションの後にビルド結果を出力するJavaScriptファイルを指定します。-oオプションを指定しないと結果を標準出力に出力します。

 bundle.jsをHTMLファイルで参照して実行させると、図1のようにutil.formatメソッドでフォーマットした文字列が画面に表示されます。

図1 Browserifyで変換したWebページの実行例(hello_browserify_1)
図1 Browserifyで変換したWebページの実行例(hello_browserify_1)

 このようにBrowserifyを利用すると、本来Webブラウザで動作しないrequireメソッドでNode.jsのモジュールを参照して利用できます。

 ここでビルド後のbundle.jsをビルド前のindex.jsと並べて表示すると図2のようになります。Browserifyによりビルド前のJavaScriptファイルに対してWebブラウザでの動作をサポートする記述が追加されることがわかります。

図2 ビルド後(写真=下)はビルド前(写真=上)のコードに多数の記述が追加される
図2 ビルド後(写真=下)はビルド前(写真=上)のコードに多数の記述が追加される

 なお、Browserifyで利用できるNode.jsのモジュールは、Browserifyのドキュメントで以下のように案内されています。

  • 入出力を伴わない多くのnpmモジュールが利用できる
  • Node.jsのビルトインモジュールは明示的にrequireメソッドで参照すれば利用できる
  • 一部モジュール(assert・bufferなど)はブラウザ用の互換モジュール(shim)が利用される
  • 一部変数(process・Bufferなど)はブラウザ用の内容に変更される

  • 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