複数ファイルのバンドル | モジュールバンドラーの活用 | JavaScript 超完全入門 基本から発展までのすべて

2024.09.21
スポンサーリンク
スポンサーリンク
amazon
スマイルSALE
--:--:--
～
ad. 価格範囲を指定して商品を探せます

複数ファイルのバンドルとは？

JavaScriptでは、機能ごとにファイルを分割して開発することが一般的です。

しかし、ブラウザでそのまま多数のファイルを読み込むと、管理が複雑になったり、読み込み効率が低下したりすることがあります。

バンドル（Bundle）とは、複数のJavaScriptファイルをまとめて1つまたは少数のファイルとして出力することです。

現在では、WebpackやViteなどのビルドツールが、このバンドル処理を自動で行います。

なぜバンドルが必要なのか

開発中はファイルを細かく分割した方が管理しやすくなります。

一方、公開時にはバンドルすることで読み込み効率を改善できます。

開発時 公開時
機能ごとにファイルを分割する。 複数ファイルをバンドルして配布する。
コードの管理がしやすい。 読み込み効率が向上する。
修正箇所を見つけやすい。 不要なコードの削除や圧縮も行える。

Webpackで複数ファイルをバンドルするメリット

  • 依存関係を自動で解決できる。
  • コードの圧縮や最適化を自動で行える。
  • 不要なコードを削除（Tree Shaking）できる。
  • ファイル管理がしやすくなる。

Webpackで複数ファイルをバンドルする手順

ステップ1：プロジェクトを準備する

まずはWebpackをインストールします。

// ターミナルで実行

mkdir my-multi-bundle-project
cd my-multi-bundle-project

npm init -y

npm install --save-dev webpack webpack-cli

これでWebpackを利用する準備が整います。

ステップ2：エントリーポイントを設定する

webpack.config.jsで複数のエントリーポイントを指定します。

const path = require("path");

module.exports = {
    entry: {
        main: "./src/index.js",
        another: "./src/another-module.js"
    },

    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist"),
        clean: true
    },

    mode: "development"
};

この設定では、次の2つのバンドルが作成されます。

  • main.bundle.js
  • another.bundle.js

clean: trueを指定すると、ビルド時に古いファイルを自動で削除できます。

ステップ3：バンドルを実行する

// ターミナルで実行

npx webpack

実行すると、distフォルダーにバンドル済みファイルが生成されます。

複数ファイルの実例

次のような構成を考えてみましょう。

index.js

import { greet } from "./greet.js";

console.log(greet("World"));

greet.js

export function greet(name) {
    return `Hello, ${name}!`;
}

another-module.js

console.log("This is another module.");

Webpackはこれらの依存関係を解析し、自動的に適切なバンドルを作成します。

コード分割（Code Splitting）も利用できる

現在のWebpackでは、すべてを1つの巨大なファイルにまとめるだけではなく、必要なタイミングで読み込めるように分割することもできます。

これをコード分割（Code Splitting）と呼びます。

例えば、動的インポートを使うと必要になったときだけモジュールを読み込めます。

button.addEventListener("click", async () => {
    const module = await import("./calculator.js");

    module.calculate();
});

このようにすると、最初の読み込みを軽くできるため、大規模なアプリケーションではよく利用されています。

現在はViteも人気

Webpackは現在でも広く使われていますが、新しいプロジェクトではViteが採用されることも増えています。

ツール 特徴
Webpack 高機能で柔軟。多くの既存プロジェクトで利用されている。
Vite 起動が非常に高速で設定もシンプル。最近のプロジェクトで人気。

Webpackを理解しておくと、他のビルドツールも理解しやすくなります。

初心者が知っておきたいポイント

  • 開発ではファイルを分割し、公開時にバンドルすることが一般的である。
  • Webpackは依存関係を自動で解決してくれる。
  • バンドル時には圧縮や最適化も行われる。
  • コード分割を利用すると初回読み込みを高速化できる。
  • 最近はViteも人気だが、Webpackの知識は現在でも重要である。

まとめ

  • バンドルとは複数のJavaScriptファイルをまとめることである。
  • Webpackを利用すると依存関係を自動で管理できる。
  • コードの圧縮や不要コードの削除も自動で行える。
  • 複数のエントリーポイントを設定すると複数のバンドルを作成できる。
  • 現在ではコード分割やViteなども併せて理解しておくとよい。

スポンサーリンク