【JavaScript】classを追加する方法とは？初心者向けに実務で使えるポイントを具体例つきで解説

はじめに

JavaScriptでclassを追加と聞くと、まず二つの意味があるかもしれません。
一つはオブジェクト指向の観点からコードを整理する際に活用されるクラス構文のこと。
もう一つはHTML要素に対してCSSを適用するためにクラス名を追加する動作のことです。

いずれにしても、初心者の方には「クラス」という単語自体が少し難しく感じられるかもしれません。
ところが実際に使ってみると、意外とシンプルで、理解するととても便利に感じられるはずです。

本記事では、JavaScriptにおけるクラスの基本的な使い方から、実務でよく使われる追加のパターン、そしてHTML要素にclassを追加する具体的な方法まで、幅広く解説します。
初心者の方にもわかりやすくなるよう、専門用語は最小限に抑えつつ丁寧に進めていきましょう。

この記事を読むとわかること

• JavaScriptでクラスを追加するメリットや基本的な活用方法
• クラス構文を使ったオブジェクト指向プログラミングの基礎
• DOM操作でHTML要素にclassを追加してデザインを切り替える方法
• よくある実務シーンでの具体的なclass追加パターン
• 初心者がつまずきやすいポイントと、それを回避するコツ

JavaScriptにおける「class追加」とは何か

JavaScriptの「class追加」には、主に二種類あると考えてみるとイメージしやすいです。
一つはコードを整理しやすくするオブジェクト指向的なクラス構文を利用するもの。
もう一つはHTML要素に対してCSSクラスを動的に付与して見た目を切り替えるDOM操作のことです。

初心者にとっては、この二つの「class」が同じ言葉で表現されるため、混乱するケースも少なくありません。
しかし、この二つには明確な役割上の違いがあります。
以下を少し眺めてみてください。

オブジェクト指向のclass

コードの再利用性を高めたり、処理をまとめて管理したりする目的で使います。
名前やコンストラクタを定義することで、複数のインスタンスを扱いやすくしてくれます。

HTML要素に対するclass

主に見た目やデザイン、あるいは画面遷移時のアニメーションなどを切り替えるために使います。
DOM操作によってHTML要素のクラス属性を動的に追加・削除することで、ユーザー体験を向上させます。

どちらもJavaScriptを使ううえで欠かせない概念です。
また、実務の現場でも頻繁に登場し、実装できると重宝されるスキルの一つといえます。

JavaScriptでクラスを使うメリット

まずはオブジェクト指向の観点から、JavaScriptでクラスを使うメリットを整理してみましょう。
JavaScriptでは以前からオブジェクトベースでの記法が可能でしたが、クラス構文の登場によってより直感的にオブジェクト指向を表現できるようになりました。

コードの可読性が上がる

オブジェクト指向の構文に慣れている方であれば、JavaScriptのクラス構文を使うと、コード全体が見やすくなります。
大きなプロジェクトであっても、どこに何が定義されているかを把握しやすく、可読性が高まるのが利点です。

再利用性が高い

クラスを定義しておけば、同じ処理ロジックを何度も書き直す必要がなくなります。
たとえばデータのバリデーションや、特定の処理パターンをまとめておき、複数の画面やコンポーネントで同じクラスを使い回すといったことが可能です。

チーム開発がしやすい

チーム内でクラスという単位を共有すると、機能ごとにモジュール化して開発が行いやすくなります。
クラス名やメソッド名を見れば、どんな責務を持っているかが一目でわかるため、機能追加やバグ修正の際にメンバー間でのコミュニケーションがスムーズです。

基本的なクラスの定義方法

それでは、実際にJavaScriptでクラスを定義する方法を確認しましょう。
クラスはclassキーワードを使い、以下のように記述します。

コピー
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("こんにちは、" + this.name + "です。");
  }
}

const userA = new User("山田", 25);
userA.greet(); // "こんにちは、山田です。"

上記の例では、Userというクラスを定義し、constructorメソッドでプロパティを初期化しています。
newキーワードを使ってクラスからインスタンスを生成し、そのインスタンスに紐づくメソッドgreet()を呼び出しているわけです。

コンストラクタとメソッドの役割

constructor

インスタンスを生成するときに自動的に呼ばれるメソッドです。
この中で初期値を設定します。

メソッド (greetなど)

クラスに紐づいた関数です。
インスタンス経由で呼び出して、特定の動作を実行させます。

このようにクラスを利用すると、データとロジックがまとまり、コードが整理されやすくなります。

クラスにプロパティやメソッドを追加する

クラスは単にコンストラクタや単純なメソッドだけでなく、いろいろなプロパティやメソッドを定義できます。
例えば、計算処理やバリデーションを組み込むことで、より複雑なロジックもまとめられます。

コピー
class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.taxRate = 0.1;
  }

  getPriceWithTax() {
    return this.price + this.price * this.taxRate;
  }

  printInfo() {
    console.log("商品名: " + this.name + " 価格(税込): " + this.getPriceWithTax());
  }
}

const productA = new Product("ノートPC", 100000);
productA.printInfo(); // "商品名: ノートPC 価格(税込): 110000"

上の例ではtaxRateという税率をプロパティとして持ち、getPriceWithTax()メソッドで税込価格を計算しています。
さらにprintInfo()メソッドで商品情報をまとめて表示することができます。

このように、クラスは業務アプリケーションでもよく登場し、特にデータ処理や複数の画面で共通するロジックをまとめる場面で役立ちます。

クラス継承による拡張

クラスのもう一つの利点は、継承によって機能を拡張できる点にあります。
継承を使うと、元になるクラス(親クラス)の特性をそのまま利用しつつ、新しい機能を追加したクラス(子クラス)を作成できます。

コピー
class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(this.name + "は食事中です。");
  }
}

class Dog extends Animal {
  bark() {
    console.log(this.name + "は吠えています。");
  }
}

const dog = new Dog("ポチ");
dog.eat();  // "ポチは食事中です。"
dog.bark(); // "ポチは吠えています。"

DogクラスはAnimalクラスを継承しており、Animalで定義されたeat()メソッドをそのまま利用できます。
さらにDog独自のメソッドbark()も定義しており、犬専用の振る舞いを追加することが可能です。

実務の開発でも、似たような機能をもつクラスが複数ある場合に、共通するロジックを親クラスにまとめ、違う部分だけ子クラスで追加・上書きする方法がよく使われます。

実務で考えられるクラスの活用例

クラスを使った設計は、大規模プロジェクトやチーム開発では特に重宝されます。
たとえば、以下のようなケースが想定できます。

ユーザ管理

Userクラスを定義し、ユーザごとのプロフィールや権限をまとめる。

在庫管理

Productクラスを使って、商品や在庫数、価格などの基本情報を一括で扱う。

フォームの入力バリデーション

フォーム専用のクラスを作り、入力チェックやエラー表示に関するメソッドをまとめる。

クラスを用いることで、機能の塊を分割しやすくなり、再利用も簡単になります。
結果的にコードの見通しが良くなるので、バグの混入を防ぐうえでも有効なアプローチです。

HTML要素にclassを追加する方法

次に、HTML要素にclassを追加する方法を見ていきましょう。
こちらはオブジェクト指向のクラスではなく、DOM操作におけるクラス属性の追加を指します。
CSSを切り替えたり、アニメーションを制御したりする際に重宝します。

コピー
<!-- HTML例 -->
<div id="content">サンプルテキスト</div>

コピー
const contentDiv = document.getElementById("content");
contentDiv.classList.add("highlight");

document.getElementById("content")で要素を取得し、classList.add("highlight")を呼び出すと、div要素にhighlightというクラス名が追加されます。
もしCSSで.highlightが黄色背景だと定義されていれば、即座に見た目が切り替わります。

複数クラスの追加

同時に複数のクラスを追加したい場合も、単純にカンマ区切りで指定可能です。

コピー
contentDiv.classList.add("highlight", "bold-text");

こうすると、highlightとbold-textが両方とも追加されます。
HTML要素は一つのclass属性に対してスペース区切りで複数のクラス名を持つことができます。

class追加による動的なスタイル変更

HTML要素にクラスを追加すると、CSSでそのクラスに対応した見た目やアニメーションが適用されます。
たとえば、ユーザーがボタンをクリックしたときだけ強調表示したい場合などに便利です。

コピー
<button id="toggleBtn">Toggle Style</button>
<div id="box" class="box">色が変わるボックス</div>

コピー
.box {
  width: 100px;
  height: 100px;
  background-color: gray;
}

.active {
  background-color: lightblue;
}

コピー
const toggleBtn = document.getElementById("toggleBtn");
const box = document.getElementById("box");

toggleBtn.addEventListener("click", () => {
  box.classList.toggle("active");
});

classList.toggle("active")は、対象クラスが存在しなければ追加し、存在すれば削除するという動作を行います。
これで、ボタンクリックごとにクラスが切り替わり、ボックスの背景色も動的に変化します。

イベントと組み合わせるclass追加

JavaScriptでは、ユーザーの操作や特定のタイミングでクラスを追加することができます。
たとえば、入力欄にフォーカスが当たったときだけ枠線の色を変えたいという場合は、下記のように書けます。

コピー
<input type="text" id="inputField" placeholder="クリックすると枠線の色が変わります"/>

コピー
.focused {
  border: 2px solid blue;
}

コピー
const inputField = document.getElementById("inputField");

inputField.addEventListener("focus", () => {
  inputField.classList.add("focused");
});

inputField.addEventListener("blur", () => {
  inputField.classList.remove("focused");
});

• focusイベント: ユーザーが要素をクリックしたり、Tabキーで選択したときに発火
• blurイベント: フォーカスが外れたときに発火

こうして状態に応じてクラスを切り替えることで、ユーザーがどの要素を操作中なのかを視覚的にわかりやすくできます。

開発現場でよくあるclass追加のパターン

実際の開発現場では、class追加を組み合わせて使うケースがたくさんあります。
よく見かけるパターンをいくつか挙げてみましょう。

マウスオーバー（hover）での強調表示

CSSだけでも:hover擬似クラスを使えばマウスオーバー時のスタイル変更は可能ですが、より複雑なアニメーションやロジックが必要な場合はJavaScriptでclassを追加して制御することが考えられます。

スクロール位置に応じたアニメーション

ページをスクロールしたときに、特定の要素が画面に入ったタイミングでclassを追加し、フェードインさせる・スライドさせるなどの演出を入れる場合があります。
ユーザー体験を向上させる工夫の一つです。

折りたたみメニューやアコーディオン

クリックするとサブメニューが開閉するようなUIでは、閉じている状態のクラスと開いている状態のクラスを切り替える形で実装します。
たとえばopenやactiveというクラス名を付与して、CSSやJavaScriptで動きを管理します。

画面サイズに応じたレイアウト切り替え

レスポンシブデザインで、ウィンドウの幅が一定以下になったら別のクラスを追加し、縦長のレイアウトに切り替えるなどの手法もあります。
実装の際には、resizeイベントやメディアクエリなどと組み合わせるケースが多いです。

class追加を使いこなすためのポイント

クラスを使ってスタイルや処理を切り替える方法はとても便利ですが、いくつか注意点もあります。
理解しておくと、予期せぬ不具合を防ぎやすくなります。

クラス命名に一貫性を持たせる

複数人が作業する場合は、クラス名の付け方がバラバラだと管理が難しくなります。
たとえば、以下のようなルールを決めておくと良いかもしれません。

• スタイルを変えるクラス名には、役割のわかりやすい単語を使う
• フォーマットはスネークケースかケバブケースで統一する（例：highlight-textやhighlight_text）

削除忘れに注意

classを追加した後、そのまま削除せず放置してしまい、予期しないデザインが永続的に適用されるケースがあります。
これはイベントとの組み合わせで特に起きやすいので、追加したクラスは必要に応じて削除するという流れを明確にしておきましょう。

上書きされる可能性がある

CSSの優先度が絡むと、思わぬところでスタイルが上書きされる場合があります。
クラスを追加しても別のクラスやID、インラインスタイルなどが優先されてしまうことがあるので、CSS設計も併せて意識すると良いです。

デバッグやエラー対応のヒント

クラス関連のバグでよくあるのは、「クラスが追加されたかどうかがわからない」というものです。
そういったときのために、以下のような方法を試してみると原因を見つけやすくなります。

コンソール出力で確認

console.log(element.classList)のように書いて、どのクラスが設定されているかを確認する。

ブラウザのデベロッパーツールで確認

Elementsパネルなどで要素を選択すると、現在付与されているクラスが表示されます。
そこからリアルタイムで確認できます。

イベントが正しく発火しているか調べる

もしイベントをきっかけにクラスを追加しているなら、そのイベント自体がきちんと呼び出されているかをチェックする。

これらを活用すれば、どの段階でclass追加が行われ、どこで上書きや削除が起きているのかを可視化しやすくなります。

まとめ

ここまで、JavaScriptのクラス構文とHTML要素へのclass追加にフォーカスし、両者の違いや実務での活用方法を具体例とともに解説しました。

オブジェクト指向のクラス構文は、コードの整理や再利用性の向上に非常に役立ちます。
継承などの仕組みもあるため、規模が大きくなっても見通しよく開発を続けられるでしょう。

一方、HTML要素へのclass追加は、DOM操作を通じてユーザー体験を変化させる重要な仕組みです。
特にイベント処理やアニメーションと組み合わせることで、動的な画面操作を簡単に実現できます。

初心者の方は、まずは小さなサンプルから実際にクラスを定義してみたり、HTML要素にクラスを追加してスタイルが切り替わる様子を体感してみるのがおすすめです。
実務につながるスキルとしても非常に有用なので、ぜひ積極的に試行錯誤してみてください。