JavaScriptのclassListとは何か？―初心者エンジニアのための徹底解説

2025年6月11日 最終更新日時 : 2025年6月11日 山崎講師山崎講師
icon8

こんにちは。ゆうせいです。

HTML要素に対して「クラス（class）」を付けたり外したりしたいとき、どんなコードを書いていますか？

こんな風に文字列を操作していませんか？

element.className = "box red";

でも、もっと便利で安全にクラスを操作できる方法があるんです。それが classList です。

「え、何それ？」「クラス名って文字列じゃないの？」という新人エンジニアの方に向けて、classList の正体と使い方をていねいに解説していきます！

classListとは何か？

classList は、HTML要素が持つclass属性の一覧を操作するための特別なプロパティです。

正確には、classListはDOMTokenListというオブジェクトです。

このオブジェクトには、クラス名を配列のように扱えるメソッドがたくさん用意されていて、文字列操作よりずっと安全でスマートにクラスの追加・削除・確認ができるんです！

なぜclassListが必要なのか？―classNameとの違い

classNameの問題点

element.className += " active";
  • classNameは単なる文字列なので、「すでにそのクラスがあるかどうか」の確認や制御が難しい
  • 意図せず空白を忘れると、クラス名がくっついてバグに

たとえば：

element.className = "btn";
element.className += "active"; // → "btnactive"（ミス！）

classListを使うメリット

  • 配列っぽく扱える
  • クラスの追加・削除・切り替えが一発でできる
  • 重複を防げる
  • クラスの存在チェックも簡単

classListの主なメソッド一覧

メソッド名概要例
add()クラスを追加element.classList.add('active')
remove()クラスを削除element.classList.remove('hidden')
toggle()クラスを切り替え（あるなら削除、なければ追加）element.classList.toggle('open')
contains()クラスがあるか調べる（true/false）element.classList.contains('dark')
replace()クラスを別のものに置き換えるelement.classList.replace('old', 'new')

実例で使ってみよう！

HTML

<button id="myBtn" class="btn">クリック</button>

JavaScript

const btn = document.getElementById('myBtn');

// クラスを追加
btn.classList.add('active');

// クラスを削除
btn.classList.remove('btn');

// あるクラスが含まれているか確認
if (btn.classList.contains('active')) {
  console.log('アクティブ状態です');
}

// クラスの切り替え
btn.classList.toggle('highlight');

配列のようにアクセスすることもできる

console.log(btn.classList[0]); // 最初のクラス名（たとえば "active"）
console.log(btn.classList.length); // クラスの数

これは classList が「配列風のオブジェクト」だからできることです！

よくある間違い

classListは文字列ではない！

console.log(typeof btn.classList); // → "object"

つまり、btn.classList + " new" みたいな操作はエラーになります。文字列結合はできません！

まとめ：classListはクラス操作の最適解！

機能classNameclassList
クラス追加可能（ただし文字列結合）◎ .add()
クラス削除上書き必須◎ .remove()
存在チェック難しい（文字列検索）◎ .contains()
安全性・簡潔さ△◎

classListは現代のフロントエンドでは必須級の知識です！

今後の学習のヒント

さらに理解を深めたい方は、次のテーマにも挑戦してみましょう！

  • イベントと組み合わせたクラス操作（例：クリックでメニューを開く）
  • classList.toggle の第2引数を使った制御
  • クラスベースの状態管理（例：タブUI、モーダルウィンドウ）

classList をマスターすると、UIの動きや状態管理がぐっと楽になります。

ぜひ、いろんなHTML要素で試して体で覚えてみてください！

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
対象読者
山崎講師、新入社員
前の記事
JavaScriptの「this」はJavaと何が違うのか？―新人エンジニアのためのやさしい比較解説
2025年6月11日
次の記事
【初心者必見】innerHTMLとinnerTextの違いとは？―JavaScriptでよく使うけれど混乱しやすい2つをやさしく解説！
2025年6月11日