JScript Katana

JavaScriptでクラスを追加する方法｜classList.addの基本・応用・トラブル対策まで解説

DOM・ブラウザ操作
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. はじめに

JavaScript を使って Web ページのデザインや動きを変更したいとき、「特定の要素にクラスを追加する」操作は非常に頻繁に登場します。ボタンを押したらメニューが開く、スクロールしたらヘッダーが縮む、画像にアニメーションが付く――こうした動きのほとんどは、DOM 要素にクラスを付けたり外したりすることで実現されています。

中でも classList.add() は、余計な手間なくクラスを追加できる便利なメソッドです。従来の className を書き換える方法と比べて安全で分かりやすく、現在の JavaScript では標準的な手法として広く使われています。

しかし、実際に使おうとすると次のような疑問を持つ方も多いのではないでしょうか。

  • 「正しい書き方がよく分からない」
  • 「複数のクラスを追加するにはどうすればいい？」
  • 「クラスを追加したのに画面が変わらないのはなぜ？」
  • 「toggle() や contains() とどう使い分けるの？」

本記事では、こうした疑問をすべて解消できるよう、classList.add() の基本から応用、実践例、さらに初心者がつまずきやすいポイントまで詳しく解説していきます。

まずは JavaScript によるクラス追加がどのような場面で役立つのか、そしてなぜ学ぶべきなのかを丁寧に整理しながら、スムーズに次のステップへ進めるように構成しています。

次は、「クラスを追加する」という操作の意味や仕組みを、初心者にも理解しやすい形で説明していきます。

2. 「クラスを追加する」とは何か？

Web ページは、HTML・CSS・JavaScript の3つが役割を分担して動いています。その中でも、JavaScript を使って画面の見た目や動きを変えたいときに重要なのが「クラス（class）」の操作です。

HTMLの class 属性とは？

HTML 要素に設定されている class 属性は、要素に名前をつける仕組みです。
この名前をもとにして、CSSがスタイルを当て、JavaScript が動きを付けることができます。

例えば次のような HTML があるとします。

<div class="box"></div>

box というクラスに対して CSS が設定されていれば、見た目が変わります。

.box {
  background-color: lightblue;
}

つまり、どのクラスが付いているかによって、要素がどのように見えるか・どのように動くかが決まるわけです。

JavaScriptでクラスを追加する意味

Web ページは、固定の見た目だけでなく、ユーザーの操作に応じて動かすことが求められます。

  • ボタンを押したらメニューを表示
  • スクロールしたらヘッダーを固定
  • 画像にアニメーションをつける
  • 入力チェックでエラー状態を見た目で示す

こうした動作は、JavaScript が class を追加（add）したり削除（remove）したりすることによって実現できます。

クラスは「状態」を表すラベルのようなものです。
JavaScript が状態を切り替え、CSS がその状態に応じて画面を変える、という流れが一般的です。

classList が登場した理由

以前は、クラスを追加するときに className を直接書き換えていました。

element.className += " active";

しかし、この方法には次のような問題があります。

  • 重複してクラスが追加される
  • 空白の位置が間違えるとバグの原因になる
  • 読みやすさ・拡張性が低い

こうした課題を解決するために登場したのが classList というインターフェイスです。

classList は、クラスの追加・削除・切り替えなどを、より安全かつ直感的に扱えるようにした仕組みで、現在の JavaScript では標準的に使われています。

この記事で扱う操作対象：classList.add()

今回のテーマである classList.add() は、「この要素に新しいクラスを追加する」ためのメソッドです。

  • 重複しても追加されない
  • 複数クラスをまとめて追加できる
  • コードがシンプルでわかりやすい

とてもよく使われる操作のため、JavaScript の DOM 操作を学ぶなら必ず知っておきたい基本です。

3. 基本的な使い方：classList.add の書き方

JavaScript で要素にクラスを追加したいとき、最もシンプルで確実な方法が classList.add() です。まずは基本の書き方から、複数クラスの追加まで順番に見ていきます。

classList.add の基本構文

もっとも基本的な書き方は次のとおりです。

element.classList.add("クラス名");

element には、getElementById() や querySelector() で取得した DOM 要素を指定します。

例：ID が “box” の要素に “active” クラスを追加する

<div id="box"></div>

<script>
  const box = document.getElementById("box");
  box.classList.add("active");
</script>

このコードを実行すると、<div id="box"> が次の状態になります。

<div id="box" class="active"></div>

もし CSS 側で .active にスタイルが定義されていれば、画面の見た目が変わります。

複数のクラスをまとめて追加する

classList.add() は、複数のクラスを一度に追加できる点も便利です。

element.classList.add("active", "highlight", "visible");

このように、カンマで区切って複数指定できます。

実例

box.classList.add("active", "fade-in");

これだけで、アニメーション用クラスと状態を表すクラスをまとめて付けることもできます。

すでに存在するクラスは重複しない

classList.add() の嬉しいポイントは、同じクラスを何度追加しても重複しないことです。

box.classList.add("active");
box.classList.add("active"); // ← 重複しない

古い書き方では " active active" のような重複が起きやすかったため、これは大きなメリットです。

対応ブラウザ

classList は主要ブラウザのほとんどで使えます。
ただし、非常に古い Internet Explorer（IE9 未満）は非対応のため、歴史的なプロジェクトを扱う場合だけ注意が必要です。

現代の Web 開発では、classList を使うのが標準となっています。

ここまでで classList.add() の基本的な使い方は整理できました。
次は、toggle や contains と組み合わせた応用テクニックを紹介していきます。

4. 応用テクニック・よくあるパターン

classList.add() を使いこなせるようになると、UI の動きやインタラクションを簡単にコントロールできるようになります。このセクションでは、日常的に使われる操作や、実際の開発現場で頻出するパターンを解説します。

クラスの切り替え：classList.toggle()

特定の要素に「ON / OFF」の状態を持たせたい場合、classList.toggle() が便利です。

element.classList.toggle("active");
  • クラスが付いていなければ追加
  • 付いていれば削除

という動作を自動で行います。

▼ 例：メニューの開閉

menuButton.addEventListener("click", () => {
  nav.classList.toggle("open");
});

クリックするたびに open クラスが切り替わり、メニューが開閉するような仕組みを簡単に実装できます。

クラスが含まれているか確認：classList.contains()

条件分岐の中でクラスを判定するときに使うメソッドです。

if (element.classList.contains("active")) {
  console.log("すでに active クラスが付いています");
}

アニメーション制御、フォーム検証、ボタンの状態切り替えなど、さまざまな場面で活躍します。

クラスの置き換え：classList.replace()

あるクラスを別のクラスに切り替えたい場合は、replace() が簡潔です。

element.classList.replace("old", "new");

従来の remove＋add の組み合わせを、1行で書けるため便利です。

複数の要素に一括でクラスを追加する

クラス操作は1つの要素だけとは限りません。例えば、同じクラスを持つ複数要素に対してループで処理を行うことが多くあります。

const items = document.querySelectorAll(".item");
items.forEach(item => {
  item.classList.add("highlight");
});

ページ内の要素をまとめて装飾したり、スクロール時に一斉にアニメーションさせたりと、実務でもよく使われるパターンです。

UI 状態の制御に活用する

JavaScript のクラス操作は、UI の振る舞いを管理するための“状態管理”として非常に強力です。

▼ よくある状態クラスの例

  • .is-active：ボタンやタブが選択されている状態
  • .is-open：メニューやモーダルが開いている状態
  • .is-hidden：要素を非表示にする状態
  • .dark-mode：テーマ切り替え

CSS と組み合わせることで、視覚的な変化を簡単に実現できます。

アニメーションやトランジションと組み合わせる

classList.add は、CSS アニメーションと相性抜群です。

element.classList.add("fade-in");

CSS 側にアニメーションを定義しておけば、JavaScript は「クラスを付けるだけ」で動きを表現できます。

.fade-in {
  animation: fadeIn 0.4s ease forwards;
}

ロジックとデザインをきれいに分離できるため、保守性が高まります。

大量の DOM 操作をする場合の注意

多くの要素に一気にクラスを付けると、ブラウザの再描画が頻繁に起こり、パフォーマンスが低下することがあります。

対策としては以下が効果的です。

  • あらかじめ要素を変数にキャッシュする
  • レイアウト変化を伴う操作はまとめて行う
  • 重い処理は requestAnimationFrame で分割する

大規模サイトやアニメーションが多いページでは特に意識しておきたいポイントです。

5. よくあるトラブルとその対処

classList.add() はシンプルで便利ですが、実際の開発現場では「思った通りに動かない」という場面が少なくありません。このセクションでは、初心者が特につまずきやすい問題と、その解決方法を分かりやすく解説します。

要素が取得できていない（null になる）

もっとも多い原因が「そもそも要素が取得できていない」ケースです。

例えば、以下のようなコードで null が返っていると、classList.add() は動きません。

const box = document.getElementById("box");
box.classList.add("active"); // box が null の場合はエラー

▼ 主な原因

  • スクリプトが HTML より先に実行されている
  • ID 名やクラス名が間違っている
  • そもそも該当する要素が存在しない

▼ 解決方法

  • スクリプトを </body> の直前に置く
  • DOMContentLoaded イベント内で実行する
  • ID・クラス名を正しく確認する
document.addEventListener("DOMContentLoaded", () => {
  const box = document.getElementById("box");
  if (box) {
    box.classList.add("active");
  }
});

クラスを追加したのに見た目が変わらない

classList.add() は正常に動いているのに、画面に変化が見られない場合があります。

▼ 主な原因

  • CSS にそのクラスが定義されていない
  • セレクタが間違っている
  • ほかのスタイルが優先されて打ち消されている
  • transition などが効いていない

▼ 確認ポイント

  • .active { ... } のようなスタイルが存在するか
  • 指定の強さ（優先度）で勝てているか
  • ブラウザの開発者ツールでクラスが付いているか確認する

初心者の方は「JavaScriptが悪い」と思いがちですが、実際は CSS 側の問題であることが非常に多いです。

クラスが重複する問題（className を使った旧方式）

古い記述方法でクラスを追加すると、重複問題が発生しやすくなります。

box.className += " active";  // " active active" のように重複する

classList.add() を使えば重複しないため、今後は基本的にこちらを使えば安心です。

別のクラスが優先されて思った動きにならない

CSS では、セレクタの優先度によって適用されるスタイルが決まります。

例えば以下のような場合：

.box.active {
  color: red;
}

#box {
  color: blue;
}

ID セレクタ（#box）の方が強いため、active を追加しても色が変わりません。

▼ 対策

  • セレクタの強さを見直す
  • .box.active の方をより強い指定にする
  • 必要があれば !important を活用（多用はおすすめしない）

IE など古いブラウザで動かない

classList はモダンブラウザでは広くサポートされていますが、IE9 未満では利用できません。

古い環境をサポートする必要がある場合のみ、フォールバックが必要です。

element.className += " active";

ただし、現代のフロントエンド開発ではほとんど必要ありません。

アニメーションが意図したタイミングで動かない

CSS アニメーションを classList.add() で発火させる場合、追加タイミングが早すぎるとアニメーションが動かないことがあります。

▼ 解決策

  • 少し時間を置いてクラスを付ける
  • requestAnimationFrame を活用する
requestAnimationFrame(() => {
  element.classList.add("fade-in");
});

パフォーマンス低下に注意（要素が多い場合）

大量の要素にまとめてクラスを付けると、再描画（reflow）が複数回発生し、カクつきの原因になります。

▼ 対策

  • ループ前に要素をキャッシュしておく
  • クラス付与の回数を最小限に
  • レイアウト計算を伴う操作はまとめて行う

ここまでで、classList.add() を扱う上での主要なトラブルとその解決方法を押さえました。
次は、実際に役立つ「よくあるユースケース」や具体的な活用例を紹介します。

6. 実践例：ユースケース別の活用シーン

JavaScript でクラスを追加する操作は、Webサイトのあらゆる場面で利用されています。このセクションでは、実際の開発でよく登場するユースケースを取り上げ、classList.add() をどのように活用できるのか具体的に紹介します。

モーダルウィンドウの表示・非表示

ボタンを押したら画面中央にモーダル（ポップアップ）が表示される動きは、多くのWebアプリで採用されています。その仕組みは非常にシンプルで、クラス操作だけで実現できます。

▼ HTML

<button id="openModal">開く</button>
<div id="modal" class="modal">
  <p>モーダルの内容</p>
</div>

▼ JavaScript

const open = document.getElementById("openModal");
const modal = document.getElementById("modal");

open.addEventListener("click", () => {
  modal.classList.add("is-open");
});

▼ CSS

.modal {
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

「表示するだけ」の動きなら、JavaScript は クラスを追加する1行だけです。

アコーディオンメニューの開閉

よく見る折りたたみメニューも、クラスの付け外しで簡単に作れます。

title.addEventListener("click", () => {
  content.classList.toggle("open");
});
  • open が付けば表示
  • open がなければ非表示

という基本的な仕組みですが、UI をスッキリさせたい場面で特に便利です。

スクロール連動でヘッダーのスタイルを変える

スクロール量に応じてヘッダーが小さくなったり、影が付いたりする演出も多くのサイトで使われています。

window.addEventListener("scroll", () => {
  if (window.scrollY > 50) {
    header.classList.add("scrolled");
  } else {
    header.classList.remove("scrolled");
  }
});

「スクロール量が一定を超えたらクラスを追加する」というだけで、リッチな見た目を演出できます。

入力フォームのエラー表示

フォーム入力のバリデーションにおいて、エラーメッセージや赤枠を表示する際にもクラス追加が活躍します。

if (!input.value) {
  input.classList.add("has-error");
}

CSS で .has-error に赤枠を設定しておけば、エラー状態が視覚的に分かりやすくなります

ダークモード／ライトモード切替

最近のWeb開発で増えているテーマ切り替えも、クラス追加だけで簡単に実現できます。

toggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
});

CSS側で色や背景を切り替えるだけで、全体のトーンを変えられます。

複数要素を同時にアニメーション開始

スクロールしたタイミングで複数の要素にフェードインを仕込む場合もあります。

items.forEach(item => {
  item.classList.add("fade-in");
});

アニメーション開始のタイミングを制御できるため、サイトの印象を大きく向上させることができます。

SPA（シングルページアプリ）の画面切替

Vue や React を使わないシンプルな SPA でも、画面の表示・非表示をクラス操作で切り替えるパターンはよくあります。

pages.forEach(page => page.classList.remove("is-active"));
currentPage.classList.add("is-active");

画面そのものの切り替えも、基本は状態クラスの付け替えです。

これらの例から分かるように、classList.add() は「UIの状態をコントロールするための最もシンプルで強力な手段」です。

次は、さらにクラス操作を行う際のベストプラクティスについて解説します。

7. SEO・Web制作観点からの補足／ベストプラクティス

classList.add() を正しく使えるようになると、Webページの見た目だけでなく、保守性・読みやすさ・パフォーマンスまで大きく改善できます。このセクションでは、長期的に役立つ「設計の考え方」や「実装のコツ」を解説します。

クラス名は「状態」を意識して命名する

クラス名はサイト全体で使われる重要な設計要素です。
特に JavaScript で操作するクラスは、要素の“状態”を分かりやすく示す名前にしておくと利便性が高まります。

▼ よく使われる命名例

  • .is-active：選択されている、またはアクティブな状態
  • .is-open：メニューやモーダルが開いている状態
  • .is-hidden：一時的に非表示
  • .is-error：エラー状態

「状態を表すクラス」は、CSS と JavaScript が連携しやすく、保守が圧倒的に楽になります

BEMやケバブケースによる統一感のある設計

大規模サイトでは、クラス名のルールが不明確だと管理が難しくなります。
そのため、次のようなスタイルガイドを採用すると良いでしょう。

▼ 推奨書き方

  • header__item--active（BEM）
  • menu-button（ケバブケース）

一方、menuButton のようにキャメルケースは CSS の世界では一般的ではないため、ケバブケースがおすすめです。

JavaScript の役割は「状態を変えること」に限定する

UI を作るとき、JavaScript に複雑なスタイルを直接書き込むと、保守性が低下します。

// 悪い例（スタイルを JS に直書き）
element.style.color = "red";

▼ 良い例：class を追加して CSS で見た目を管理

element.classList.add("is-error");

.is-error {
  color: red;
}
  • デザイナーやフロント担当が CSS だけで調整できる
  • 状態の変更は JS が担当し、見た目は CSS が担当
  • 役割分離がはっきりして再利用性が高い

これが現代のフロントエンドの基本的な考え方です。

パフォーマンスを意識した DOM 操作

DOM 操作は軽く見えますが、ページ構造が再計算されるため負荷がかかります。
特に大量の要素に対してクラス追加を行う場合は、次の点を意識しましょう。

  • 事前に querySelectorAll の結果をキャッシュする
  • forEach 内でレイアウト計算を伴うプロパティを触らない
  • 描画タイミングは requestAnimationFrame に寄せる

例えばスクロールイベント内で無制御に classList.add() を実行すると、カクつきの原因になります。必要に応じて「一定間隔で処理する（スロットリング・デバウンス）」などの手法を取り入れるとより快適です。

アクセシビリティを考慮したクラス操作

状態の変化をクラスだけで管理する場合、視覚的には問題がなくても、スクリーンリーダーがその状態を正しく理解できないケースがあります。

▼ よくある対策

  • 開閉メニューには aria-expanded 属性も併用
  • モーダルには aria-hidden の切り替え
  • フォーカス制御（タブ移動の順序）

classList.add() だけで完結しない部分も、アクセシビリティ向上のためには意識しておきましょう。

まとめ：読みやすさ・再利用性を重視した設計へ

classList.add() はただの「クラス追加」ですが、使い方次第でサイト全体の構造を整え、保守性の高い実装に導くことができます。

  • 状態を表すクラス名
  • CSS と JavaScript の役割分担
  • パフォーマンス最適化
  • アクセシビリティへの配慮

これらを意識することで、クラス操作はより強力な武器になります。

8. まとめ

JavaScript の classList.add() は、DOM 要素にクラスを追加するための最も基本的でありながら強力な機能です。クラスの付け外しを正しく理解することで、Web ページの表現力は大きく広がります。

本記事では、以下の流れで解説してきました。

  • クラスを追加する意味と役割
    クラスは HTML 要素の“状態”を表し、CSS と JavaScript が連携するための重要な仕組み。
  • classList.add の基本的な書き方
    シンプルな構文で、重複を気にせずクラスを追加できる。
  • toggle() や contains() を使った応用テクニック
    状態の切り替え、複数クラスの追加、置き換えなど、日常的に使う操作を体系的に整理。
  • よくあるトラブルとその対処方法
    要素取得の失敗や CSS の競合など、初心者がつまずきがちなポイントを丁寧に解説。
  • 実践的なユースケース
    モーダル表示、アコーディオン、テーマ切替など、実務ですぐ役立つコード例を紹介。
  • 設計のベストプラクティス
    クラス名の付け方、CSS との役割分担、アクセシビリティ、パフォーマンスなど、長く使える設計思想にも触れた。

JavaScript のクラス操作は、見た目や動きに関わる UI 制御の中心に位置します。特別なライブラリがなくても、クラスを追加するだけで実現できる UI は非常に多いため、まずは本記事の内容を使って、簡単な動作から実際に試してみるのがおすすめです。

次のステップとしては、以下のテーマに進むと理解が深まります。

  • classList.remove() によるクラス削除
  • classList.toggle() の条件付き切り替え
  • CSS アニメーションとの組み合わせ
  • イベントリスナーと UI 制御の連携

クラス操作を自在に扱えるようになれば、Web 制作・フロントエンド開発の大きな武器になります。ぜひ、さまざまな場面で試してみてください。

9. FAQ（よくある質問）

Q1. className += " newClass" と classList.add("newClass") はどちらを使うべきですか？

通常は classList.add() を使うのがベストです。

className を直接書き換える方法は、

  • クラス名の重複が発生しやすい
  • 空白の位置を誤るとバグの原因になる
  • 可読性が低い

といった問題があります。

一方、classList.add() は重複を自動的に避け、複数クラスをまとめて追加できるため、現代の Web 開発ではこちらが標準的な方法です。

Q2. 複数のクラスを一度に追加することはできますか？

はい、できます。

element.classList.add("active", "highlight", "visible");

このように複数のクラス名をカンマ区切りで指定できます。
UI の状態をまとめて切り替える際に便利です。

Q3. クラスを追加したのに見た目が変わりません。なぜですか？

以下の原因がよくあります。

  • CSS に該当クラスのスタイルが存在しない
  • CSS の優先度（セレクタの強さ）で負けている
  • 要素が取得できていない（null）
  • CSS アニメーションの発火タイミングが早すぎる

まずはブラウザの開発者ツールで「クラスが正しく付いているか」「CSS がどのように適用されているか」を確認するのが最短の解決ルートです。

Q4. 古いブラウザ（IEなど）でも classList は使えますか？

IE9 未満の環境では classList はサポートされていません。

現在のモダンブラウザ環境ではほぼ問題ありませんが、特殊な案件で非常に古いブラウザをサポートする場合だけ注意が必要です。

Q5. ボタンを押したときだけクラスを追加したいのですが、どう書けばいいですか？

イベントリスナーと組み合わせるのが基本です。

button.addEventListener("click", () => {
  element.classList.add("active");
});

UI 操作系では最もよく使われるパターンです。

Q6. クラスを追加するタイミングが早すぎるとアニメーションが動かないことがあるのはなぜですか？

CSS アニメーションは、要素が描画された後にクラスが付かないと発火しないケースがあります。

その場合は、以下のように少し時間を置いてクラスを追加すると解決できます。

requestAnimationFrame(() => {
  element.classList.add("fade-in");
});

Q7. 大量の要素に対してクラス追加を行うと重くなることはありますか？

はい、あります。

DOM 操作はブラウザに負荷がかかるため、大量の要素に対して短時間に classList.add() を実行すると、カクつきや処理遅延の原因となります。

対策としては以下が有効です。

  • 要素の取得結果をキャッシュする
  • 不要な DOM 操作を減らす
  • 処理を小分けにして実行する（requestAnimationFrame など）

Q8. クラス操作は SEO に影響しますか？

直接的な SEO ランキングには影響しませんが、UX（ユーザー体験）を改善する動きは間接的にプラスです。

例えば、

  • 使いやすいモバイルメニュー
  • 読みやすいアコーディオン
  • スムーズな画面切り替え
    などは跳ね返り率（直帰率）低下につながります。

UX 改善は結果的に SEO に好影響を与えるケースが多いです。

Q9. classList.add() と jQuery の addClass() はどう違いますか？

機能としてはほぼ同じですが、classList.add() はネイティブな JavaScript の標準機能であり、jQuery に依存しない点が大きく異なります。

近年の開発では、ライブラリに頼らずに実装するため、classList.add() が推奨される場面が増えています。

広告