要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。KB)本連載では主にHTML/JavaScript開発作業を効率化する様々なツールやライブラリを紹介します。今回は、Node.jsで別のJavaScriptモジュールを参照するためのrequireメソッドをWebブラウザでも利用できるようにJavaScriptをビルドするツール、Browserifyを取り上げます。Browserifyを使えば、Webブラウザで実行するJavaScriptでNode.jsのモジュールを利用したり、JavaScriptファイル同士の依存関係をシンプルに管理したりできます。本記事では、Browserifyのインストールや利用方法をサンプルを挙げながら紹介していきます。必要な環境の準備Browserifyの実行にはNode.jsが必要になります。公式サイトからダウンロードしてインストールしてください。Node.jsがインストールされた環境でリスト3のコマンドを実行するとBrowserifyがインストールされます。「-g」(または「--global」)は(特定のプロジェクトやフォルダにではなく)システム自体にインストールするためのオプションです。browserify今回は以下の環境で動作を確認しています。11依存関係の解決(基本)HTML/JavaScript開発において、一般にJavaScriptファイルの依存関係はHTMLファイルへの記述順で表されます。HTMLファイルで先にscriptタグが記述されたJavaScriptは、後に記述されたJavaScriptから参照できます。src="logic.js"></script>リスト2の場合、先に記述されたlibs.jsは、後に記述されたlogic.jsから変数やメソッドを参照できますが、逆向きの参照はできません。このような記述順による依存関係の管理は、JavaScriptファイルの数が増えてくると、全体の把握を非常に困難にします。JavaScript実行環境として知られるNode.jsでは、あるJavaScriptから別のJavaScriptモジュールを参照する記述をrequireメソッドで、リスト3のように行います。JavaScriptの各ソースコードで必要とするモジュールをrequireメソッドで参照すれば、全体の依存関係が自動的に解決されます。require("<モジュール名>");しかし、一般のWebブラウザでは、requireメソッドを動作させることができません。そこでBrowserifyを使うと、requireメソッドを含むJavaScriptコードを、Webブラウザで動作する形式に変換してくれます。JavaScriptモジュール管理の動向このようなJavaScriptのモジュール管理を行うツールは、Browserifyばかりではありません。現在利用できる主なツールを表1に示します。表の「開発開始時期」はGitHubのリポジトリが生成された時期です。Definition)と呼ばれる記述型式のJavaScriptモジュールを依存解決するフレームワークです。依存解決は実行時に行われるので、ファイルの変換を行わずそのままWebブラウザで実行できます。webpackはAMDのほかにCommonJSと呼ばれる記述型式のモジュールに対応した依存解決ツールです。BrowserifyやRequireJSより世代が新しく、CoffeeScriptやLESSへの対応など、より多機能になっています。[Note]CommonJSとAMDCommonJSは、もともとWebブラウザで利用されていたJavaScriptを、サーバーサイドなどの一般的な利用に適用するための規格です。ファイルI/Oやネットワークなど複数の規格からなり、モジュール規格(Modules)はその1つです。requireメソッドやモジュール記述形式など、Node.jsのモジュールと類似していますが、全く同一ではありません。Definition)は、複数のJavaScriptモジュールを定義して、非同期にロードすることを目的としたモジュール規格です。モジュールの依存性を解決しつつ非同期に読み込むことで、読み込みのボトルネックを低減できます。[Note]CoffeeScriptとLESSCoffeeScriptはコンパイルしてJavaScriptを生成する言語(いわゆるaltJS)、LESSはコンパイルしてCSSファイルを生成する言語(いわゆるaltCSS)です。CoffeeScriptは中括弧を使わないことによる高い可読性、LESSは変数や演算でスタイルのパラメータを定義できる機能など、JavaScriptやCSSに対して便利な機能を付加します。modules型式のモジュールをビルドしてまとめることができます。オプション指定によりAMDやCommonJS型式モジュールや、Webブラウザで直接実行できるコードへの変換をサポートします。JavaScriptモジュール管理の動向は動きが速く、Browserifyはその中では比較的歴史のある(古い)ツールです。Browserifyは「Node.jsのrequireメソッドをWebコンテンツのJavaScriptでも利用したい」という要求をストレートに実現する意味で、依然として有用なツールといえます。NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。