Javascriptモジュールバンドルシステムwebpackについて

TOP
コラム
Javascriptモジュールバンド

はじめに

昨今はWebフロントエンドの技術発展が目覚ましく、Javascript製のフロントエンドフレームワークは年々その存在感を増しています。
今回は、フロントエンドフレームワークを構成するにおいて欠かせないJavascriptモジュールバンドルシステム「webpack」を紹介します。

なぜモジュールバンドラーが必要なのか？

昔はJavascriptを利用したアプリを実行するためにはscript src="index.js"のように、HTMLファイル内に直接実行したいスクリプトファイルを書き込む必要があり、複数のファイルを実行する時には順番を正しく記述しないとエラーになってしまうこともありました。
さらに、フロントエンド開発におけるJavascrptファイルの量は年々増大し、もはや個人では膨大な量のJavascriptファイルの依存関係を適切に把握し、適切な順番で読み込ませる、といった作業は困難を極めました。

これを解決するのが、モジュールバンドラーです。モジュールバンドラーは複数のJavascriptファイルの依存関係を解析して、一つのファイルとしてまとめてくれる（バンドル）機能があります。モジュールバンドラーによってバンドルされたファイルはそのまま読み込ませて使用することができます。
これにより、開発者はファイルの依存関係を気にすることなく、Javascriptファイルを使用することが可能になりました。依存関係を気にすることがなくなったおかげで、大規模な開発などでもJavascriptを導入しやすくなりました。

webpackの特徴

様々なモジュール形式に対応

Javascriptは様々なモジュール形式があり、代表的なのは「require」でモジュールをインポートするCommonJSや、「import /export」でモジュールをインポートするESModuleがあります。通常別のモジュール形式を使用しているファイル同士はバンドルすることができませんが、webpackならモジュール形式が違うファイル同士でも解析した上で、バンドルすることができます。これにより、ESModuleを使用したAngular、React、VueJSなどのフロントエンドフレームワークと、NodeJSなどのCommonJS を使用したファイルをバンドルする事が可能になります。

ローダー、プラグインが豊富

Webpackは様々な種類のローダー（読み込みの機能を持つライブラリ）があり、これを追加することで画像、CSSファイルなどのJavascriptではないファイルをバンドルすることも可能になるほか、TypescriptなどのAltJSをコンパイルしてバンドルすることも可能になります。
また、Webpackは各種プラグインも備えており、開発環境、用途に応じて様々な機能を追加することができます。以下はプラグインの一例です。

・webpack-dev-server・・・開発用向けのWebサーバーを立ち上げるプラグイン
・html-webpack-plugin・・・htmlファイルをテンプレート化するプラグイン

このような各種プラグインを設定することによって、自由に好みの開発環境を設定することも可能です。

フロントエンドフレームワークに標準採用され始めている

webpackはその便利さから、Angular、React、VueJSのようなフロントエンドフレームワーク、ライブラリのCLI（コマンドラインツール）に標準採用されています。ローカル環境にCLIをインストールして、Angularであれば「ng new」のような所定のコマンドを入力すればそのフレームワークの開発環境を用意してくれます。

webpackの導入

それでは、開発環境にwebpackを導入してみましょう。
webpackはNodeJS上で動くので、ローカルにNodeJSがインストールされていることが前提です。
インストールした、もしくはすでにインストールしてあるのならば作業ディレクトリ上で次のコマンドを入力し、package.jsonを作成しましょう。


>npm init -y

このコマンドで、作業ディレクトリ上にpackage.jsonが作成されたはずです。package.jsonにはパッケージのメタデータや、npmでインストールした全てのライブラリの情報が保存されます。

これでwebpackをインストールする準備ができたので、次のコマンドでwebpackをインストールしましょう。


>npm install --save webpack webpack-cli

パッケージのインストール時に、「--save」オプションをつけると、そのパッケージの情報がpackeage.jsonに記録されます。これにより、別の人がローカル環境で同じ開発環境を整えたい時も「npm install」コマンドを入力すればpackage,jsonに記録されている全てのパッケージがインストールされます。

これで開発環境にwebpackを導入することができました。

まとめ

いかかでしたでしょうか。今回はwebpackのほんの導入部分にしか触れていないものの、webpackを使用すると自由な開発環境の構築ができるので、余裕があればwebpackでの開発環境構築をおすすめいたします。