JavaScriptで要素にクラスが存在するか確認する方法｜classList.contains()の使い方

JavaScriptでは、classListプロパティのcontains()メソッドを使うことで、要素に特定のクラスが存在するかどうかを簡単かつ高速に確認できます。

まずはclassList.contains()の基本構文を確認し、その後に実際のユースケースを見ていきましょう。

classList.contains()の基本構文

var element = document.querySelector("selector")
element.classList.contains("class")

上記の汎用例では、柔軟性の高いquerySelector()メソッドを使って、セレクタ名から対象の要素を取得しています。セレクタには、クラスセレクタ、要素セレクタ、その他の種類のセレクタを指定できます。

次に、querySelector()で取得した要素を、宣言しておいたelement変数に代入します。

そして、その変数を通じてelementにclassListプロパティのcontains()メソッドを呼び出します。contains()メソッドの引数（括弧の中）には、存在するかどうかを確認したいクラス名を指定します。

汎用的な例だけでは面白くないので、ここからは実践的な例を見ていきましょう！

実践編：すっきりしたニュースフィードを作る

classList.contains()によるフィルタリング — 実用的なユースケース

さまざまなカテゴリの記事が混在するニュースフィードを持つウェブサイトを訪れたとします。しかし、あなたが読みたいのはテクノロジー関連の記事だけだとしましょう。

ごちゃごちゃしたニュースフィードは見ていてストレスの原因になります。そこで、classList.contains()メソッドを使って、他のカテゴリをすべてフィルタリングしてみましょう。

まず、作業用のコンテンツとしてHTMLを追加します。続いて手早くスタイリングを行い、その後JavaScriptに進みます。

ニュースフィードのHTML

<div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->

このHTMLコンテンツの構成は以下のとおりです。

• 大きな見出し。
• 複数のカテゴリを持つニュースフィード。
• ニュースフィードの外側にある「Technology」ボタン。このボタンを使って、テクノロジー以外のトピックを表示／非表示（トグル）します。

もちろん、上記の例は説明用なので記事数が少なく、ごちゃごちゃした印象はありません。しかし現実の混在ニュースフィードでは、各カテゴリからの無数の記事がフィードを埋め尽くしてしまいます。そんなときこそ、フィルタリングボタンが役立つのです。

CSSスタイリング

以下のCSSはすべて装飾目的のもので省略可能ですが、.js-hideクラスだけは例外です。これは次のセクションでJavaScriptと組み合わせて使うヘルパークラスです。

body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}

.js-hideクラスだけは必ずCSSスタイルシートに追加してください。それではJavaScriptに進みましょう！

JavaScriptコード

以下のコードをJSファイルにコピー＆ペーストしてください。仕組みについてはすぐ下で詳しく解説します。

var btnTechnology = document.querySelector(".btn-technology")
var allNewsCategories = document.querySelectorAll(".news-feed .link")

function showCategoryTechnology() {
  for (var i = 0; i < allNewsCategories.length; i++) {
    if (!allNewsCategories[i].classList.contains("category-technology")) {
      allNewsCategories[i].parentElement.classList.toggle("js-hide")
    }
  }
}
btnTechnology.addEventListener("click", showCategoryTechnology)

JavaScriptコードの仕組み

• まずquerySelector()を使って、クラスセレクタ.btn-technologyからTechnologyボタン要素を取得します。このボタンが、後述のフィルタリング関数のトリガーとなります。取得したボタン要素はbtnTechnology変数に代入します。
• 次にquerySelectorAll()を使って、ニュースフィード（.news-feed）内のすべてのアイテムを取得し、各アイテムのリンクをクラス名（.link）で選択します。取得したすべてのニュースリンクはallNewsCategories変数に代入します。
• 続いて、Technologyボタンがクリックされたときに呼び出される関数showCategoryTechnology() {..}を作成します。
• 関数本体の中では、ニュースフィード要素内のすべてのアイテムをループ処理し、インデックス[i]を使って1件ずつ操作します。
• ループ内には条件分岐のif文を設けています。これは「直前に走査したリストのアイテムのうち、クラス.category-technologyを含まないものがあれば、それらのアイテムに対して.js-hideクラスを引数にclassList.toggleメソッドを実行する」という意味です。
• 最後の行では、ボタン要素にaddEventListener()メソッドを紐付けています。イベントリスナーに「click」イベントを監視するよう指示しており、ボタンがクリックされるとshowCategoryTechnology()関数が呼び出され、このトグル機能を実現するコードブロック全体が実行されます。

allNewsCategories[i]の前につけた!記号（論理否定演算子）が、if文における「〜ではない」という部分を担っています。もし!を削除すると、コードは現在とは逆の動作をしてしまいます。

なお、不要なニュース項目を非表示にする代わりに削除したい場合は、classList.remove()を使うこともできます。しかし多くの場合、ユーザーが項目の表示／非表示を自由に切り替えられる方が使い勝手が良いでしょう。それを実現してくれるのがclassList.toggle()です。

すべてのコードはCodePenで入手できます。

参考資料

• MDN Web Docs：element.classList