Zenn
🦊

【応用編】基本の型から進化したjQueryの“使える”テンプレート

に公開
JavaScript
jQuery
idea

はじめに

jQueryでちょっとしたUIを作ろうとしたとき、

  • 気づけばコードがぐちゃぐちゃ
  • 「これ何の処理だっけ？」と自分で書いたコードに戸惑う

そんな経験、ありませんか？

私も実務で何度もそういう壁にぶつかりながら、試行錯誤を繰り返してきました。
そんな中でようやく「これなら使い回せる」と思える構造にたどり着いたのが、今回のテンプレートです。

  • イベント処理がバラバラに書かれて読みにくい
  • ウィンドウサイズごとの分岐処理が煩雑
  • チームでコードを共有すると「何がどこに書かれているか分からない」と言われる

この記事では、そんな悩みを解決するために、
前回紹介した「基本の型」をベースに、より実践的に進化させたテンプレートをご紹介します。

前回のおさらい

前回の記事では、jQueryを書くときに安全で使い回せる基本の型を紹介しました。

  • グローバルスコープの汚染を防ぐ
  • セミコロンの不意な省略によるバグを避ける
  • 他のライブラリと干渉しにくい

今回の記事は、この基本型をベースに「実務でもっと便利に使えるように」設計した発展版です。
特に、メディアクエリの対応・初期化処理の分離・チーム開発での見通しのよさなどを意識しました。

コードの全体像

まずはテンプレートの全体をご覧ください。

script.js
;(function ($) {

  // ========================================
  // 内部変数定義
  // ========================================
  const mediaQueryList = window.matchMedia('(max-width: 767px)');

  // ========================================
  // セットアップ: ページロード後1回だけ実行したい処理
  // ========================================
  function setup() {
    // プラグイン初期化やイベントの登録など
    console.log('setup');
  }

  // ========================================
  // 初期化: セットアップ実行後、または画面リサイズ時に実行したい処理
  // ========================================
  function init() {
    if (mediaQueryList.matches) {
      // スマホ向けの処理
      console.log('init for sp');
    } else {
      // PC向けの処理
      console.log('init for desktop');
    }
  }

  // ========================================
  // DOMロード時処理
  // ========================================
  $(function () {

    // ページロード後1度だけ実行
    setup();
    
    // ページロード後 & メディアクエリ分岐の都度実行
    init();
    mediaQueryList.addEventListener('change', init);

    // 以降に処理を追記

    
  });
})(jQuery);

コード設計のポイント

setup()：セットアップ（1度だけの処理）

  • ライブラリやプラグインの初期化
  • イベントの一括バインド

setup()にまとめることで、
イベントが多重登録されるバグを防ぎ、処理の役割も明確になります。

init()：画面サイズごとの再実行処理

  • メディアクエリでブレークポイントを超えたときに再実行される
  • 画面サイズに応じたDOM操作をこの関数にまとめておくと、CSSのメディアクエリ的な感覚でJSを書ける

DOMロード時処理

  • DOM読み込み完了後にだけsetup()を実行
  • init()はセットアップ後に実行し、さらに画面サイズが変わるたびに再実行
  • 構造が明快なので、他の人が読んでも理解しやすい

実際にどう動くのか？

このテンプレートを使うと、以下のようにブラウザのコンソールにログが出力されます。

ページをロードしたとき

setup
init for desktop

setup()が1回実行された後、現在の画面幅に応じたinit()が実行されます。
（この例ではデスクトップとして判定された場合）

ウィンドウをスマホ幅に縮めたとき（767px以下）

init for sp

mediaQueryListのchangeイベントにより、init()が再度実行されます。

ウィンドウをデスクトップ幅に戻したとき（768px以上）

init for pc

このように、setup()は1回だけ実行され、
init()は 画面幅が変化するたびに再度実行されるのが特徴です。

チーム開発でも安心な理由

この設計には、チーム開発を意識した以下のメリットがあります。

  • 処理の目的ごとに関数を分離 → 役割が明確
  • グローバル変数を使わない → 副作用が起きにくい
  • setup()/init()の考え方が浸透すると、誰が書いても共通理解が生まれやすい

応用ポイント

複数のメディアクエリに対応する分岐構造も加える場合も、この構造をベースにすれば簡単です。

まとめ

このテンプレートは、単に「jQueryの書き方」ではなく、
安全で再利用できる構造を考えるためのベースです。

柔軟に応用できる「型」を手に入れることは、jQueryに限らずどんな技術にも活かせます。
この記事があなたの現場に少しでも役立てばうれしいです💡

Discussion