JavaScriptのバンドルとは何か？
バンドルの概要
バンドルとは、コーディングを行う際に、複数のファイルを１つのファイルに出力することを言います。
バンドル(bundle)の英語を直訳すると「束」になりますが、単体でも提供可能な製品やサービスを複数組み合わせて、セット販売したり、別の製品にサービスを付属して販売したりすることをバンドルと呼んでいました。
しかし、IT界隈で「バンドル」と言った場合は、製品のセット販売の意味ではなく、プログラムのコードをまとめることを指します。
なお、セット販売された製品や、１つの束にしたプログラミングファイルをバラバラに崩すことをアンバンドル（unbundle）と呼びますが、プログラミングの世界では使用されません。
今回はJavaScript（以下、JS）を例にとり、セット販売の例と対比させながら、コードのバンドルについて解説していきます。
バンドルのメリット
単体でも提供可能（使用可能）な製品（プログラム）を組み合わせると、次のようなメリットがあります。
製品の場合：販売促進が行える
何かパソコンのソフトを購入した際、アンチウイルスソフトやデザインソフトの体験版が同梱されていることがありますが、このような事例がバンドルに該当します。
また、無料で使用できるソフトウェアには、広告を表示するためのソフトウェアがバンドルされており、利用者が広告をクリックすることで、広告主に対価が支払われる仕組みとなっているものもあります。
このように、組み合わせることで、製品の販売促進効果が得られます。
しかし、消費者の利益にならない物をバンドルして売る行為は「抱き合わせ商法」と呼ばれ、消費者が不利益を被る場合は「独占禁止法」に該当するので注意してください[1]抱き合わせ販売と独占禁止法｜企業法務コラム｜顧問弁護士・企業法務ならベリーベスト法律事務所。
プログラムの場合：Webページの速度が上げられる
プログラムの技術的な面のバンドルとは、プログラミングコードのモジュールを１つに結合するようなことを指します。
例えば、JSのモジュールは、１つでも稼働します。しかし、スクリプトの単位ごとに読み込まなくてはいけないため、複数のモジュールがあると読み込み速度が遅くなりがちです。これらの複数のモジュールをバンドルするとWebページの速度を上げることが期待できます。
ユーザーから好まれるWebシステムを開発するためには、読み込み速度の向上は欠かせません。
そのため、バンドルの方法は覚えておくようにしましょう。
バンドルの方法
実際に、製品（プログラム）やコードをバンドルするには、どうすれば良いのでしょうか？
ここでは、バンドルの方法についてご紹介します。
製品の場合
製品のバンドルの目的は、顧客により多くの製品を購入してもらうことです。そのため、製品バンドルは、次のような方法を検討していきます。
- 新発売の製品と最も売れている製品を組み合わせる
- 顧客が製品でより多くの恩恵が受けられるように、製品をグループ化して販売する
プログラムの場合
JSのモジュールをバンドルする目的は、Web表示速度の向上です。従来は、CommonJSやAMDのようなモジュールシステムを使用して結合しなければいけませんでした。そのため、モジュールをフレンドリーなコードに変換しなければいけなかったのです。
しかし、近頃は、便利なモジュールバンドラや、モジュールローダーが登場しました。これらを使用することで、さまざまなモジュールを簡単に１つにまとめることができます。
BrowserifyやRequireJSなど、さまざまなモジュールバンドラの中でもWebpackがおすすめです。Webpackコマンドを使用すれば、必要となるモジュールを組み込んで、バンドルしたJSファイルを出力してくれます。
Webpackは、モジュールバンドラの中でも、さまざまな機能が備わっており、依存関係の解決、ソースコードの可読性の向上、リクエスト数の削減が行えるためとても作業がしやすいです。Webpackの詳細情報については、別の章で分かりやすく説明します。