JavaScriptでクラスを追加する方法：classNameとadd()の使い方ガイド

Webページの要素にクラスを追加することで、開発者は動的でインタラクティブなユーザー体験を作り出すことができます。要素にクラスが追加されると、その要素はそのクラス名に関連付けられたスタイルを自動的に適用します。

ユーザーがボタンをクリックする場面を想像してみてください。ボタンがクリックされたとき、CSSスタイルシートに基づいてページの一部が変化するようにしたいものです。そのような場合、該当するスタイルに関連付けられたクラス名を要素に割り当てることで、クリック後の見た目を簡単に変更できます。

インタラクティブな体験の実現は、フロントエンド開発において非常に重要です。このガイドでは、素のJavaScript（バニラJS）だけで選択した要素にクラス名を追加する2つの方法を解説します。最後まで読めば、自分のプロジェクトでこのテクニックを活用できるようになるでしょう。

JavaScriptでクラスを追加する基本の流れ

JavaScriptでクラス名を追加する手順はシンプルです。まず、目的のHTML要素を選択します。次に、classNameプロパティを使うか、add()メソッドを使うかのいずれかの方法でクラス名を要素に追加します。構文と具体的な使い方は次のセクションで詳しく見ていきましょう。

ここでは素のJavaScriptを使用するため、ライブラリは一切不要です。素のJavaScriptを使う場合の一般的なプラクティスとして、クラス追加のロジックを関数内にラップし、その関数をイベントハンドラに渡す方法があります。これにより、特定のイベントが発生した後にのみ関数が実行されることが保証されます。

また、HTML要素は複数のクラス名を持つことができる点も覚えておくと便利です。つまり、すでに他のクラス名やidを持つ要素に、新たにクラス名を追加することが可能です。プロジェクト内でどのスタイルがどのクラス名に関連付けられているかを把握し、スタイルを適用したい要素にクラス名を追加するだけでOKです。

クラス名を追加するJavaScriptの構文

ここからは、要素にクラス名を追加する2つの方法を実際のコードで見ていきます。前述のとおり、クラス追加のロジックを関数内にラップするのが一般的です。関数を作成したら、HTMLのonClick属性内でその関数を呼び出します。

1つ目の方法は、classNameプロパティを使うやり方です。流れとしては、要素を選択し、選択した要素に対して.classNameを呼び出して、クラス名を連結します。

まずはHTMLから確認しましょう。

<div id="div">
Hello World
</div>
<button>
Add Class
</button>

ここには、idが「div」の<div>要素があります。その下にボタンが配置されており、このボタンがクリックされるとクラス名が追加される仕組みです。次に、CSSクラスの例を見てみましょう。

.background {
  background-color: blue;
  color: white;
}

CSSファイルには「background」というクラスが定義されています。このクラスは青い背景色と白いテキスト色でスタイルされています。idが「div」の<div>要素に、この「background」クラスを追加したいと思います。

JavaScriptでは、次のような関数で<div>を選択できます。

const addClass = () => {
  const element = document.getElementById('div');
  element.className += "background"
}

addClassという関数は、idが「div」の<div>要素を選択し、elementという変数に格納します。その後、変数に対してclassNameプロパティを呼び出し、クラス名「background」を連結します。JavaScriptにおける連結（concatenate）とは、既存の値に新しい値を付け加える操作のことです。つまり、クラス名を連結すると、そのクラス名が要素に追加され、以前に定義されたクラスもそのまま残ります。

まだ作業は終わりではありません。addClass関数をどこかで呼び出す必要があります。ボタンがクリックされた後に<div>へクラス名を追加できるよう、コードを修正しましょう。

<div id="div">
Hello World
</div>
<button onClick="addClass()">
Add Class
</button>

JavaScriptのonClick属性を使うことで、ボタンがクリックされた後に関数を呼び出せます。実際にボタンをクリックして動作を確認してみましょう。

何が起きたかをおさらいすると、CSSファイルでスタイルが定義された「background」というクラス名を追加しました。要素を見つけてクラス名を追加するJavaScript関数を作成した結果、ボタンがクリックされた瞬間に<div>へクラスのスタイルが適用されたのです。

JavaScriptのadd()メソッドを使う方法

同じ例を使って、クラス名を追加するもう1つの方法を見てみましょう。こちらはJavaScriptのadd()メソッドを使用する方法です。先ほどの例とは異なり、classListプロパティ経由でadd()を呼び出します。

addClass()関数は次のように書き換えられます。

const addClass = () => {
  const element = document.getElementById('div');
  element.classList.add("background")
}

ここでも、idを使って<div>要素を取得し、変数に格納します。次に、変数に対してclassListプロパティを呼び出し、続けてadd()メソッドを呼び出します。クラス名「background」は引数としてadd()に渡します。

これで<div>要素に「background」クラスが追加されました。

2つの異なる方法で同じ結果が得られました。どちらをコードに採用するかは自由ですが、2つ目のadd()メソッドを使う方法の方がベストプラクティスとして広く認められています。理由は、文字列の連結を使う方法よりもエラーが発生しにくく、既存のクラスを誤って上書きするリスクがないためです。

まとめ

このガイドでは、要素にクラス名を追加する2つの方法を学びました。CSSファイルでスタイル定義されたクラスがある場合、特定のHTML要素にそのクラス名を追加するだけで、要素がCSSのスタイルを引き継ぎます。

ページ上の要素の見た目を動的に変更することで、ユーザーにインタラクティブな体験を提供できます。インタラクティブなアプリケーションはユーザーにとって自然で魅力的に感じられ、アプリをさらに探索し続ける動機にもつながるでしょう。ぜひ自分のプロジェクトでも試してみてください。