JavaScriptのclassListとは何か？―初心者エンジニアのための徹底解説
山崎講師
こんにちは。ゆうせいです。
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はクラス操作の最適解！
| 機能 | className | classList |
|---|---|---|
| クラス追加 | 可能（ただし文字列結合） | ◎ .add() |
| クラス削除 | 上書き必須 | ◎ .remove() |
| 存在チェック | 難しい（文字列検索） | ◎ .contains() |
| 安全性・簡潔さ | △ | ◎ |
classListは現代のフロントエンドでは必須級の知識です！
今後の学習のヒント
さらに理解を深めたい方は、次のテーマにも挑戦してみましょう！
- イベントと組み合わせたクラス操作（例：クリックでメニューを開く）
classList.toggleの第2引数を使った制御- クラスベースの状態管理（例：タブUI、モーダルウィンドウ）
classList をマスターすると、UIの動きや状態管理がぐっと楽になります。
ぜひ、いろんなHTML要素で試して体で覚えてみてください！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
