こんにちは！インターライフメディアです。最近のWeb制作では、JavaScriptのコードを機能ごとにファイル分割して管理する「モジュール」という考え方が一般的になりました。import（読み込み）やexport（書き出し）といった構文が使われますが、「分割したはいいけど、ブラウザで読み込むにはどうすればいいの？」と悩むWebサイト運営初心者の方も多いのではないでしょうか。
この記事では、Web制作の定番ツール「CodeKit」を使って、分割したJavaScriptファイル（ES6モジュール）をRollup.js（以下、Rollup）という機能で一つにバンドル（おまとめ）する方法を解説します。
ステップ1：CodeKitでパッケージをインストールする
まず、プロジェクトで使用したいJavaScriptライブラリ（パッケージ）をCodeKit経由でインストールします。今回は例として「jquery」と「jquery-inview」をインストールしてみましょう。
- CodeKitの左端のアイコンメニューから、雲のマーク（Packages）をクリックします。
- 「Package Name」の検索欄に、インストールしたいパッケージ名（例:
jquery）を入力します。 - 一覧から目的のパッケージを選択し、右下の「Install」ボタンをクリックします。
- 同様に「jquery-inview」もインストールします。
ステップ2：モジュールファイル（分割ファイル）とバンドルファイル（結合ファイル）を作成する
次に、JavaScriptの処理内容を記述するファイルを作成します。Sass(SCSS)で言うところの、コンパイル対象外の_yyyy.scss（パーシャルファイル）と、それらを束ねるxxx.scssの関係をイメージすると分かりやすいです。
今回は、以下のようにファイルを作成します。
- コンパイル前のファイル（モジュール）:
_other.js、_common.js
（ファイル名の先頭にアンダースコア_を付けることで、CodeKitはこれを「インポート専用ファイル」と認識し、単体でコンパイルしなくなります） - コンパイルファイルをまとめるファイル（バンドル）:
bundle.js
それぞれのファイルの内容は以下の通りです。
//_other.js
// テストアラート
export function alertFunc() {
console.log('これはテスト用アラートです。\n使用しない場合は削除してください。');
}
//_common.js
// このファイル内でjQuery($)を使うため、importしておきます。
import $ from "jquery"
export function commonFunc() {
// スムーススクロール
$('a[href^="#"]').click(function () {
const speed = 500;
let href = $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top;
$('body,html').animate({ scrollTop: position }, speed, 'swing');
return false;
});
//inview制御
// inviewプラグインもここでimportします。
// (※import $ from "jquery-inview" は、jQuery本体に 'inview' 機能を追加する記述です)
import "jquery-inview";
function animeType(className) {
$('.js-' + className).on('inview', function (event, isInView) {
if (isInView) {
$(this).stop().addClass('animation');
}
});
}
animeType('fadeInUp');
animeType('fadeInDown');
}
//bundle.js
// _other.js と _common.js から、exportされた関数をimportします。
import {alertFunc} from "./_other.js"
import {commonFunc} from "./_common.js"
// 読み込んだ関数を実行します。
alertFunc();
commonFunc();
ポイント：export と import
_other.jsや_common.jsのように、他のファイルで使いたい関数や変数の前にexportを付けます。
そして、それらをまとめるbundle.js側でimportを使って読み込みます。importの記述方法は、読み込む対象によって少し異なります。
//▼CodeKitでインストールしたパッケージ（npmモジュール）の場合
import $ from "jquery";
import "jquery-inview"; // 特定の変数名で受け取らない場合
//▼自分で作成したJSファイルの場合
import {alertFunc} from "./_other.js";
import {commonFunc} from "./_common.js";最後に、bundle.js内で読み込んだ関数（alertFunc(); や commonFunc();）を実行する記述を忘れないようにしましょう。
ステップ3：CodeKitでRollupの設定を行う
このままでは、CodeKitはbundle.jsをうまく処理できません。jQueryのような外部パッケージを正しく認識させ、ブラウザで実行可能な形式に変換する設定を行います。
- jQueryを外部ライブラリとして認識させる
左端の歯車アイコン（Project Settings）をクリックし、「Tools」の中の「Rollup」を選択します。「External and Globals」の欄に、jqueryと$を追記（画像左側を参照）します。これにより、RollupはjQueryをバンドルファイル内に含めず、グローバル変数$を参照するようになります。 - バンドル形式を変更する
左端のファイルアイコン（Files）をクリックし、一覧からbundle.jsを選択します。右側のインスペクタ（設定欄）で、「ES6 Bundle Format」の項目を「Do not bundle ES6 modules」から「IIFE – Immediately Invoked Function Expression」（画像右側を参照）に変更します。 - コンパイルする
設定が完了したら、CodeKitでファイルをコンパイル（または自動コンパイルを待機）します。エラーなくコンパイルされれば成功です。
まとめ
今回は、CodeKitとRollupを使って、import/export構文で書かれたモダンなJavaScriptファイルをバンドルする手順を解説しました。最初は設定が少し難しく感じるかもしれませんが、一度設定してしまえば、ファイル分割による開発効率と、バンドルによるパフォーマンス向上の両方を実現できます。ぜひ挑戦してみてください。
参考サイト：CodeKit Help | Rollup
よくある質問（FAQ）
Q1. なぜJavaScriptファイルをバンドル（一つにまとめる）必要があるのですか？
A1. ブラウザがWebサイトを表示する際、ファイルごとに通信（リクエスト）が発生します。JavaScriptファイルが何十個もあると、それだけ通信回数が増え、ページの表示速度が遅くなる原因になります。ファイルを一つにバンドル（結合）することで、この通信回数を最小限に抑え、Webサイトのパフォーマンスを向上させることができます。
Q2. 記事に出てきた「Rollup」とは何ですか？
A2. Rollupは、「モジュールバンドラ」と呼ばれるツールの一つです。importやexportを使って分割された複数のJavaScriptファイルを解析し、それらを一つのファイルにまとめる役割を果たします。CodeKitは、このRollupの機能を内部に搭載しており、私たちは難しいコマンド操作なしでバンドル機能を利用できます。
Q3. バンドル形式の「IIFE」とは何ですか？
A3. IIFE（イーフィー）は「Immediately Invoked Function Expression」の略で、「即時実行関数」と呼ばれるJavaScriptの記述パターンです。import/exportなどのES6モジュール構文は、そのままでは古いブラウザで動作しません。IIFE形式で出力することで、モジュール構文を対応ブラウザで実行可能な形式に変換し、意図しないグローバル変数の汚染を防ぐ効果があります。