JavaScriptのclassList.addメソッド活用方法8選

●classList.addメソッドとは？

JavaScriptを使ってWebページの見た目を自在に操れるようになりたい、そんな願望を抱いている方は多いのではないでしょうか。

そのための強力な味方となるのが、classList.addメソッドです。

このメソッドは、HTML要素のクラスを動的に追加するために使用されます。

クラスを追加することで、CSSで定義されたスタイルを要素に適用できるようになります。

つまり、JavaScriptのコードから要素の見た目を自由に変更できるということです。

これまでJavaScriptの基礎は学んできたものの、classList.addメソッドの使い方までは理解できていないという方もいるかもしれません。

この記事では、このメソッドの基本的な使い方から、実践的なサンプルコードまで丁寧に解説していきます。

○classList.addメソッドの基本的な使い方

classList.addメソッドの基本的な使い方は至ってシンプルです。

操作したい要素を取得し、そのclassList.addメソッドを呼び出すだけです。

具体的には、まずdocument.querySelector()やdocument.getElementById()などを使って、クラスを追加したい要素を取得します。

次に、その要素のclassListプロパティにアクセスし、add()メソッドを呼び出します。

add()メソッドの引数には、追加したいクラス名を文字列で指定します。

○サンプルコード1：単一のクラスを追加する

では、早速サンプルコードを見てみましょう。

ここでは、ボタンをクリックすると、指定した要素に「active」クラスを追加するという例を紹介します。

<button id="my-button">クリックしてね</button>
<div id="my-element">これは私の要素です</div>

const button = document.getElementById('my-button');
const element = document.getElementById('my-element');

button.addEventListener('click', function() {
  element.classList.add('active');
});

このコードでは、まずボタン要素と、クラスを追加する要素を取得しています。

そして、ボタンがクリックされたときに実行されるイベントリスナーを設定しています。

イベントリスナー内では、elementのclassList.add()メソッドを呼び出し、「active」クラスを追加しています。

これで、ボタンをクリックすると、id="my-element"の要素に「active」クラスが追加されます。

CSSで.activeの見た目を定義しておけば、ボタンクリックによって要素の見た目を変更できるというわけです。

○サンプルコード2：複数のクラスを一度に追加する

次は、複数のクラスを一度に追加する方法を見ていきましょう。

classList.add()メソッドは、カンマ区切りで複数のクラス名を指定することができます。

<button id="my-button">クリックしてね</button>
<div id="my-element">これは私の要素です</div>

const button = document.getElementById('my-button');
const element = document.getElementById('my-element');

button.addEventListener('click', function() {
  element.classList.add('active', 'highlighted', 'enlarged');
});

このコードでは、ボタンがクリックされたときに、id="my-element"の要素に「active」「highlighted」「enlarged」の3つのクラスが一度に追加されます。

このように、classList.add()メソッドを使えば、単一のクラスだけでなく、複数のクラスを一度に追加することもできるのです。

これにより、要素のスタイルをより柔軟に変更できるようになります。

●要素のスタイルを動的に変更する

classList.addメソッドを使いこなせるようになったら、次はそれを活用して要素のスタイルを動的に変更していきましょう。

ユーザーの操作に応じてWebページの見た目を変化させることで、よりインタラクティブで魅力的なWebサイトを作ることができます。

ここからは、実際のユースケースを想定したサンプルコードを交えながら、classList.addメソッドの実践的な使い方を解説していきます。

このテクニックを身につければ、JavaScriptを使ってWebページの見た目を自在に操れるようになるはずです。

それでは、まずはボタンクリックでテキストの色を変える例から見ていきましょう。

○サンプルコード3：ボタンクリックでテキストの色を変える

ボタンをクリックしたときに、特定の要素のテキストの色を変更するのはよくあるUIパターンです。

これをclassList.addメソッドで実現してみましょう。

<button id="color-button">色を変える</button>
<p id="text">これはサンプルテキストです。</p>

.red-text {
  color: red;
}

const button = document.getElementById('color-button');
const text = document.getElementById('text');

button.addEventListener('click', function() {
  text.classList.add('red-text');
});

このサンプルでは、ボタンがクリックされたときに、id="text"の要素にred-textクラスを追加しています。

CSSでは.red-textのcolorプロパティをredに設定しているので、ボタンをクリックするとテキストが赤色に変わります。

シンプルですが、このようにclassList.addメソッドを使えば、JavaScriptからCSSのクラスを追加することで要素のスタイルを動的に変更できるのです。

○サンプルコード4：マウスオーバーで背景色を変える

次は、マウスオーバーしたときに要素の背景色を変える例を見てみましょう。

こちらもclassList.addメソッドを使って実現できます。

<div id="box">マウスオーバーしてね</div>

#box {
  width: 200px;
  height: 200px;
  background-color: #eee;
}

.highlight {
  background-color: yellow;
}

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

box.addEventListener('mouseover', function() {
  this.classList.add('highlight');
});

box.addEventListener('mouseout', function() {
  this.classList.remove('highlight');
});

このサンプルでは、id="box"の要素に対して、マウスオーバーしたときにhighlightクラスを追加し、マウスアウトしたときにそのクラスを削除しています。

CSSでは.highlightのbackground-colorをyellowに設定しているので、要素にマウスオーバーすると背景色が黄色に変わり、マウスアウトすると元の色に戻ります。

このように、classList.addメソッドとclassList.removeメソッドを組み合わせることで、要素の状態に応じて動的にクラスを追加・削除し、スタイルを変更することができます。

○サンプルコード5：フォーカス時に枠線をつける

フォーム要素にフォーカスが当たったときに枠線をつけるのも、classList.addメソッドを使ったよくあるUIパターンです。

<input type="text" id="name-input" placeholder="お名前を入力してください">

.focused {
  border: 2px solid blue;
}

const input = document.getElementById('name-input');

input.addEventListener('focus', function() {
  this.classList.add('focused');
});

input.addEventListener('blur', function() {
  this.classList.remove('focused');
});

ここでは、id="name-input"のinput要素に対して、フォーカスが当たったときにfocusedクラスを追加し、フォーカスが外れたときにそのクラスを削除しています。

CSSの.focusedではinputのborderを2px solid blueに設定しているので、inputにフォーカスが当たると青い枠線が表示され、フォーカスが外れると枠線が消えます。

●イベントに応じたクラス操作

前のセクションでは、classList.addメソッドを使って要素のスタイルを動的に変更する方法を学びました。

でも、これだけではまだまだ物足りないと感じている方もいるのではないでしょうか。

実際のWebサイトでは、スクロールやフォームの入力状態など、さまざまなイベントに応じて要素のクラスを操作することが求められます。

そうすることで、ユーザーの操作に合わせてWebページの表示を適切に変化させ、使いやすいUIを提供できるからです。

ここからは、そんなイベント駆動のクラス操作について、classList.addメソッドを中心に解説していきます。

実践的なサンプルコードを交えながら、ユーザーの動きに合わせてページの見た目を変える方法を学んでいきましょう。

これらのテクニックを身につければ、よりインタラクティブで洗練されたWebサイトを作れるようになるはずです。

それでは、一緒に見ていきましょう。

○サンプルコード6：スクロール位置に応じてナビゲーションのスタイルを変える

Webサイトのナビゲーションは、スクロール位置に応じてスタイルを変えることで、ユーザーにとって使いやすくなります。

たとえば、ページ上部にいるときは通常のスタイルで、ある程度スクロールしたら固定されたスタイルに変化させるといった具合です。

これをclassList.addメソッドで実現してみましょう。

<nav id="navigation">
  <a href="#section1">セクション1</a>
  <a href="#section2">セクション2</a>
  <a href="#section3">セクション3</a>
</nav>

<section id="section1">セクション1の内容</section>
<section id="section2">セクション2の内容</section>
<section id="section3">セクション3の内容</section>

#navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px;
  transition: box-shadow 0.3s;
}

#navigation.sticky {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

const navigation = document.getElementById('navigation');
const threshold = 200; // ナビゲーションのスタイルを変更するスクロール位置

window.addEventListener('scroll', function() {
  if (window.scrollY >= threshold) {
    navigation.classList.add('sticky');
  } else {
    navigation.classList.remove('sticky');
  }
});

このサンプルでは、スクロール位置がthresholdの値（ここでは200px）以上になったら、ナビゲーションにstickyクラスを追加しています。

stickyクラスが付与されると、CSSのbox-shadowプロパティによってナビゲーションに影がつき、固定されているように見えます。

スクロール位置がthreshold未満になると、stickyクラスが削除され、ナビゲーションは元のスタイルに戻ります。

このように、classList.addメソッドとclassList.removeメソッドを組み合わせ、スクロール位置に応じて動的にクラスを付け外しすることで、ナビゲーションのスタイルを変化させています。

実際のWebサイトでも、このテクニックを使ってナビゲーションをよりユーザーフレンドリーにすることができるでしょう。

○サンプルコード7：フォームの入力状態に応じてスタイルを変える

フォームの入力欄に値が入力されているかどうかで、スタイルを変えるのもよくあるUIパターンです。

入力欄が空欄のときは通常のスタイルで、値が入力されたら背景色を変えるなどして、ユーザーに入力状態を視覚的に伝えることができます。

classList.addメソッドを使えば、こういったフォームのスタイル変更も簡単に実装できます。

<form>
  <label for="name">お名前:</label>
  <input type="text" id="name" name="name">

  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">

  <button type="submit">送信</button>
</form>

input {
  padding: 5px;
  border: 1px solid #ccc;
  transition: background-color 0.3s;
}

input.filled {
  background-color: #f0f0f0;
}

const inputs = document.querySelectorAll('input');

inputs.forEach(function(input) {
  input.addEventListener('input', function() {
    if (this.value !== '') {
      this.classList.add('filled');
    } else {
      this.classList.remove('filled');
    }
  });
});

このサンプルでは、inputイベントを監視して、入力欄の値が空欄でない場合はfilledクラスを追加し、空欄になったらfilledクラスを削除しています。

CSSでは、filledクラスが付与された入力欄のbackground-colorを変更しているので、値が入力されると背景色が変わり、入力状態がわかりやすくなります。

このように、classList.addメソッドを使ってフォームの入力状態に応じてクラスを付け外しすることで、ユーザーに適切なフィードバックを与えることができます。

○サンプルコード8：メディアクエリとclassList.addの組み合わせ

メディアクエリとclassList.addメソッドを組み合わせることで、画面のサイズに応じて要素のスタイルを変更することもできます。

たとえば、画面が小さいときはあるセクションを非表示にして、大きいときは表示するといった具合です。

<section id="content">
  <p>コンテンツの本文...</p>
  <div id="extra-info">
    <h3>追加情報</h3>
    <p>この情報は画面が大きいときだけ表示されます。</p>
  </div>
</section>

#extra-info {
  display: none;
}

@media (min-width: 600px) {
  #content.wide #extra-info {
    display: block;
  }
}

const content = document.getElementById('content');
const mediaQuery = window.matchMedia('(min-width: 600px)');

function handleMediaQuery(event) {
  if (event.matches) {
    content.classList.add('wide');
  } else {
    content.classList.remove('wide');
  }
}

mediaQuery.addListener(handleMediaQuery);
handleMediaQuery(mediaQuery);

このサンプルでは、画面幅が600px以上のときに、id="content"の要素にwideクラスを追加しています。

CSSでは、wideクラスが付与された#contentの中にある#extra-infoをdisplay: block;で表示するようにしています。

JavaScriptのコードを見ると、matchMedia()メソッドでメディアクエリを監視し、addListener()でメディアクエリの状態が変化したときに実行する関数を登録しています。

この関数内でclassList.addメソッドとclassList.removeメソッドを使い、メディアクエリの状態に応じてwideクラスを付け外ししています。

●よくあるエラーと対処法

classList.addメソッドを使ってWebページのクラス操作を行っていると、時にエラーに遭遇することがあります。

特に、JavaScriptを学び始めたばかりの頃は、エラーメッセージを見ただけで頭が真っ白になってしまった経験がある方も多いのではないでしょうか。

でも、エラーは成長のチャンスです。

エラーの原因を理解し、適切な対処法を身につけることで、JavaScriptのスキルがぐんと上がるはずです。

ここでは、classList.addメソッドを使っていてよく遭遇するエラーとその対処法を3つ紹介します。

これらを知っておくことで、エラーに悩まされることなく、スムーズにクラス操作を行えるようになるでしょう。

それでは、一緒に見ていきましょう。

○「Uncaught TypeError: Cannot read property ‘classList’ of null」が発生する原因と対処法

classList.addメソッドを使っているときに、「Uncaught TypeError: Cannot read property ‘classList’ of null」というエラーが発生することがあります。

このエラーは、JavaScriptがnullまたはundefinedのオブジェクトのclassList.addプロパティを読み取ろうとしたときに発生します。

つまり、classList.addメソッドを呼び出そうとした要素が存在しないということです。

このエラーが発生する主な原因は2つあります。

1つ目は、JavaScriptのコードがHTMLの要素よりも先に実行されてしまうことです。

たとえば、このようなコードだとエラーが発生します。

<script>
  const element = document.getElementById('my-element');
  element.classList.add('active');
</script>

<div id="my-element"></div>

このコードでは、JavaScriptがHTMLの要素よりも先に実行されるため、getElementById()メソッドがnullを返してしまいます。

この問題を解決するには、JavaScriptのコードをHTMLの要素よりも後に記述するか、DOMContentLoadedイベントを使って要素の読み込みが完了してからJavaScriptを実行するようにします。

<div id="my-element"></div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const element = document.getElementById('my-element');
    element.classList.add('active');
  });
</script>

2つ目の原因は、getElementById()やquerySelector()などのメソッドで要素を取得する際に、間違ったIDやセレクターを指定してしまうことです。

たとえば、このようなコードでは、getElementById()に存在しないIDを指定しているため、エラーが発生します。

<div id="my-element"></div>

<script>
  const element = document.getElementById('wrong-id');
  element.classList.add('active');
</script>

この問題を解決するには、IDやセレクターを正しく指定することが大切です。

また、コンソールに出力するなどして、要素が正しく取得できているかを確認するのも良い方法です。

const element = document.getElementById('my-element');
console.log(element);

○「classList.add is not a function」エラーが出る理由と解決策

「classList.add is not a function」エラーは、classList.addメソッドのようなものが関数ではないというエラーです。

このエラーが発生する主な原因は、classListプロパティが存在しないオブジェクトに対してadd()メソッドを呼び出そうとしていることです。

たとえば、このようなコードでは、classListプロパティを持たないwindowオブジェクトに対してadd()メソッドを呼び出そうとしているため、エラーが発生します。

window.classList.add('active');

この問題を解決するには、classListプロパティを持つ要素（HTMLElement）に対してのみ、add()メソッドを呼び出すようにします。

const element = document.getElementById('my-element');
element.classList.add('active');

また、querySelector()などのメソッドで要素を取得する場合は、戻り値が確実にHTMLElementであることを保証するために、明示的な型チェックを行うことをおすすめします。

const element = document.querySelector('#my-element');
if (element instanceof HTMLElement) {
  element.classList.add('active');
}

○クラス名のつけ間違いに注意しよう

classList.addメソッドを使ってクラスを追加しても、意図したスタイルが適用されないことがあります。

その原因の1つが、クラス名のつけ間違いです。

たとえば、次のようなCSSがあったとします。

.active {
  color: red;
}

ここで、activeクラスを追加しようとしているのに、間違ってavtiveというクラス名を指定してしまうと、意図したスタイルが適用されません。

const element = document.getElementById('my-element');
element.classList.add('avtive'); // 間違ったクラス名

この問題を防ぐには、クラス名を指定する際に、スペルミスがないかをよく確認することが大切です。

また、CSSとJavaScriptで使用するクラス名を統一することで、ミスを減らすこともできます。

さらに、classList.add()メソッドではなく、classList.toggle()メソッドを使うという方法もあります。

toggle()メソッドは、クラスが存在する場合は削除し、存在しない場合は追加するメソッドです。

これを使えば、クラス名を間違えても、意図しないクラスが追加されるのを防ぐことができます。

const element = document.getElementById('my-element');
element.classList.toggle('active');

●classList.addメソッドの応用例

ここまで、classList.addメソッドの基本的な使い方から、実践的なサンプルコード、よくあるエラーの対処法まで幅広く学んできました。

きっと、JavaScriptを使ってWebページの見た目を動的に変更するための基礎知識が身についたのではないでしょうか。

でも、学んだ知識を実際のWebサイト制作に活かせなければ、意味がありません。

ここからは、classList.addメソッドを使って、Webサイトでよく見かける機能をいくつか実装していきます。

これらの応用例を通して、classList.addメソッドの使い方をさらに深く理解し、JavaScriptでインタラクティブなWebページを作成するスキルを磨いていきましょう。

○アコーディオンメニューの実装

アコーディオンメニューは、Webサイトでよく使われるUIパターンの1つです。

メニュー項目をクリックすると、その項目に関連するコンテンツが展開され、再度クリックすると折りたたまれるという動作をします。

このアコーディオンメニューをclassList.addメソッドを使って実装してみましょう。

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">メニュー1</div>
    <div class="accordion-content">
      <p>メニュー1のコンテンツ</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">メニュー2</div>
    <div class="accordion-content">
      <p>メニュー2のコンテンツ</p>
    </div>
  </div>
</div>

.accordion-content {
  display: none;
}

.accordion-item.active .accordion-content {
  display: block;
}

const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', function() {
    const item = this.parentElement;
    item.classList.toggle('active');
  });
});

このサンプルでは、各アコーディオンメニューの項目（.accordion-item）にactiveクラスを付け外しすることで、コンテンツの表示/非表示を切り替えています。

JavaScriptのコードを見ると、.accordion-header要素がクリックされたときに、その親要素（.accordion-item）に対してclassList.toggle()メソッドを使ってactiveクラスを付け外ししています。

CSSでは、.accordion-item.active .accordion-contentセレクターを使って、activeクラスが付いている.accordion-itemの中にある.accordion-contentを表示するようにしています。

このように、classList.addメソッドやclassList.toggleメソッドを使えば、シンプルなアコーディオンメニューを簡単に実装できます。

○タブ切り替え機能の作成

タブ切り替え機能も、Webサイトでよく見かけるUIパターンです。

複数のタブ項目があり、タブをクリックすると、対応するコンテンツが表示されるという動作をします。

これをclassList.addメソッドを使って実装してみましょう。

<div class="tab">
  <div class="tab-nav">
    <div class="tab-item active">タブ1</div>
    <div class="tab-item">タブ2</div>
    <div class="tab-item">タブ3</div>
  </div>
  <div class="tab-content">
    <div class="tab-pane active">タブ1のコンテンツ</div>
    <div class="tab-pane">タブ2のコンテンツ</div>
    <div class="tab-pane">タブ3のコンテンツ</div>
  </div>
</div>

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

const tabItems = document.querySelectorAll('.tab-item');
const tabPanes = document.querySelectorAll('.tab-pane');

tabItems.forEach((item, index) => {
  item.addEventListener('click', function() {
    tabItems.forEach(item => item.classList.remove('active'));
    tabPanes.forEach(pane => pane.classList.remove('active'));

    this.classList.add('active');
    tabPanes[index].classList.add('active');
  });
});

このサンプルでは、タブ項目（.tab-item）とタブコンテンツ（.tab-pane）にactiveクラスを付け外しすることで、表示するコンテンツを切り替えています。

JavaScriptのコードを見ると、タブ項目がクリックされたときに、すべてのタブ項目とタブコンテンツからactiveクラスを削除し、クリックされたタブ項目とそれに対応するタブコンテンツにactiveクラスを追加しています。

CSSでは、.tab-pane.activeセレクターを使って、activeクラスが付いている.tab-paneを表示するようにしています。

このように、classList.addメソッドとclassList.removeメソッドを組み合わせることで、タブ切り替え機能を実装できます。

○モーダルウィンドウの表示/非表示の切り替え

モーダルウィンドウは、ユーザーの操作を一時的にブロックし、重要な情報を表示するためのUIパターンです。

ボタンをクリックすると、モーダルウィンドウが表示され、背景が暗くなるという動作をします。

これをclassList.addメソッドを使って実装してみましょう。

<button id="open-modal">モーダルを開く</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <p>モーダルウィンドウのコンテンツ</p>
    <button id="close-modal">閉じる</button>
  </div>
</div>

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.modal.active {
  display: block;
}

const openModalButton = document.getElementById('open-modal');
const closeModalButton = document.getElementById('close-modal');
const modal = document.getElementById('modal');

openModalButton.addEventListener('click', function() {
  modal.classList.add('active');
});

closeModalButton.addEventListener('click', function() {
  modal.classList.remove('active');
});

このサンプルでは、モーダルウィンドウ（#modal）にactiveクラスを付け外しすることで、表示/非表示を切り替えています。

JavaScriptのコードを見ると、「モーダルを開く」ボタンがクリックされたときに#modalにactiveクラスを追加し、「閉じる」ボタンがクリックされたときにactiveクラスを削除しています。

CSSでは、.modal.activeセレクターを使って、activeクラスが付いている.modalを表示するようにしています。

また、.modal要素にposition: fixed;を設定することで、モーダルウィンドウを画面の中央に固定表示しています。

このように、classList.addメソッドとclassList.removeメソッドを使えば、モーダルウィンドウの表示/非表示を簡単に切り替えられます。

○CSSアニメーションとの連携

classList.addメソッドは、CSSアニメーションと組み合わせることで、より動きのあるWebページを作ることができます。

たとえば、要素が画面内に入ってきたときにアニメーションを開始させるといった効果を、classList.addメソッドとCSSアニメーションを使って実現できます。

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

.box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.box.animate {
  opacity: 1;
  transform: translateY(0);
}

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

function checkBoxVisibility() {
  const rect = box.getBoundingClientRect();
  const isVisible = (
    rect.top >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
  );

  if (isVisible) {
    box.classList.add('animate');
  } else {
    box.classList.remove('animate');
  }
}

window.addEventListener('scroll', checkBoxVisibility);
checkBoxVisibility();

このサンプルでは、.box要素が画面内に入ってきたときにanimateクラスを追加し、CSSアニメーションを開始させています。

CSSでは、.box要素にopacityとtransformを使った移動のアニメーションを設定しています。

.box.animateセレクターを使って、animateクラスが付いたときにアニメーションが開始されるようにしています。

JavaScriptのコードを見ると、checkBoxVisibility()関数で.box要素が画面内に入っているかどうかを判定し、入っていればanimateクラスを追加、入っていなければanimateクラスを削除しています。

この関数は、ページのスクロールイベントと、ページの読み込み時に実行されます。

まとめ

本記事では、JavaScriptのclassList.addメソッドの使い方について、基本的な使用方法から実践的なサンプルコード、よくあるエラーの対処法、さらには応用例まで幅広く解説してきました。

classList.addメソッドを使いこなすことで、HTML要素のクラスを動的に操作し、ユーザーの操作に応じてWebページの見た目を自在に変更できるようになります。

サンプルコードを参考に、実際にclassList.addメソッドを使ってみることが大切です。

エラーが発生しても、その原因を理解し、適切に対処することで、JavaScriptのスキルをさらに向上させることができるでしょう。