CodekitでJavaScriptをバンドル（結合）する方法【jQueryとES Modules対応】

Webサイトの表示速度を改善したい、管理するJavaScriptファイルが増えてきて大変…。そんな悩みを抱えていませんか？

Webサイトのパフォーマンス（表示速度）を向上させる施策の一つに、複数のJavaScriptファイルを一つにまとめる「バンドル（Bundle）」という手法があります。これは、ブラウザがサーバーにリクエストする回数を減らすための、いわば「Webサイトのダイエット」のようなものです。

バンドルといえばWebpackが有名ですが、GUIで直感的に操作できる「Codekit」にも強力なバンドル機能が備わっています。Codekitは、ES Modules（import / export構文）を利用して、必要なライブラリや自作のスクリプトを効率的にまとめることができます。

この記事では、Codekitを使ってjQueryのようなライブラリと自作のJSファイルをバンドルする方法を、ステップバイステップで解説します。

CodekitでJSをバンドルする手順

今回は、jQuery本体と、jQueryのプラグインである「jquery-inview」、さらに自作の「common.js」（共通処理）と「home.js」（トップページ用処理）を、最終的に1つの「bundle.js」ファイルにまとめる流れを見ていきましょう。

ステップ1：ライブラリをインストールする（npm）

まず、Codekitの「npm」機能を使って、必要なライブラリ（今回はjQueryとjquery-inview）をプロジェクトにインストールします。
Codekitの右ペインにある「Packages」セクションから、必要なライブラリを検索してインストールしましょう。

（参考：Codekit公式ヘルプ – npm）

ステップ2：バンドルの起点となるファイル（bundle.js）を作成・設定する

次に、すべてのJavaScriptファイルの「まとめ役」となるファイル、ここでは「bundle.js」という名前で作成します。
このファイルを選択した状態で、Codekitのインスペクタ（右側の設定パネル）を開き、「Output Options」 > 「Bundle Formats」を「IIFE」に設定します。

補足：IIFEとは？
IIFE（Immediately Invoked Function Expression）は「即時実行関数式」の略です。バンドルしたコード全体を一つの関数で囲み、すぐに実行することで、ライブラリ内の変数名（例: $）が他のライブラリやグローバルスコープと衝突するのを防ぐ役割があります。

ステップ3：バンドルファイル（bundle.js）に必要なファイルを読み込む

「bundle.js」ファイルに、ステップ1でインストールしたnpmライブラリと、これから作成する自作のJSファイルをimport（インポート）する記述を追加します。

import $ from "jquery"; のように書くことで、npmで管理されているライブラリを読み込めます。
import { ... } from "../_src_js/common.js"; のように書くことで、自作のJSファイル（ここでは_src_jsフォルダ内と仮定）を読み込めます。

ステップ4：読み込まれる側のファイル（common.js, home.js）を作成する

次に、読み込まれる側となる自作のJSファイル（common.js, home.js）を作成します。
ここで重要なポイントは、外部ファイル（bundle.js）から呼び出したい関数には、先頭にexportをつけることです。exportがついていない関数は、そのファイルの中だけでしか使えません。

ステップ5：Codekitのコンパイル設定

最後に、Codekitの設定を確認します。
「common.js」や「home.js」は、単体でJavaScriptファイルとして書き出す（コンパイルする）必要はありません。これらは「bundle.js」の部品となるためです。

Codekit上で「common.js」と「home.js」を選択し、インスペクタで「Don’t Compile this file」（このファイルをコンパイルしない）に設定、またはアウトプットパスを「Skip」に設定しておきましょう。

これで、あなたが「bundle.js」を保存するたびに、Codekitが自動的にすべてのファイルを解析し、1つの「bundle.js」（または設定した出力パスのファイル）を生成してくれます。

コード記述例

▼ bundle.js（まとめ役ファイル）

// === npmでインストールしたライブラリ ===
import $ from "jquery";
import inview from "jquery-inview"; // eslint-disable-line

// === 自身で作成したJSファイル ===
// common.js から各関数をインポート
import { inviewFunc, scrollFunc, commonFunc } from "../_src_js/common.js";
// home.js から関数をインポート
import { alertFunc } from "../_src_js/home.js";

// === インポートした関数を実行 ===

// common.js の関数を実行
// ※common.js側でjQuery($)に依存しているため、
// 必要なライブラリ（$）を引数として渡して実行します。
scrollFunc($);
inviewFunc($);
commonFunc($);

// home.js の関数を実行
alertFunc();

▼ common.js（共通処理ファイル）

// スムーススクロール
// export をつけて外部から呼び出せるようにする
// 引数($)でjQueryのオブジェクトを受け取る
export function scrollFunc($) {
  $(document).on('click', 'a[href^="#"]', function () {
    const speed = 500;
    let href = $(this).attr("href");
    let target = $(href == "#" || href == "" ? 'html' : href);
    let position = 0;
    if ($(this).hasClass('js_anchor_adjust')) {
      var $headerHeight = $('#header').outerHeight();
      position = target.offset().top - $headerHeight;
    }else{
      position = target.offset().top;
    }
    $('body,html').animate({ scrollTop: position }, speed, 'swing');
    return false;
  });
}

// inview制御
export function inviewFunc($) {
  function animeType(className) {
    $('.js-' + className).on('inview', function (event, isInView) {
      if (isInView) {
        $(this).stop().addClass('animation');
      }
    });
  }
  animeType('inview');
}

// 共通処理（ヘッダーのトグルなど）
export function commonFunc($) {
  //HEADER
  $('#js-sp_menu').on('click',function(){
    $('#header').toggleClass('open');
    //背景固定
    if ($('#header').hasClass("open")) {
      $("html").addClass("is-fixed");
    } else {
      $("html").removeClass("is-fixed");
    }
    $('.header-nav a').on('click', function () {
      $('#header').removeClass('open');
      $("html").removeClass("is-fixed");
    });
  });

  // スクロールしたらheaderにclassをつける
  $(window).on("scroll",function() {
    if ($(this).scrollTop() > 0) {
      $('#header').addClass('fix');
    } else {
      $('#header').removeClass('fix');
    }
  });
}

▼ home.js（トップページ用ファイル）

// テストアラート
export function alertFunc() {
  // こちらのファイルでは $ を使っていないので、引数は不要
  console.log('home用のjavascriptが読み込まれました');
}

（TIPS）ESLintの警告を特定行だけ無視する方法

CodekitでESLint（コードチェッカー）を有効にしていると、コードの書き方によっては警告（Warning）が出ることがあります。
例えば、import inview from "jquery-inview"; の行で「inviewは使われていない」という警告が出ることがありますが、これはjQueryプラグインの仕様上、仕方のないことです。

どうしても解消できない、または意図した記述である警告を無視したい場合は、その行の末尾に // eslint-disable-line と記述することで、その行のESLintチェックを無効にできます。

まとめ

Codekitのバンドル機能を使えば、これまでHTML側で何行も読み込んでいた<script>タグを1行にまとめることができます。これにより、Webサイトの表示速度が改善されるだけでなく、ファイル管理も非常にシンプルになります。

ES Modules（import / export）の書き方に少し慣れが必要かもしれませんが、一度設定してしまえば開発効率が格段に上がりますので、ぜひ試してみてください。

---

よくある質問（FAQ）

Q1: なぜJavaScriptファイルを1つにバンドル（結合）する必要があるのですか？

A1: 主に「Webサイトの表示速度の向上」と「管理のしやすさ」のためです。
ブラウザは<script>タグを見つけるたびに、サーバーへファイルをリクエスト（要求）します。ファイルが10個あれば10回のリクエストが発生し、その分だけ表示が遅くなる可能性があります。ファイルを1つにまとめる（バンドルする）ことで、このリクエストを1回に減らすことができ、パフォーマンスが向上します。また、ライブラリ同士の依存関係や変数の衝突（同じ変数名を使ってしまうこと）を防ぐ上でも役立ちます。

Q2: Codekitのバンドル機能とWebpackの違いは何ですか？

A2: どちらもJSファイルをバンドルするツールですが、設定方法と機能の範囲が異なります。
Webpackは非常に高機能でカスタマイズ性が高いですが、設定ファイル（webpack.config.js）の記述が複雑になりがちです。一方、CodekitはGUI（グラフィカル・ユーザー・インターフェース）上で設定が完結するため、Webサイト運営初心者の方でも直感的に導入しやすいのが特徴です。基本的なバンドル機能であれば、Codekitでも十分強力です。

Q3: コードに出てくる `export` や `import` とは何ですか？

A3: これらは「ES Modules」という、JavaScriptの公式なモジュール機能（ファイルを分割・連携させる仕組み）のための命令です。
・export（エクスポート）: 「この関数や変数は、他のファイルから呼び出せるように公開します」という宣言です。
・import（インポート）: 「他のファイルでexportされた機能（関数や変数）を、このファイルで使います」という宣言です。
これらを使うことで、CodekitやWebpackのようなバンドルツールが「どのファイルとどのファイルが関係しているか」を正しく理解し、適切に一つにまとめてくれます。