SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では主にHTML/JavaScript開発作業を効率化する様々なツールやライブラリを紹介します。前回紹介したBrowserifyは、Node.jsのモジュール依存解決に利用されるrequireメソッドを含むJavaScriptコードを変換して、Webブラウザでも動作させられるツールです。今回はコマンドラインオプションやAPI、Watchifyの変更監視機能、gulpと組み合わせた利用など、Browserifyの応用的な利用例を説明します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Node.jsで実行するJavaScriptでは、モジュール同士の依存関係をrequireメソッドで自動的に解決できますが、requireメソッドを含んだコードは一般のWebブラウザでそのまま動作できません。そこでBrowserifyを使うと、JavaScriptコードを変換して動作させることができます。

 前回記事ではBrowserifyを最低限のオプションでコマンドラインから実行しました。今回はコマンドラインオプションで動作をカスタマイズしたり、モジュールとして他のツールと連携させたりといった、Browserifyのより深い使いこなしについて、サンプルとともに説明していきます。

対象読者

  • Browserifyをコマンドライン以外から利用したい方
  • 依存関係を解決する手間さえもかけたくない方
  • ソースコードを編集したときに自動変換させたい方

必要な環境の準備

 Node.js環境で「npm install -g browserify」コマンドを実行するとBrowserifyがインストールされます。詳細は前回記事を参照してください。

 今回は以下の環境で動作を確認しています。なおWindows 10標準ブラウザのMicrosoft Edgeでは、ブラウザ仕様により後述のLiveReload機能が動作しません。

  • Windows 10 64bit版
  • Node.js v5.10.1 64bit版
  • Browserify v13.0.0
  • Internet Explorer 11

サンプルコードについて

 ダウンロードできるサンプルコードには、必要なモジュールを定義したプロジェクトファイル(project.json)が含まれています。そのためサンプルの実行前に「npm install」コマンドを実行して、必要なモジュールをダウンロードしてください。

 また今回の説明では、前回記事で実装したあいさつモジュール(greetObj)を再び利用します。実装の内容は前回記事やダウンロードできるサンプルを参照してください。

コマンドラインオプションで動作をカスタマイズ

 前回記事ではBrowserifyをリスト1のようなコマンドラインで利用しました。

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

 ここで「-o」は、変換したJavaScriptファイルの出力先を表すコマンドラインオプションです。このオプションを指定しない場合、変換結果は標準出力に出力されます。このようにbrowserifyコマンドには動作を変えるコマンドラインオプションがいくつか存在します。

 コマンドラインオプションの一部を表1に示します。すべてのコマンドはGitHubリポジトリのドキュメントに記載されています。

表1 browserifyコマンドラインオプション(一部)
オプション オプション(省略形) 意味
--outfile -o 結果出力先ファイルの指定
--require -r 外部に公開するモジュールの指定
--exclude -u 出力先ファイルから省略するファイルの指定

 ここでは例として、モジュールを外部に公開する--require(-r)オプションの利用法を紹介します。

-rオプションでモジュールを外部のJavaScriptに公開

 リスト1のコマンドでは、requireメソッドによるモジュール参照をすべて変換して、単一のbundle.jsを生成します。しかしこの方法では、内部ですべてのモジュール依存関係が解決されるため、外部のJavaScript(例えばHTMLファイル内にインラインで記述するJavaScript)からモジュールを参照できません。

 -rオプションで公開するモジュールを指定すると、外部のJavaScriptでモジュールを参照できるようになります。ここではNode.jsで日付フォーマット処理を提供するdate-utilsモジュールと、自作のgreetObjモジュールを外部から利用できるようにしてみます。

 モジュールを公開するには、jsフォルダでリスト2のようにオプションを指定してbrowserifyを実行します。ひとつ目の-rオプションはdate-utilsモジュールの指定で、Node.jsのモジュールはモジュール名のみを指定します。ふたつ目の-rオプションは自作greetObjモジュールの指定で、自作モジュールの場合は「<JavaScriptファイルへのパス>:<公開するモジュール名>」のように指定します。コマンドを実行すると、-oオプションに指定されたrequire.jsに変換結果が出力されます。

リスト2 date-utilsとgreetObjモジュールを外部に公開する設定で変換するコマンド
browserify -r date-utils -r ./modules/greetObj.js:greetObj -o require.js

 HTMLの記述例はリスト3です。(1)で生成したrequire.jsを参照させると、その後のJavaScriptで(2)や(3)のようにrequireメソッドでモジュールを利用できます。

リスト3 HTMLに記述されたJavaScriptからモジュールを参照(more_browserify_1/index.html)
<script src="js/require.js"></script><!-- モジュール変換ファイル参照 ...(1)-->
<script>
    window.addEventListener("load", function(){
        // greetObjモジュールからオブジェクトを生成
        // 変換時に指定した名称greetObjを利用 ...(2)
        var greetObj = require("greetObj");
        //(中略)
        // 比較用に現在日時を表示
        // date-utilsモジュールを参照 ...(3)
        require("date-utils");
        //(中略)
    }, false);
</script>

 リスト3を実行すると図1のようにあいさつ文が画面に表示されます。

図1 リスト3の実行結果(more_browserify_1)
図1 リスト3の実行結果(more_browserify_1)

次のページ
ファイル変更を監視するWatchify

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
HTML/JavaScript開発作業を効率化する便利ツールの活用連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9453 2016/06/01 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング