Webページの構成ファイルをまとめる、モジュールバンドラー「webpack」入門

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

JavaScriptライブラリの依存関係とwebpack

　webpackのようなモジュールバンドラーが必要とされる背景を、JavaScriptを例に説明します。一般的に、WebページでJavaScriptライブラリを利用するには、リスト2のように、ライブラリを先、ライブラリを利用するコードを後に、それぞれHTMLファイルのscriptタグで記述します。順番を間違えると、ライブラリが参照できずエラーになります。

リスト2　JavaScriptファイルの依存関係

<script src="libs.js"></script><!-- ライブラリ -->
<script src="logic.js"></script><!-- ライブラリを利用するコード -->

　この方法では、利用するライブラリが複数あって、かつ相互に依存関係があると、正しい記述順番を判断するのが非常に難しくなります。

　さらに、最近のJavaScriptライブラリでは、ライブラリ自体が複数のモジュールから構成されたり、別のライブラリに依存していたりする場合があります。図1はJavaScriptフレームワークAngularの構成ファイルです。Angularが「@angular/***」という複数のモジュールから構成されており、また、Angular自体も別のライブラリ（rxjsなど）に依存しています。

図1　Angularを構成するモジュール群と、Angularが依存するライブラリ

　このように、JavaScriptの依存性を正しく解決するのは、ますます難しい状況になってきており、自動的に依存性を解決するwebpackといったツールが必要とされています。例えば以下の環境では、webpackが標準採用されています。

• Angular、React、Vueのコマンドラインツールで生成したプロジェクト
• Ruby on Railsのフロントエンド側コード

　このようにwebpackは、Webフロントエンド開発における依存性解決ツールの標準的な存在になっています。

webpackと似たツール

　webpackは多機能であるがゆえ、ほかのツールと比較されることがあります。ここからは、ほかのツールと比較しながら、webpackの特徴を説明していきます。

JavaScriptの依存性解決：Browserify、RequireJS

　webpack以前にも、BrowserifyやRequireJSといったJavaScriptモジュールの依存性解決ツールが存在します。BrowserifyはNode.jsのモジュール形式、RequireJSは「AMD」（Asynchronous Module Definition）と呼ばれる形式のモジュールに対応します。webpackはNode.jsの形式と似た「CommonJS」と、AMD、さらにECMAScript 6（ES6）で導入された「ES6 Modules」のモジュールを処理できます。これらの記述方法は後述します。また、webpackでは、CSSや画像ファイルといったJavaScript以外のファイルも処理できます（次回の記事で解説します）。

タスクランナー：Grunt、gulp

　webpackでは「ファイルに前処理を適用した後にまとめる」「処理終了後に開発用Webサーバーを起動する」といったタスクを実行できます（設定方法は次回の記事で説明します）。この意味でwebpackは、Gruntやgulpなどのタスクランナーと比較される場合があります。必要ならばgrunt-webpackやgulp-webpackといったプラグインで、Gruntやgulpからwebpackの機能を利用することもできるので、webpackだけで済ませるか別のタスクランナーを利用するかを、状況によって選択できます。

　なお、本連載では、Browserify、Grunt、gulpを過去に紹介しているので、参考にしてみてください。