用語集に戻る
Web開発中級

classList

classlist

一言で言うと

クラスの追加・削除・トグルを行う API。

もう少し詳しく

一言で言うと

クラスの追加・削除・トグルを行う API。

もう少し詳しく

クラスの追加・削除・トグルを行う API。IT エンジニアリングの現場で頻繁に登場する概念のひとつで、関連する仕組みやベストプラクティスと合わせて理解しておくと応用が利きます。

Web 開発で頻出する概念で、ブラウザ環境(フロントエンド)専用の DOM API です。HTML 要素が持つ CSS クラスを DOMTokenList として表し、add() でクラスを追加、remove() で削除、toggle() で付け外しの切り替え、contains() で存在確認、replace() で別クラスへの置換を行う 5 つのメソッドが主要な操作として使われます。

実務でどう使うか

  • フロントエンドエンジニア ── ボタン押下時のスタイル切り替え、タブ UI のアクティブ状態制御、モーダルの開閉、アニメーションのトリガーなど、インタラクション実装で日常的に使う。デベロッパーツールの Elements タブで要素のクラス属性の変化をリアルタイムに確認できます

  • PM・デザイナー ── インタラクションの仕様(ボタン押下時のスタイル変化など)を記述する際に、classList.toggle などの挙動を理解しておくと実装者との認識合わせがしやすくなります
  • 関連する章

    Ch151 で詳しく学べます。

    関連する用語

    この用語を学べるコース

    この用語を実際に使ってみよう

    チョットデキルなら、5分のレッスンで実際にコードを書いて学べます。

    コース一覧を見る