Webコンテンツには、CSS、JavaScript、画像、Webフォント等多くのファイル（アセット）が必要です。こういったWebで必要なファイルを取り扱うための「Webpack(ウェブパック)」という技術が近年人気なのをご存知ですか？ 次に示すのはGoogleトレンドで、グラフの数値が高いほどGoogleで多く検索されていることを示します。Webpackの人気は2015年頃から急激に伸びています。
▲ 2014/6~2016/6のGoogleトレンド調査(カテゴリー：コンピュータ)
本記事ではWebpackの入門記事として、Webpackとは一体何か、使うとどんなメリットがあるのかを、実際の使い方を交えながら紹介します。
Webpackとは何なのか？
Webコンテンツでは多くのアセットから成り立ちます。Webpackとは、Webコンテンツを構成するファイルを「モジュール」という単位で取り扱い、最適な形に作り変える為のツールです。次の4つの特徴があります。
- JavaScript「モジュール」の取り扱い
- JavaScript以外のアセットを「モジュール」として取り扱う
- アセットダウンロードの最適化
- 各タスクとの連携
※ モジュール(module)とは基本単位、部品といった意味を持ちます。
Webpackを使う準備をしよう
Webpackの特徴を紹介する前に、Webpackを使う準備をしましょう。コマンドラインでWebpackをグローバルにインストールします。一度インストールしたらその後は実行不要です。
※ もしOS Xでインストール中にエラーが出る場合は、コマンド冒頭にsudoと指定して管理者権限で実行してください。
npm install -g webpack
コンテンツのファイル一式が保存されるフォルダー（以下、プロジェクトフォルダーと呼びます）を任意の場所に作成し、コマンドラインでその場所に移動します。
// Windowsでの移動 cd C:¥Users¥MyName¥myproject // OS Xでの移動 cd /Users/MyName/myproject
以下のコマンドを実行すると、プロジェクトの設定情報が記述されたpackage.jsonファイルが生成されます。設定内容を確認するダイアログが表示されますが、特に指定がなければ全てYes([Enter]キー)で構いません。
npm init
Webpackを実行する為に、Webpack本体をローカル環境に（プロジェクトフォルダー以下で使えるように）インストールします。
npm install --save-dev webpack
以上で、Webpackを使用できる準備が整いました。実際にWebpackを使いながらその特徴を紹介します。
1. WebpackはJavaScriptのモジュールを取り扱える
一つのJavaScriptファイルに長い処理を書くと、可読性が悪くなり、バグの原因になります。これを解決する手段が複数ファイルへの分割です。機能ごとに分割された各々のJavaScriptファイルのことを一般的に「モジュール」と呼びます。よいJavaScriptコードとは、適切なモジュールに分割されたコードと言えます。
しかし、JavaScriptの現行の仕様にはモジュールを取り扱うための仕組みがないため、これまでモジュールを取り扱うための仕様が検討されてきました。代表的なものにCommonJS、AMD、ES2015のModules等がありますが、いずれも一長一短です。Webpackにはモジュール仕様のメリットを採用しつつ、モジュールを簡潔に使用する仕組みがあります。
JavaScriptモジュールの使用例
2つのモジュールを使ったJavaScript処理を例にして説明します。main.jsでsub.jsに定義されたhello()メソッドを呼び出す仕組みを作ります。
▼ main.js(メインとなる処理です)
// sub.jsに定義されたJavaScriptを実行する。 hello();
▼ sub.js
// module.exportを使ってhello関数を定義する。
function hello() {
alert("helloメソッドが実行された。");
}
main.jsからsub.jsの処理を呼び出したいとき、次のように定義できます。これは、CommonJSの仕様に沿った記法です。
▼ main.js
// require()メソッドを使ってsub.jsファイルを読み込む。
var sub = require("./sub.js");
// sub.jsに定義されたJavaScriptを実行する。
sub.hello();
▼ sub.js
// module.exportを使ってhello関数を定義する。
module.exports.hello = function() {
alert("helloメソッドが実行された。");
}
JavaScriptモジュールは、このままだとブラウザで使用できないため、ブラウザが解釈できる形に変換する必要があります。そこで登場するのがWebpackです。
