【jQuery】hasClass()でクラスの有無を条件分岐する完全ガイド｜UI状態管理・複数条件・実用パターンまで

jQueryの hasClass() は「その要素が特定のクラスを持っているか」を true/false で返すメソッドです。CSSクラスをUIの状態フラグとして扱うことで、「開いているか・選択されているか・エラー状態か」などの状態管理をシンプルに実装できます。

1. hasClass()の基本構文

hasClass(クラス名) はクラスが存在すれば true、なければ false を返します。addClass/removeClass と組み合わせることで、クラスを状態フラグとして扱えます。

// 基本的な使い方
if ($('#box').hasClass('active')) {
  console.log('activeクラスを持っている');
} else {
  console.log('activeクラスを持っていない');
}

// クリック時にクラスの有無で分岐
$('#btn').on('click', function () {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active').text('OFF');
  } else {
    $(this).addClass('active').text('ON');
  }
});

// toggleClass()でより簡潔に書ける（同じ動作）
$('#btn').on('click', function () {
  $(this).toggleClass('active');
});

2. 複数クラスの条件分岐（AND・OR）

// AND条件: 2つのクラスを両方持っているか
if ($('#el').hasClass('is-open') && $('#el').hasClass('is-ready')) {
  console.log('開いていて、かつ準備完了');
}

// OR条件: どちらかのクラスを持っているか
if ($('#el').hasClass('error') || $('#el').hasClass('warning')) {
  console.log('エラーまたは警告状態');
}

// NOT条件: クラスを持っていない
if (!$('#el').hasClass('disabled')) {
  console.log('無効化されていないので処理を実行');
  doSomething();
}

// hasClass()に複数クラスを渡すとAND判定（jQuery 1.12+）
// ※スペース区切りで渡すと「全て持っているか」を判定
if ($('#el').hasClass('is-open is-animated')) {
  console.log('両方のクラスを持っている');
}

3. 親・祖先要素のクラスを条件に使う

クリックされた要素の親や祖先のクラスに応じて処理を分岐させる場面はよくあります。closest() と組み合わせると効率的です。

// 親のクラスで処理を分岐
$('.btn').on('click', function () {
  var $parent = $(this).parent();

  if ($parent.hasClass('section-a')) {
    console.log('セクションAのボタンがクリックされた');
  } else if ($parent.hasClass('section-b')) {
    console.log('セクションBのボタンがクリックされた');
  }
});

// closest()で最も近い祖先のクラスを確認
$('input').on('change', function () {
  // 最も近い .form-group を持つ祖先を取得
  var $group = $(this).closest('.form-group');

  if ($group.hasClass('required-group')) {
    // 必須フィールドグループ内の場合だけバリデーション
    validateField($(this));
  }
});

// モーダルの内側か外側かを判定
$(document).on('click', function (e) {
  var $target = $(e.target);
  if (!$target.closest('#modal').length) {
    // モーダルの外側をクリックしたら閉じる
    $('#modal').removeClass('is-open');
  }
});

4. クラスをUI状態フラグとして使う実践パターン

jQueryではCSSクラスをUIの「状態」として活用するのがベストプラクティスです。状態をクラスで表現することで、CSSとJavaScriptの責務が明確に分離されます。

// ===== パターン1: タブUI =====
// .is-active クラスが「選択中のタブ」を表す
$('.tab-btn').on('click', function () {
  var $btn = $(this);

  // すでに選択中なら何もしない
  if ($btn.hasClass('is-active')) return;

  // 現在アクティブなタブのコンテンツを非表示
  var $activeBtn     = $('.tab-btn.is-active');
  var activeTarget   = $activeBtn.data('target');
  $(activeTarget).removeClass('is-active');
  $activeBtn.removeClass('is-active');

  // クリックしたタブを選択
  $btn.addClass('is-active');
  $($btn.data('target')).addClass('is-active');
});

// ===== パターン2: フォーム送信前の一括状態チェック =====
$('#form').on('submit', function (e) {
  e.preventDefault();

  // is-error クラスを持つフィールドが残っていれば送信しない
  if ($(this).find('.is-error').length > 0) {
    alert('入力内容を確認してください');
    $(this).find('.is-error').first().focus();
    return;
  }

  // 全フィールドが is-valid ならば送信
  this.submit();
});

// ===== パターン3: ナビゲーションの現在地判定 =====
$('.nav-link').each(function () {
  if ($(this).hasClass('current-menu-item')) {
    $(this).attr('aria-current', 'page');
    $(this).closest('.nav-group').addClass('has-current');
  }
});

5. クラスで要素をグループ分けして一括操作

同じクラスを持つ要素をグループとして扱い、クラスの有無でまとめて制御するパターンです。

// 全カードの中から「注目」クラスを持つものだけを操作
$('.card').each(function () {
  if ($(this).hasClass('featured')) {
    $(this).find('.badge').show();
    $(this).css('order', -1);  // フレックスボックスで先頭に
  }
});

// フィルタリング：クラスで表示/非表示を切り替え
$('.filter-btn').on('click', function () {
  var filter = $(this).data('filter');  // 例: 'category-a'

  $('.filter-btn').removeClass('is-active');
  $(this).addClass('is-active');

  if (filter === 'all') {
    $('.item').show();
  } else {
    // filter クラスを持つ要素のみ表示
    $('.item').hide();
    $('.item.' + filter).show();
  }
});

6. hasClass()とis()の違い

hasClass() はクラス名の存在チェック専用ですが、is() はより汎用的で任意のCSSセレクタで要素を判定できます。

// hasClass() - クラス名のみ指定（高速・シンプル）
if ($('#el').hasClass('active')) { ... }

// is() - 任意のセレクタで判定（柔軟）
if ($('#el').is('.active')) { ... }          // クラス
if ($('#el').is(':visible')) { ... }          // 表示状態
if ($('#el').is(':checked')) { ... }          // チェック状態
if ($('#el').is('[disabled]')) { ... }        // 属性
if ($('#el').is('input[type="text"]')) { ... } // タグ+属性

// filter()との組み合わせ
var $activeItems = $('.item').filter('.active');
console.log($activeItems.length + '件がアクティブ');

7. クラス vs data()属性：状態管理の使い分け

UIの状態を保持する方法には「クラス」と「data属性」があります。使い分けの基準を理解しておくとコードが整理されます。

// ===== クラスで状態を管理（スタイルと連動する場合）=====
// .is-open クラスで開閉状態 + CSSで見た目を制御
$('.panel').addClass('is-open');  // → CSSで height や opacity が変わる

// ===== data()で状態を管理（内部データを保持する場合）=====
// 表示/非表示に直接関係しない、ロジック上の状態を保存
$('.item').data('selected-count', 3);
var count = $('.item').data('selected-count');

// ===== 組み合わせパターン =====
// CSSと連動する状態 → クラス
// 数値・文字列・オブジェクト型のデータ → data()
$('#upload-btn').on('click', function () {
  $(this).addClass('is-uploading');          // クラス: CSSでスピナー表示
  $(this).data('upload-id', generateId());   // data: 内部IDを保持

  $.ajax({
    complete: function () {
      $('#upload-btn').removeClass('is-uploading');
    }
  });
});

まとめ

jQueryの hasClass() はシンプルですが、クラスをUIの状態フラグとして使う設計思想と組み合わせると強力です。「スタイルが変わる状態にはクラス、内部データにはdata()」を基本に使い分けてください。

関連記事: jQueryのaddClass/removeClass/toggleClass/hasClass完全解説 / jQueryアコーディオンの実装完全ガイド（クラス切り替え活用）

よくある質問（FAQ）