はじめに (対象読者・この記事でわかること)

この記事は、Webフロントエンドの開発に携わっている方、特に jQuery を日常的に利用しているエンジニアを対象としています。
jQuery の基本的な操作は理解しているものの、条件分岐の書き方や、複数条件を組み合わせた実装に不安があるという方に最適です。

本記事を読むことで、以下ができるようになります。

  • if / else、switch に相当する jQuery の書き方を正しく使える
  • 複数の条件を組み合わせた高度なロジックをシンプルに表現できる
  • 実装時に陥りやすい「要素が取得できない」「イベントが二重にバインドされる」等のエラーを予防・対処できる

私がこのテーマを書いたきっかけは、社内のプロジェクトで古いコードベースの保守に苦労した経験です。その中で「条件分岐が散在し、読みづらい」ことが主な障壁となっていたため、整理されたパターンを共有したいと考えました。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • HTML と CSS の基本的な理解
  • jQuery の基本的な操作（要素取得、イベントバインド、DOM 操作）
  • JavaScript の変数宣言や関数定義に関する基礎知識

jQuery で条件分岐を行う必要性と基本概念

Web アプリケーションでは、ユーザーの操作や取得したデータに応じて UI を動的に変化させることが頻繁にあります。純粋な JavaScript でも if / else や switch が使えますが、jQuery のチェーンメソッドと組み合わせると、可読性が高く、かつ処理が一箇所に集約されたコードを書きやすくなります。

1. 基本的な if / else パターン

Javascript

// 例: テキスト入力が空かどうかでメッセージを切り替える
$('#checkBtn').on('click', function () {
    const txt = $('#input').val().trim();
    if (txt === '') {
        $('#msg').text('入力してください').removeClass('ok').addClass('error');
    } else {
        $('#msg').text('入力完了です').removeClass('error').addClass('ok');
    }
});

2. 複数条件をまとめる switch 構文

Javascript

$('#statusSelect').on('change', function () {
    const state = $(this).val();
    switch (state) {
        case 'ready':
            $('.panel').hide().filter('#readyPanel').show();
            break;
        case 'processing':
            $('.panel').hide().filter('#procPanel').show();
            break;
        case 'done':
            $('.panel').hide().filter('#donePanel').show();
            break;
        default:
            $('.panel').hide();
    }
});

3. jQuery のメソッドチェーンで条件分岐を組み込むテクニック

Javascript

$('#toggleBtn')
    .on('click', function () {
        const $target = $('#target');
        // data('visible') に true/false を保持して切り替える
        const isVisible = $target.data('visible');
        $target
            .toggle(isVisible)          // 表示/非表示を切り替え
            .animate({ opacity: isVisible ? 0 : 1 }, 400)
            .data('visible', !isVisible);
    });

上記の例では、状態を data 属性に保存し、次回クリック時の分岐条件として利用しています。これにより、変数スコープの取り扱いがシンプルになり、コードが散在しにくくなります。

実践的な条件分岐実装例：フォームバリデーションと動的 UI 更新

ここからは、実務でよく遭遇する「入力内容に応じてエラーメッセージを表示し、送信ボタンの有効化/無効化を切り替える」シナリオを通じて、jQuery の条件分岐を深掘りします。

ステップ 1：HTML の用意

Html

<form id="registerForm">
    <input type="text" id="username" placeholder="ユーザー名" required />
    <span class="msg" id="msgUser"></span>

    <input type="email" id="email" placeholder="メールアドレス" required />
    <span class="msg" id="msgEmail"></span>

    <button type="submit" id="submitBtn" disabled>登録</button>
</form>
  • span.msg はエラーメッセージ表示領域です。
  • submitBtn は最初は無効化 (disabled) しています。

ステップ 2：バリデーションロジックの実装

Javascript

$(function () {
    const $username = $('#username');
    const $email    = $('#email');
    const $msgUser  = $('#msgUser');
    const $msgEmail = $('#msgEmail');
    const $submit   = $('#submitBtn');

    // 正規表現で簡易チェック
    const userPattern  = /^[a-zA-Z0-9_]{4,12}$/;
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    // 汎用バリデーション関数
    const validate = function ($field, pattern, $msg, errorMsg) {
        const val = $field.val().trim();
        if (!pattern.test(val)) {
            $msg.text(errorMsg).addClass('error').removeClass('ok');
            return false;
        } else {
            $msg.text('OK').addClass('ok').removeClass('error');
            return true;
        }
    };

    // 入力ごとにリアルタイムで評価
    $username.on('input', function () {
        const ok = validate($username, userPattern, $msgUser, '4〜12文字の半角英数字で入力');
        $submit.prop('disabled', !ok || !$email.data('valid'));
    });

    $email.on('input', function () {
        const ok = validate($email, emailPattern, $msgEmail, '有効なメールアドレスを入力');
        $email.data('valid', ok); // 状態を data に保存
        $submit.prop('disabled', !ok || !$username.data('valid'));
    });

    // フォーム送信時の最終チェック
    $('#registerForm').on('submit', function (e) {
        if ($submit.prop('disabled')) {
            e.preventDefault(); // 送信ブロック
            alert('入力内容にエラーがあります');
        }
    });
});

ポイント解説

  1. validate 関数を共通化
    同じロジックを繰り返さず、正規表現とエラーメッセージだけを引数に渡すことで再利用性を確保しています。

  2. data にバリデーション結果を保存
    $email.data('valid') のようにして、別要素の判定結果を手軽に参照できます。これにより、ボタン有効化判定が一行で完結します。

  3. prop('disabled', ...) でボタン状態を即時更新
    disabled 属性は attr ではなく prop で操作すべき点に注意してください。attr だと文字列として扱われ、意図しない挙動になることがあります。

ステップ 3：UI カスタマイズ（アニメーション付きエラーメッセージ）

Javascript

$('.msg')
    .hide()                     // 初期状態は非表示
    .each(function () {
        // エラーメッセージが出たらフェードイン、OK 表示はスライドダウン
        $(this).on('DOMSubtreeModified', function () {
            const $self = $(this);
            if ($self.hasClass('error')) {
                $self.stop(true).fadeIn(200);
            } else if ($self.hasClass('ok')) {
                $self.stop(true).slideDown(200);
            }
        });
    });
  • DOMSubtreeModified は非推奨ですが、jQuery では簡易的にテキスト変更を監視でき、アニメーションを自動的にトリガーさせる実装例として紹介しています。実運用では MutationObserver に置き換えると安全です。

ハマった点やエラー解決

発生した問題 原因 解決策
submitBtn が常に無効化された バリデーション結果を data に保存し忘れた $field.data('valid', result); を追加し、判定ロジックで参照
エラーメッセージが重複して表示された validate が呼び出されるたびに text() のみで上書きせず、append() していた text() に統一し、不要な append() を削除
DOMSubtreeModified が頻繁に走りすぎてパフォーマンス低下 入力中に文字が変わるたびにイベントが発火した .off('DOMSubtreeModified') で一度だけバインドし、setTimeout でデバウンス

さらに発展させるには

  • MutationObserver を使って安全に DOM 変化を監視
  • jQuery Validation Plugin と組み合わせ、既存のバリデーションルールを活用
  • カスタムイベント (trigger('validation:passed')) を作り、他モジュールと疎結合に連携

まとめ

本記事では、jQuery を用いた条件分岐の基礎から実務レベルのフォームバリデーション実装までを解説しました。

  • if / else、switch を jQuery のチェーンと組み合わせてシンプルに記述
  • バリデーション結果を data に保持し、状態管理と UI 更新を一元化
  • 実装中に陥りやすいエラー（要素取得失敗、属性操作ミス、イベントの多重バインド）とその対策を具体例で提示

この手順を踏むことで、コードの可読性と保守性が向上し、バグの発生率を大幅に低減できます。次回は、jQuery のプラグイン開発や TypeScript との統合について解説予定です。

参考資料