classlistとは？初心者にもわかる使い方と基本解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

classlistとは何か

classListは、HTML要素のクラスを扱うためのとても便利な機能です。要素が持つ class 属性を配列のように操作できるため、複数のクラスを一度に追加・削除・確認することが簡単にできます。

この機能は DOM の要素を取得した後に使います。例: const el = document.querySelector('.menu-item'); という具合に、対象の要素を取り出してから classList を操作します。

基本的な使い方

以下のように使います。<span>element.classList は、クラス名の配列のような振る舞いをします。クラスを管理する際に、文字列の連結や分解を自分で行う必要はありません。

例1: クラスを追加する

ある要素に active クラスを追加したい場合、element.classList.add('active') と書くのが基本です。

例2: クラスを削除する

active クラスを削除するには、element.classList.remove('active') を使います。

例3: クラスを切り替える

現在の状態に応じてクラスを切替えるには、element.classList.toggle('hidden') を使います。第二引数を使えば true/false を強制的に付与または削除できます。

例4: クラスの有無を確認する

要素が特定のクラスを持っているかを知りたい場合は、element.classList.contains('active') を使います。

よく使うメソッド一覧

add(...tokens)	1つ以上のクラスを一度に追加します。	element.classList.add('active', 'highlight')
remove(...tokens)	1つ以上のクラスを削除します。	element.classList.remove('hidden')
toggle(token, force)	クラスの有無を切替。force を使えば true/false で強制付与または削除ができます。	element.classList.toggle('visible', true)
contains(token)	指定のクラスがあるかどうかを真偽値で返します。	element.classList.contains('active')
item(index)	指定したインデックスのクラス名を返します。	element.classList.item(0)
length	現在のクラスの数を取得します。	element.classList.length

注意点とヒント

classListは現代の主要なブラウザでサポートされています が、古いブラウザや特定の旧バージョンの Internet Explorer では使えません。互換性を確認する際は、対象の環境を想定しておくと安心です。

実践のヒント

実際のHTMLとJavaScriptの組み合わせ例です。以下はわかりやすい最小の例です。

HTML

JavaScript

const box = document.getElementById('box');

box.classList.add('active');

まとめ

classListを使えば、クラスの追加・削除・確認・切替が直感的に行え、JSのコード量を大幅に減らせます。初心者のうちから慣れておくと、後のHTML/CSSの勉強にも役立ちます。

classlistの関連サジェスト解説

classlist.toggle とは: classList.toggle は、要素のクラスを現在の状態に応じて追加または削除する、JavaScript のとても便利な機能です。正確には Element.prototype.classList の toggle メソッドで、第一引数にはクラス名の文字列を渡します。第二引数の force を true/false にすると、真偽値に応じて必ず追加または削除を行います。引数を渡さなければ、要素にそのクラスがあれば削除し、なければ追加します。戻り値は、操作後にそのクラスが要素に残っているかどうかを真偽値で返します。使い方の基本は次の通りです。要素を取得して、toggle を使います。例えば:const btn = document.querySelector('#btn');btn.classList.toggle('active');この操作を実行すると、ボタンに active がついたり外れたりします。別の例として、force を使う方法もあります。document.querySelector('#menu').classList.toggle('open', true); と書くと open は必ずつきます。false を渡すと必ず外れます。実務での使い道としては、メニューの開閉、モーダルの表示、ダークモードの切替えなどが多いです。注意点としては、クラス名は空白を含まない1つのトークンであること、引数に渡す文字列が意図した通りのクラス名になっているかを確認すること、classList が使えない古いブラウザには対応が必要なことです。
classlist.add とは: classList.add とは、HTML要素のクラスを追加する JavaScript の機能です。classList は要素の class 属性の中身を列挙したり、操作したりする便利なオブジェクトで、その中の add は新しいクラス名を一つ以上追加します。例えば次のように使います:const el = document.getElementById('box');el.classList.add('active'); // すでにある場合は重複して追加されません複数のクラスも一度に追加できます:el.classList.add('visible', 'highlight');この操作は element.className = '新しいクラス名' のように全体を書き換える方法とは違い、既存のクラスを壊さずに追加のみを行います。クラス名は空白で区切って CSS 側のスタイルを適用します。例えば CSS で .active などのスタイルが定義されていれば、add でそのスタイルが適用されます。互換性については、現代のほとんどのブラウザでサポートされています。古い IE のバージョンでは動かないことがありますが、IE10 以降で利用可能です。実際の開発では、イベントの反応を良くしたいときや、ボタンの状態を切り替えるときに classList.add を使うのが便利です。なお、classList には他にも remove、toggle、contains などのメソッドがあり、状況に応じて使い分けると良いでしょう。この説明を読んで、実際に自分のページでどんな場面で add を使えるか、想像してみてください。

classlistの同意語

クラスリスト: HTML要素に設定されたクラス名の集合。要素の class 属性に列挙されているすべてのクラス名を指します。
クラス名のリスト: 要素に付与されたクラス名を並べたもの。空白で区切られたクラス名の集合を指します。
クラス属性の一覧: 要素の class 属性に含まれるクラス名の一覧。class属性の値をスペース区切りで解析した結果です。
HTMLクラス名一覧: HTML要素に適用されるクラス名の一覧。CSSのスタイル適用先やJSでの参照対象になります。
要素のクラス名集合: その要素が持つクラス名の集合。複数のクラス名を同時に扱うことができます。
CSSクラス名の集合: CSSでスタイルを適用する際のクラス名の集合。要素の見た目を変えるラベルの集まりです。
要素のクラス: 要素が持つクラス名そのものを指す表現。クラス名の総称として使われます。
クラス名のコレクション: 要素に付与されたクラス名の集まり。反復処理や検索に適したコレクション形式です。
クラス集合: 要素のクラス名の集合。複数のクラス名を一つのまとまりとして扱う表現です。
クラス名セット: クラス名の集合（重複なし）。プログラムでの操作に適した用語です。
要素のクラスセット: 要素が持つクラス名の集合。クラス名を集合として扱う表現です。

classlistの対義語・反対語

空のクラスリスト: 要素の classList が空で、クラスを一つも持っていない状態のこと。見た目にはクラスが付いていない状態と同義に使われることが多い。
クラス属性なし: HTML要素に class 属性自体が設定されていない状態のこと。「クラスを持っていない」最も直接的な表現の一つ。
クラス名なし: 要素に割り当てられたクラス名が一つもない状態のこと。クラスリストが空である状態とほぼ同義。
要素がクラスを持っていない状態: 要素が CSS クラスを一つも持たない状態を指す、日常的な言い換え。
className（文字列としてのクラス）」: classList とは別に、クラスをスペース区切りの文字列として扱う className プロパティのこと。意味は異なるが、“クラスがない状態”という観点で対になる表現として使われることがある。
すべてのクラスを削除した状態: JavaScript で全てのクラスを削除して、クラスを持たない状態にする操作・結果を指す。
非クラス要素: クラスを持たない要素を日常的に表す表現。厳密には要素は classList を持つが、クラスが存在しない状態を示す言い換えとして用いられることがある。

classlistの共起語

Element: HTMLの要素。classListはこの要素のクラス属性を扱います。
DOMTokenList: classListが返すコレクションの型で、クラス名を“トークン”として管理します。
add: 複数のクラス名を一度に要素へ追加するメソッド。
remove: 指定したクラス名を要素から削除するメソッド。
toggle: 指定したクラス名の有無を切り替えるメソッド。第二引数で状態を強制設定可能。
contains: 要素が特定のクラスを持っているかを調べるメソッド。
replace: 古いクラス名を新しいクラス名に置き換えるメソッド。
item: インデックス番号でクラス名を取得するメソッド。
length: 現在のクラスの個数を表すプロパティ。
value: 全てのクラス名をスペース区切りの文字列として返すプロパティ。
スペース区切り: クラス名はスペースで区切られたトークンとして管理されます。
トークン: クラス名を構成する最小単位の語（トークン）です。
クラス属性: HTMLのclass属性。classListはこの属性の値を操作します。
HTML: ウェブページを構成するマークアップ言語。
JavaScript: ウェブページに動的な動作を加えるプログラミング言語。classListを操作するのに使います。
CSSクラス: スタイルを適用するための名前。classListはこの名前の集合を管理します。
CSS: スタイルシートの略。要素の見た目を決めるルールを含みます。
ライブリスト: DOMTokenListはライブリストで、class属性の変更を即座に反映します。
クロスブラウザー: ブラウザ間の互換性。classListは現代のブラウザで広くサポートされていますが、古い環境では注意。
ポリフィル: 古いブラウザでclassList機能を使えるようにする追加のライブラリやコード。
className: HTMLのclass属性の文字列形式を返したり設定するプロパティ。

classlistの関連用語

classList: 要素の class 属性を配列のように操作するための API。実体は DOMTokenList というライブなコレクションを返します。
DOMTokenList: classList や他の要素のトークン集合を表すインターフェース。length や item、contains、add、remove、toggle、replace などの操作を提供します。
className: 要素の class 属性の値を文字列として取得/設定する従来の方法。複数クラスはスペース区切りの文字列で扱います。
class attribute: HTML 要素の属性のひとつで、要素に適用する CSS クラスを指定します。classList の対象になります。
CSS class: CSS によるスタイル適用のためのクラス名。複数指定して要素を装飾します。
add: DOMTokenList のメソッド。指定したクラスを要素に追加します。既にあるクラスは重複せず追加されません。
remove: DOMTokenList のメソッド。指定したクラスを要素から削除します。
toggle: DOMTokenList のメソッド。指定したクラスの有無を反転します。第二引数で強制的に追加/削除を指定できます。
contains: DOMTokenList のメソッド。要素が特定のクラスを含んでいるかを真偽値で返します。
replace: DOMTokenList のメソッド。1つのクラスを別のクラスに置換します。
item: DOMTokenList のメソッド。インデックス番号に対応するクラス名を返します。
length: DOMTokenList のプロパティ。現在のクラス数を返します。
value: DOMTokenList のプロパティ。クラス名の列をスペース区切りの文字列として取得/設定します。
getElementsByClassName: クラス名で要素を取得する古典的な DOM メソッド。ライブな HTMLCollection を返します。
querySelectorAll: CSS セレクタを使って要素を一括取得する現代的な DOM メソッド。静的 NodeList を返します。
HTMLCollection: getElementsByClassName などが返す、要素の集合の実装。配列風ですがインデックスでアクセスする形式です（ライブのこともある）
NodeList: querySelectorAll などが返すノードの集合。ブラウザによっては静的/ライブの違いがあります。
スペース区切り: class 属性には複数のクラスをスペースで区切って並べます。クラス同士の空白は削除されます。
BEM: クラス名の命名規則の一つ。Block、Element、Modifier の頭文字を使い、階層的に命名します。SEO自体には直接影響しませんが可読性・保守性を高めます。
セマンティクスとクラス: クラス名は意味づけのために使います。適切な命名をすることでコーディングやアクセスビリティが向上します。
ライブコレクション: classList が返す DOMTokenList は実際の要素と連動して変化する“ライブ”なコレクションです。
パフォーマンスの注意: 頻繁に classList を操作するとリフローやペイントが発生し、描画が遅くなる可能性があります。まとめて変更する工夫が有効。