フロントエンドエンジニア必見！JavaScript開発現場で人気の「Webpack」とは？

2018年05月29日

プログラミング

ホームページを作るためには、HTMLファイルだけでなく、CSSやJavaScript、画像やWebフォントなど、さまざまなファイルを用意する必要があります。
こうしたWebで必要なファイルをワンパッケージにまとめてくれる便利なものとして、「Webpack」という技術が次第に注目を集めています。

Webpackは、複数のファイルを１つのメインファイルにまとめてくれるだけではなく、SassやLESSなどのCSSプリプロセッサー言語をコンパイルしてくれるので、大変便利です。
GruntやGulpのようなタスクランナーと並んで、非常に注目を集めています。

今回は、JavaScriptの開発現場で人気を集めている「Webpack」について、入門記事としてその概要や簡単な使い方をご紹介します。

Webpackとは？

Webpackとは、CSSやJavaScript、画像などWebコンテンツを構成するあらゆるファイル(アセット)を「モジュール」という単位で取り扱い、「バンドル」という１つのファイルに最適な形で変換するためのツールです。

例えば、１つのJavaScriptファイルに長い処理を書くと、可読性が悪くなり、バグが生まれやすくなったり、結果的に開発スピードが遅くなったりする原因になります。
これを解決するために、「モジュール」という単位でJavaScriptを複数ファイルに分割して開発することがあります。
こうすれば、エラーが起こったり仕様変更をした場合に、どのモジュールを修正すればいいのかが分かり、開発スピードが早くなります。

しかし、JavaScriptの現行の仕様では、モジュールを扱うための仕組みが整っていないため、これまでにモジュールを取り扱うためにさまざまな仕様が検討されてきました。
Webpackを使えば、JavaScriptモジュールをブラウザで扱える形に簡単に変換することができます。

さらにユニークなのは、Webpackでは、JavaScriptだけでなくCSS、画像、Webフォント、音声、動画など、あらゆるアセットをモジュールとして扱い、１つの「バンドル」として出力することができる点です。

Webpackコマンドを使ってビルドすることで、ビルドされた「バンドル」の中にさまざまなファイルが「コード」として埋め込まれます。
これにより、ファイルのリクエスト数が減少し、ページ読み込み速度の改善が見込めるのです。

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

Webpackを使うための準備

Webpackを使うには、npm経由でダウンロード・インストールを行います。
Macではターミナル、Windowsならコマンドプロンプトに下記のコマンドを入力するだけでOＫです。

npm install -g webpack

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

参考：
知っておいて損はなし！新人Webデザイナーのための「npm」入門

インストールが完了したら、コンテンツのファイル一式を保存するためのフォルダーを任意の場所に作成し、コマンドでその場所に移動してください。
移動後、下記コマンドを実行してnpmを初期化します。

npm init

すると、プロジェクトの設定情報が記述された「package.json」というファイルが生成されます。
Webpackを実行するために、Webpack本体をプロジェクトフォルダにもインストールします。

npm install --save-dev webpack

これでWebpackを使用するための準備が整いました。

Webpackを使ってみる

Step1. モジュールの作成

それでは、3つのモジュールを使ったJavaScript処理を例にして、Webpackの使い方を解説していきます。
メイン処理を行う「main.js」にサブモジュールである「hello.js」と「bye.js」で定義されたメソッドを呼び出す仕組みを作ります。

▼ main.js

var voice1 = require(./hello.js);
voice1.hello();
var voice2 = require(./hello.js);
voice2.bye();

▼ hello.js

module.exports.hello = function() {
　　alert(“こんにちは。”);
}

▼ bye.js

module.exports.bye = function() {
　　alert(“さようなら。”);
}

Step2. Webpackの設定

JavaScriptモジュールは、このままではブラウザでは使用できないので、ブラウザが解釈できる形に変換する必要があります。
Webpackを使うことで、JavaScriptモジュールをブラウザで解釈できる形に変換することができます。
「webpack.config.js」というファイルを作り、「バンドル」にまとめるための設定をします。

▼ webpack.config.js

module.exports = {
　　entry: “./main.js”,
　　output: {
　　　　path: “./”,
　　　　filename: “bundle.js”
　　}
}

「entry」では、メインとなるJavaScriptファイル(「エントリーポイント」と呼びます)を指定し、「output」でファイルの出力設定を行います。

設定ができたら、「webpack」コマンドを実行してビルドを行います。

webpack

これで、「main.js」と「hello.js」「bye.js」が統合され、「bundle.js」に統合されました。
*「bundle.js」には統合されたコードだけでなく、メソッドまわりの処理を現行のブラウザでも処理するために必要なコード、各モジュールの処理も含まれています。
HTMLで「bundle.js」を読み込むことで、「hello.js」「bye.js」*内の処理が実行されます。

タスクランナーとの違い

以上、ごく基本的なWebpackの機能を見てきましたが、概要でも述べた通り、SassやLESSをコンパイルしたりという自動化の側面から、タスクランナーであるGruntやGulpの代わりとして紹介されることがあります。

確かに、Webpackではタスクランナーにできることの多くが実行できます。
しかし、WebpackはCSSや画像を含むさまざまなアセットファイルを１つのJavaScriptファイルとして「バンドル」にまとめて出力することが基本的な使い方となっているので、CSSや画像を別ファイルとして扱いたい場合にはタスクランナーが必要になります。

そのため、タスクランナーとWebpackは、どちらか一方を使うというよりは併用して使うほうが望ましいといえます。

まとめ

大規模なJavaScript開発を行うときには、モジュールシステムを使って開発したほうがミスも少なくなり、開発スピードも上がります。
Webpackを使うことで、JavaScriptのモジュールを簡単に一本化することができるだけでなく、他のアセットファイルまでもまとめてくれるという他にはない機能を提供してくれます。
他にも、「ローダー」と呼ばれるプラグインをインストールすることで、様々なメタ言語のコンパイルやコードの圧縮など、面倒なことを取り除いてくれたり便利な機能を扱ったりすることができます。

npmさえインストールしていれば導入はとても簡単です。
JavaScriptを扱うことがあるなら、ぜひ一度は使ってみてください。

参考：
知っておいて損はなし！新人Webデザイナーのための「npm」入門