Webコンテンツには、CSS、JavaScript、画像、webフォント等多くのファイル(アセット)が必要です。こういったwebで必要なファイルを取り扱うための「webpack(ウェブパック)」という技術が近年人気なのをご存知ですか? 次に示すのはGoogleトレンドで、グラフの数値が高いほどGoogleで多く検索されていることを示します。webpackの人気は2015年頃から急激に伸びています。

2015/4~2017/4のGoogleトレンド調査(カテゴリー:コンピュータ)

本記事ではwebpackの入門記事として、webpackとは一体何か、使うとどんなメリットがあるのかを、実際の使い方を交えながら紹介します。

webpackとは何なのか?

Webコンテンツでは多くのアセットから成り立ちます。webpackとは、webコンテンツを構成するファイルを「モジュール」という単位で取り扱い、最適な形に作り変える為のツールです。次の4つの特徴があります。

  1. JavaScript「モジュール」の取り扱い
  2. JavaScript以外のアセットを「モジュール」として取り扱う
  3. アセットダウンロードの最適化
  4. 各タスクとの連携

160519_webpack_is

※ モジュール(module)とは基本単位、部品といった意味を持ちます。

webpackを使う準備をしよう

webpackの特徴を紹介する前に、webpackを使う準備をしましょう。コマンドラインでwebpackをグローバルにインストールします。一度インストールしたらその後は実行不要です。

※ もしmacOSでインストール中にエラーが出る場合は、コマンド冒頭にsudoと指定して管理者権限で実行してください。

npm install -g webpack

コンテンツのファイル一式が保存されるフォルダー(以下、プロジェクトフォルダーと呼びます)を任意の場所に作成し、コマンドラインでその場所に移動します。

// Windowsでの移動
cd C:¥Users¥MyName¥myproject

// macOSでの移動
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コードとは、適切なモジュールに分割されたコードと言えます。

160519_javascript_module

しかし、JavaScriptの現行の仕様にはモジュールを取り扱うための仕組みがないため、これまでモジュールを取り扱うための仕様が検討されてきました。代表的なものにCommonJS、AMD、ES2015のModules等がありますが、いずれも一長一短です。webpackにはモジュール仕様のメリットを採用しつつ、モジュールを簡潔に使用する仕組みがあります

JavaScriptモジュールの使用例

2つのモジュールを使ったJavaScript処理を例にして説明します。main.jssub.jsに定義されたhello()メソッドを呼び出す仕組みを作ります。

// sub.jsに定義されたJavaScriptを実行する。
hello();

▲ main.js(メインとなる処理です)

function hello() {
	alert("helloメソッドが実行された。");
}

▲ sub.js

main.jsからsub.jsの処理を呼び出したいとき、次のように定義できます。これは、CommonJSの仕様に沿った記法です。

// require()メソッドを使ってsub.jsファイルを読み込む。
var sub = require("./sub.js");
// sub.jsに定義されたJavaScriptを実行する。
sub.hello();

▲ main.js

// module.exportを使ってhello関数を定義する。
module.exports.hello = function() {
	alert("helloメソッドが実行された。");
}

▲ sub.js

JavaScriptモジュールは、このままだとブラウザで使用できないため、ブラウザが解釈できる形に変換する必要があります。そこで登場するのがwebpackです。