Webアプリを開発するとき、JavaScriptは重要なプログラミング言語です。特に、Webブラウザ側でさまざまな制御をしようとすると欠かせません。このとき、単一のファイルで構成されるJavaScriptのプログラムであれば、そのファイルをHTMLに読み込むだけで問題ありません。しかし、プログラムが大規模になると、複数のJavaScriptファイルに分割して管理したくなります。このときに使われているwebpackのトレンドについて解説します。
複数ファイルの読み込みと課題
複数のJavaScriptのファイルで構成されるプログラムをHTMLファイルから読み込むとき、それぞれのファイルを指定する方法があります。たとえば、次のような複数のファイルに分かれたプログラムを考えます。
tax.js
function calcTax(price) {
return price * 0.1;
}
price.js
document.getElementById('tax').innerText = calcTax(1000);
これらを次のようなHTMLファイルで読み込めば、正しく動作し、Webブラウザに消費税の計算結果が表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div id="tax"></div>
<script src="tax.js"></script>
<script src="price.js"></script>
</body>
</html>
しかし、この例では、「price.js」が「tax.js」に依存しています。つまり、「tax.js」が先に読み込まれていないと、「calcTax()」関数が定義されていないことから、エラーが発生します。
このため、scriptタグで「tax.js」と「price.js」を読み込む順番を変えると正しく動作しません。また、それぞれのファイルを個別に読み込むため、ファイルごとに通信が発生し、Web画面が表示されるまでの速度に影響を与えることもあります。
モジュールの登場
これらの課題を解決するために、「モジュール」という概念が登場しました。モジュールを使うと、他のJavaScriptファイルで記述されたコードをインポートできます。具体的には、ファイルごとに必要な部分を「export」し、他のファイルで「import」することで、依存関係を明示化できます。
たとえば、次のように「tax.js」と「price.js」を作成し、「tax.js」では関数をエクスポートします。そして、「price.js」ではこの関数をインポートします。
tax.js
export function calcTax(price) {
return price * 0.1;
}
moduleB.js
import { calcTax } from "./tax.js";
document.getElementById('tax').innerText = calcTax(1000);
そして、HTMLファイルでJavaScriptを読み込むときに、「type="module"」と指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div id="tax"></div>
<script type="module" src="price.js"></script>
</body>
</html>
つまり、次の図のように順にファイルを読み込むように指定しています。
これにより、HTMLファイルからは1つのJavaScriptファイルを読み込むだけで、JavaScriptが内部で他のファイルを読み込んでくれるため、HTMLファイルで順番を意識する必要はなくなります。
ただし、この場合はWebサーバーが動作している必要があります。単にHTMLファイルとJavaScriptのファイルを手元のパソコンに配置するだけではプログラムが動作しません。また、少し前まではこういった記法に対応していないWebブラウザがあったため、別の解決策が必要でした。
（参考）https://caniuse.com/es6-module
バンドラーの登場
この課題を解決するために「バンドラー」と呼ばれるツールが使われます。バンドラーは、複数のファイルに分かれたJavaScriptのプログラムを1つのファイルにまとめるツールで、代表的なものに「webpack」があります。webpackなどのバンドラーを使うと、複数のJavaScriptのファイルから配布用の1つのファイルを生成してくれます。
このため、次のように1つのファイルを読み込むだけで済むようになりました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div id="tax"></div>
<script src="bundle.js"></script>
</body>
</html>
この方法であれば、どんなWebブラウザでも単一のファイルで読み込めますし、Webサーバーが動作している必要もありません。これを実現するには、開発者のコンピュータにてwebpackなどのバンドラーをインストールして、バンドル作業を実施します。
モジュールが使えても、webpackが便利な理由
このように単一のファイルを生成できて便利なwebpackですが、上記の「参考」に挙げたリンクでわかるように、現在はほとんどのWebブラウザがモジュールの読み込みに対応しています。また、WebアプリはWebサーバー上で動作するものですし、簡易的なWebサーバーを導入すれば手元のパソコンで動作を確認することは難しくありません。
このため、モジュールとして読み込めばwebpackのようなツールも不要ですし、変換の作業も必要ありません。それなら「webpackは不要なのではないか？」という考える人もいるでしょう。
しかし、webpackには依然として便利な点があります。たとえば、webpackではJavaScriptだけでなく、CSSや画像ファイル（CSSで指定する背景画像など）もまとめてバンドルできます。開発者は依存関係を管理しやすくなりますし、Webブラウザが読み込むファイル数が減ることから、ページが表示されるまでの時間が短くなることが期待できます。
最近のトレンド、Rust製バンドラー
最近では、Rust言語で実装された新しいバンドラーである「Rspack」が登場し、2024年8月にはv1.0というバージョンがリリースされました。
（参考）https://rspack.dev/blog/announcing-1-0
Rspackは、webpackよりも高速に動作することを目指して開発されています。バンドル作業が高速に実施できるだけでなく、開発中のホットリロード（ファイルが変更されたときに再読み込みすることなく画面に反映する）が非常に早く、開発者の生産性を向上させることが期待されています。
上記の「参考」に挙げたサイトでは、次のような画像が示されており、そのビルド時間がwebpackと比べて圧倒的に高速であることがわかります。
さいごに
1つのJavaScriptで済むような小規模な開発ではモジュールもバンドラーも使う必要はありませんが、少し大規模なプログラムになるとJavaScriptのソースコードの分割は必須です。このときは、モジュールやバンドラーの考え方を知るとともに、Rspackのような新しいツールも試してみてください。
増井技術士事務所代表。技術士（情報工学部門）。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかり プログラミングのしくみ』『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』（翔泳社）、最新刊の『データ分析に強くなるSQLレシピ 小規模データの前処理・分析の書き方＆テクニック』（インプレス）がある。
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿に記載されている情報は2024年10月時点のものです。
