JavaScriptのclassNameで複数のクラスを同時に付与する8つの方法

●classNameとは
●classNameを使って複数のクラスを付与する8つの方法
●Reactでの使い方と注意点
●よくあるエラーと対処法
●classNameの応用例
まとめ

●classNameとは

JavaScriptを使ったWeb開発において、要素のクラスを操作することは非常に重要です。

特に複数のクラスを同時に付与したい場合、どのようにすれば効率的かつ可読性の高いコードを書けるのでしょうか。

そこで本記事では、JavaScriptのclassNameプロパティに焦点を当てます。

classNameは、要素のclass属性にアクセスしたり、動的にクラスを追加・削除したりする際に欠かせない存在です。

classNameの基本的な使い方から、複数のクラスを同時に付与するための8つの方法まで、実践的なサンプルコードを交えながらわかりやすく解説していきます。

これからJavaScriptやReactを使ったWeb開発に挑戦する方にも、既に現場で活躍している開発者の方にも役立つ内容となっています。

○classNameの基本的な使い方

まずは、classNameプロパティの基本的な使い方から見ていきましょう。

JavaScriptでは、要素のクラスを取得したり、設定したりする際にclassNameを使用します。

classNameは、要素のclass属性の値を文字列として返します。

つまり、複数のクラス名が設定されている場合は、スペース区切りの文字列として取得されるのです。

○サンプルコード1：単一のクラス名を付与する

次のサンプルコードでは、idが”my-element”である要素に、”active”というクラス名を付与しています。

const element = document.getElementById("my-element");
element.className = "active";

このように、classNameに文字列を代入することで、要素のクラス名を上書きできます。

ただし、この方法では既存のクラス名は失われてしまうので注意が必要ですね。

○サンプルコード2：複数のクラス名を空白区切りで付与する

単一のクラス名だけでなく、複数のクラス名を同時に付与することもできます。

その場合は、クラス名をスペースで区切って文字列として指定します。

const element = document.getElementById("my-element");
element.className = "active highlight";

この例では、”active”と”highlight”の2つのクラス名を空白区切りで指定しています。

これにより、要素に両方のクラスが付与されます。

しかし、この方法では元々ついていたクラス名が上書きされてしまうため、もっと柔軟に複数のクラスを追加・削除できる方法が必要ですよね。

次章では、classNameを使った複数クラスの付与について、様々なアプローチを見ていきましょう。

●classNameを使って複数のクラスを付与する8つの方法

前章では、classNameプロパティの基本的な使い方を解説しました。

しかし、実際の開発現場では、もっと柔軟に複数のクラスを操作したいというニーズがありますよね。

ここからは、classNameを使って複数のクラスを効率的に付与するための8つの方法を詳しく見ていきます。

サンプルコードを参考に、実践的なテクニックを身につけましょう。

きっと、JavaScriptやReactでの開発スキルが格段に上がるはずです。

コードの可読性と保守性を高めるコツも学べるので、同僚やチームメンバーからも一目置かれる存在になれるかもしれません。

それでは、一緒に複数クラスの付与方法を探究していきましょう！

○1. 空白区切りで複数のクラス名を指定する

まずは、もっともシンプルな方法から始めましょう。

classNameに、スペース区切りで複数のクラス名を指定することで、要素に複数のクラスを同時に付与できます。

ただし、この方法では元々ついていたクラス名が上書きされてしまうので、注意が必要です。

既存のクラス名を維持しつつ、新しいクラスを追加したい場合は、別のアプローチを検討しましょう。

□サンプルコード3：空白区切りで複数クラス指定

const element = document.getElementById("my-element");
element.className = "active highlight";

この例では、”active”と”highlight”の2つのクラス名を空白区切りで指定しています。

これにより、要素に両方のクラスが付与されます。

シンプルな方法ではありますが、動的にクラス名を組み立てる際には少し面倒かもしれませんね。

次は、もっと柔軟性の高い方法を見ていきましょう。

○2. 文字列の結合を使う

空白区切りでクラス名を指定する方法は簡単でしたが、動的にクラス名を組み立てるのには向いていませんでしたね。

そこで、文字列の結合を使ってクラス名を動的に生成する方法を見ていきましょう。

文字列の結合といっても、いくつかの方法があります。

+演算子を使う方法と、テンプレートリテラルを使う方法の2つを紹介します。

どちらも、状況に応じて使い分けられるようになると、コードの幅が広がりますよ。

□サンプルコード4：+演算子で文字列結合

const element = document.getElementById("my-element");
const baseClass = "my-class";
const activeClass = "active";
element.className = baseClass + " " + activeClass;

この例では、+演算子を使って、baseClassとactiveClassを結合しています。

2つの変数の間に、スペースを表す” “を挟むことで、適切にクラス名を区切っています。

+演算子での結合は、シンプルで読みやすいコードになります。

ただし、変数が増えてくると、スペースを挟むのが面倒になってきますね。

そんな時は、テンプレートリテラルが便利です。

□サンプルコード5：テンプレートリテラルで結合

const element = document.getElementById("my-element");
const baseClass = "my-class";
const activeClass = "active";
element.className = `${baseClass} ${activeClass}`;

テンプレートリテラルを使うと、バッククォート(`)で囲んだ中で、${変数名}という形式で変数を埋め込めます。

スペースを変数の間に直接入れられるので、とてもスッキリしたコードになりますね。

テンプレートリテラルは、複数行の文字列を扱う際にも威力を発揮します。

複雑なクラス名の組み立てには、テンプレートリテラルがおすすめです。

文字列の結合を使えば、条件分岐などと組み合わせて、動的にクラス名を生成することができます。

これは、状態に応じてクラスを付け替えたい場合に特に便利な手法ですね。

でも、もっとスマートに配列を使ってクラス名をまとめる方法もあります。

次は、配列のjoinメソッドを使った方法を見ていきましょう。

○3. 配列のjoinメソッドを使う

文字列の結合を使えば、動的にクラス名を生成できることがわかりました。

でも、条件分岐が複雑になってくると、+演算子やテンプレートリテラルでは、コードが読みづらくなってしまう可能性がありますよね。

そんな時は、配列のjoinメソッドを使うのがおすすめです。

joinメソッドを使えば、配列の要素を連結して、一つの文字列にまとめることができます。

まず、クラス名を配列に格納します。そして、最後にjoinメソッドで配列の要素を連結するんです。

こうすることで、条件分岐によってクラス名の配列を柔軟に組み立てられるようになります。

コードを見てみると、配列を使ったクラス名の生成は、とてもスッキリとしていることがわかりますよ。

□サンプルコード6：配列のjoinで結合

const element = document.getElementById("my-element");
const classNames = ["my-class"];

if (isActive) {
  classNames.push("active");
}

if (isHighlighted) {
  classNames.push("highlight");
}

element.className = classNames.join(" ");

この例では、まず “my-class” を要素として持つ classNames 配列を定義しています。

そして、isActive と isHighlighted という条件に応じて、”active” と “highlight” をclassNames 配列にpushしています。

最後に、classNames.join(” “)として、配列の要素をスペース区切りで連結しています。

これにより、要素に複数のクラス名が適切に設定されます。

配列を使ったクラス名の生成は、条件分岐が多い場合に特に威力を発揮します。

可読性が高く、メンテナンスもしやすいコードになるので、ぜひ覚えておきたいテクニックの一つですね。

○4. ClassListを使う

配列を使ってクラス名を生成する方法は、条件分岐が多い場合に特に効果的でした。

でも、もっとシンプルに書けるテクニックがあるんです。

それが、ClassListを使う方法です。

ClassListは、要素のクラスを操作するための便利なメソッドを提供してくれます。

add()メソッドでクラスを追加したり、remove()メソッドでクラスを削除したりできるんですよ。

メソッドチェーンを使えば、複数のクラスを同時に操作することもできます。

コードがスッキリとまとまるので、読みやすさも抜群です。

ClassListを使えば、もうクラス名を文字列として扱う必要はありません。

ミスによるバグも減らせそうですね。

早速、ClassListを使ったサンプルコードを見てみましょう。

□サンプルコード7：ClassListのaddで追加

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

この例では、classList.add()メソッドを使って、”active”と”highlight”の2つのクラスを追加しています。

メソッドを連続して呼び出せるので、とてもシンプルですね。

でも、もしクラスの追加と削除を同時に行いたい場合はどうすればいいでしょうか？

そんな時は、classList.toggle()が便利です。

□サンプルコード8：ClassListのtoggleで切り替え

const element = document.getElementById("my-element");
element.classList.toggle("active", isActive);
element.classList.toggle("highlight", isHighlighted);

toggle()メソッドは、第一引数で指定したクラス名の追加と削除を切り替えてくれます。

第二引数には、真偽値を指定します。

trueであればクラスが追加され、falseであればクラスが削除されるんです。

条件に応じてクラスを付け替えたい場合に、toggle()メソッドは非常に便利です。

if文を使わずに、シンプルに書けるのが魅力的ですね。

○5. 三項演算子で条件分岐する

ClassListを使えば、クラス名の操作がとてもシンプルに書けることがわかりました。

でも、条件分岐が複雑な場合は、三項演算子を使うのもおすすめですよ。

三項演算子を使えば、if文を使わずに条件分岐を簡潔に表現できます。

1行でサクッと書けるので、コードがスッキリとまとまります。

条件式 ? true の場合の値 : false の場合の値という形式で書きます。

条件式の結果がtrueであれば、:の前の値が採用され、falseであれば、:の後ろの値が採用されます。

ClassListと組み合わせれば、さらに効果的です。

条件に応じて、適切なクラス名を付与できるようになります。

実際のコードを見てみましょう。

□サンプルコード9：三項演算子での条件分岐

const element = document.getElementById("my-element");
element.className = isActive ? "active" : "";

この例では、isActiveの値がtrueであれば、”active”というクラス名が設定され、falseであれば、空文字列が設定されます。

とてもシンプルですね。

三項演算子は、条件分岐が1つの場合に特に便利です。

if文よりも短く書けるので、コードの可読性が上がります。

ただし、条件分岐が多くなってくると、三項演算子を多用すると逆に読みづらくなってしまう可能性があります。

その場合は、クラス名を動的に生成する関数を作るのがおすすめですよ。

○6. クラス名を動的に生成する関数を作る

三項演算子は、条件分岐が1つの場合に便利でした。

ただ、条件分岐が多くなってくると、三項演算子を多用すると逆に読みづらくなってしまう可能性があります。

そんな時は、クラス名を動的に生成する関数を作るのがおすすめです。

関数を使えば、複雑な条件分岐をスッキリと表現できます。

関数内で条件分岐を行い、適切なクラス名を返すようにします。

こうすることで、classNameの設定部分のコードがシンプルになります。

また、関数を使えば、クラス名の生成ロジックを一箇所にまとめることができます。

修正やメンテナンスがしやすくなるので、コードの保守性が上がりますよ。

実際のコードを見てみましょう。

□サンプルコード10：クラス名生成関数の例

function getClassName(isActive, isHighlighted) {
  let className = "my-class";

  if (isActive) {
    className += " active";
  }

  if (isHighlighted) {
    className += " highlight";
  }

  return className;
}

const element = document.getElementById("my-element");
element.className = getClassName(true, false);

この例では、getClassName関数を定義しています。

引数として、isActiveとisHighlightedを受け取ります。

関数内では、まず”my-class”を初期値としてclassNameに設定しています。

そして、isActiveとisHighlightedの値に応じて、”active”と”highlight”をclassNameに追加しています。

最後に、生成されたclassNameを返しています。

このように、関数を使ってクラス名を生成することで、classNameの設定部分のコードがスッキリと書けます。

条件分岐のロジックを関数内に閉じ込めることができるので、コードの可読性が上がりますね。

でも、もっと便利なライブラリを使えば、もっとスマートにクラス名を操作できるんですよ。

次は、classNamesライブラリを使った方法を見ていきましょう。

○7. classNamesライブラリを使う

クラス名を動的に生成する関数を作ることで、複雑な条件分岐をスッキリと表現できることがわかりました。

でも、もっと便利なライブラリを使えば、さらにスマートにクラス名を操作できるんですよ。

そのライブラリの一つが、classNamesです。

classNamesを使えば、条件に応じたクラス名の設定を、より簡潔に書くことができます。

classNamesは、JavaScriptのオブジェクトや配列を受け取り、それらを適切にクラス名の文字列に変換してくれるライブラリです。

オブジェクトのキーにクラス名、値に真偽値を設定することで、条件に応じたクラス名の出し分けができるんです。

classNamesを使えば、複雑なクラス名の設定も、とてもスッキリと書けるようになります。

コードの可読性が上がるので、メンテナンスもしやすくなりますよ。

それでは、実際のコードを見てみましょう。

□サンプルコード11：classNamesの基本的な使い方

import classNames from 'classnames';

const className = classNames('my-class', {
  'active': isActive,
  'highlight': isHighlighted
});

const element = document.getElementById("my-element");
element.className = className;

この例では、まずclassNamesをインポートしています。

そして、classNames関数に’my-class’と、条件を表すオブジェクトを渡しています。

オブジェクトのキーには、付与したいクラス名を指定します。

値には、そのクラス名を付与する条件となる真偽値を設定します。

ここでは、isActiveとisHighlightedの値に応じて、’active’と’highlight’のクラス名が付与されるようになっています。

classNames関数は、これらの引数をもとに、適切なクラス名の文字列を生成してくれます。

生成された文字列を、element.classNameに設定することで、条件に応じたクラス名が要素に付与されるようになります。

classNamesを使えば、条件分岐のロジックをライブラリに任せることができます。

その結果、コードがスッキリとして、可読性が上がります。

修正やメンテナンスもしやすくなるので、大規模なプロジェクトでも安心して使えますね。

○8. clsxライブラリを使う

classNamesは、条件に応じたクラス名の設定を簡潔に書くことができる優れたライブラリでした。

でも、もしプロジェクトの規模が小さく、ライブラリの導入を避けたい場合はどうすればいいでしょうか？

そんな時は、clsxライブラリを使うのがおすすめです。

clsxは、classNamesよりもさらに軽量で、シンプルな構文を持つライブラリなんです。

clsxは、classNamesと同じように、条件に応じたクラス名の出し分けができます。

でも、classNamesとは異なり、オブジェクトだけでなく、配列や文字列、数値、null、undefinedなど、さまざまな型の引数を受け取ることができるんですよ。

引数に渡された値は、真偽値に変換されて評価されます。

真となる値に対応するクラス名だけが、最終的なクラス名の文字列に含められるようになっています。

clsxを使えば、より柔軟にクラス名を組み立てられるようになります。

コードの見通しも良くなるので、メンテナンスもしやすくなりますよ。

それでは、実際のコードを見てみましょう。

□サンプルコード12：clsxの使用例

import clsx from 'clsx';

const className = clsx(
  'my-class',
  isActive && 'active',
  isHighlighted && 'highlight',
  {
    'text-danger': hasError,
    'text-success': !hasError
  }
);

const element = document.getElementById("my-element");
element.className = className;

この例では、まずclsxをインポートしています。そして、clsx関数にさまざまな引数を渡しています。

‘my-class’は、常に付与されるクラス名です。

isActive && ‘active’は、isActiveがtrueの時だけ’active’が付与されることを表しています。

同様に、isHighlighted && ‘highlight’は、isHighlightedがtrueの時だけ’highlight’が付与されます。

さらに、オブジェクトを渡すことで、hasErrorの値に応じて’text-danger’または’text-success’が付与されるようになっています。

clsx関数は、これらの引数を評価して、適切なクラス名の文字列を生成してくれます。

生成された文字列を、element.classNameに設定することで、条件に応じたクラス名が要素に付与されるんです。

clsxを使えば、より直感的にクラス名を組み立てられるようになります。

シンプルな構文なので、コードの可読性も上がりますね。軽量なライブラリなので、プロジェクトへの導入もしやすいはずです。

ただし、本格的なアプリケーション開発には、classNamesの方が適しているかもしれません。

プロジェクトの規模や要件に合わせて、適切なライブラリを選ぶことが大切ですね。

さて、ここまでは主にJavaScriptでのclassNameの使い方を見てきました。

でも、classNameを使う上で避けて通れないのが、Reactでの使い方です。

●Reactでの使い方と注意点

ここまでは主にJavaScriptでのclassNameの使い方を見てきました。

でも、近年のフロントエンド開発では、Reactを使うことも多いですよね。

Reactでは、classNameの扱い方にちょっとした注意点があるんです。

Reactは、仮想DOMを使ってUIを構築するライブラリです。

Reactコンポーネントでは、classNameをプロパティとして設定することで、クラス名を付与できます。

でも、ReactのclassNameは、JavaScriptのclassNameとは少し違う特徴があります。

Reactでは、クラス名の設定に文字列だけでなく、式も使えます。

○ReactのclassNameの特徴

Reactコンポーネントでは、classNameプロパティに文字列を設定すれば、そのままクラス名として適用されます。

でも、もっと動的にクラス名を設定したい場合は、式を使うことができます。

式を使えば、props やstate の値に応じて、動的にクラス名を切り替えられるようになります。

これは、Reactの宣言的なUIの構築方法とも相性が良いですね。

classNamesやclsxなどのライブラリを使えば、もっとスマートにクラス名の条件分岐ができます。

Reactでは、これらのライブラリがよく使われています。

それでは、実際のコードを見てみましょう。

○サンプルコード13：Reactコンポーネントの例

import React from 'react';
import classNames from 'classnames';

function MyComponent({ isActive, isHighlighted }) {
  const className = classNames('my-component', {
    'active': isActive,
    'highlight': isHighlighted
  });

  return <div className={className}>...</div>;
}

この例では、MyComponentというReactコンポーネントを定義しています。

isActiveとisHighlightedというpropsを受け取り、classNamesを使ってクラス名を生成しています。

生成されたクラス名は、classNameプロパティに設定されます。

このように、Reactでは、classNameプロパティに動的な式を指定できます。

○サンプルコード14：条件分岐を使ったクラス付与

import React from 'react';

function MyComponent({ isActive }) {
  return (
    <div className={`my-component ${isActive ? 'active' : ''}`}>
      ...
    </div>
  );
}

この例では、三項演算子を使って、isActiveの値に応じてクラス名を切り替えています。

isActiveがtrueの時だけ、’active’というクラス名が付与されます。

このように、Reactでは、classNameプロパティに式を使って動的にクラス名を設定できます。

これにより、コンポーネントの状態に応じて柔軟にスタイルを変更できるようになりますね。

ただし、式の中でクラス名を組み立てる場合は、可読性に注意が必要です。

複雑な条件分岐が多くなると、かえってコードが読みづらくなってしまうことがあります。

そんな時は、classNamesやclsxなどのライブラリを使うことを検討しましょう。

このライブラリを使えば、もっとスッキリとしたコードで、動的なクラス名の設定ができるようになります。

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

classNameを使ってクラス名を操作することは、とても便利な機能です。

ただ、実際にコードを書いていると、思わぬエラーに遭遇することがありますよね。

ここでは、classNameを使う際によく発生するエラーと、その対処法を見ていきましょう。

エラーの原因を理解して、適切に対処できるようになれば、より堅牢なコードが書けるようになります。

classNameを使う時は、細かな部分まで注意深く見ていく必要がありますね。

エラーから学ぶことで、より良いコードを書けるようになるはずです。

それでは、具体的なエラーの例を見ていきましょう。

○クラス名のtypoに注意

classNameを使ってクラス名を設定する際、クラス名のタイプミスはよくある間違いです。

特に、長いクラス名や複雑なクラス名の場合は、typoが見つけにくいこともあります。

typoがあると、意図したスタイルが適用されなかったり、エラーが発生したりする可能性があります。

コードをしっかりとレビューして、typoがないか確認することが大切です。

また、エディタの自動補完機能を活用するのもおすすめです。

自動補完を使えば、typoのリスクを減らすことができます。

○class属性とclassNameプロパティの違い

JavaScriptでは、要素のクラスを操作するためにclassNameプロパティを使います。

一方、HTMLの属性としては、class属性を使ってクラス名を指定します。

この2つは、似ていますが別物です。

JavaScriptのコード内でclass属性を使ってしまうと、エラーが発生します。

逆に、HTMLでclassNameプロパティを使ってもエラーにはなりませんが、意図した動作にはならないでしょう。

コードを書く際は、HTMLとJavaScriptのコンテキストをしっかりと意識することが大切です。

使う場所に応じて、適切なプロパティや属性を選ぶ必要がありますね。

○class名に使える文字の制限

class名には、使える文字に制限があります。

基本的には、英数字とハイフン(-)、アンダースコア(_)が使えます。

ただし、数字だけのクラス名は使えませんし、ハイフンで始まるクラス名も使えません。

また、予約語をクラス名に使うこともできません。

これらの制限に反するクラス名を使ってしまうと、エラーが発生する可能性があります。

クラス名を付ける際は、使える文字の制限に注意しましょう。

わかりやすく、規則性のあるクラス名を付けることが、エラーを防ぐコツですね。

classNameを使う際のエラーは、細かな部分に潜んでいることが多いです。

コードをしっかりとレビューして、typoや間違いがないか確認することが大切です。

●classNameの応用例

ここまで、classNameを使って複数のクラスを付与する様々な方法を見てきました。

でも、実際のWebアプリケーション開発では、もっと複雑な要件が求められることがありますよね。

classNameを応用すれば、そんな複雑な要件にも柔軟に対応できます。

ここでは、classNameを活用した実践的な例をいくつか見ていきましょう。

きっと、あなたのプロジェクトでも応用できるアイデアが見つかるはずです。

classNameの応用範囲の広さに、驚かされるかもしれませんね。

それでは、具体的なサンプルコードを見ながら、classNameの応用方法を探っていきましょう。

○サンプルコード15：要素の表示/非表示の切り替え

const element = document.getElementById("my-element");
const isVisible = true;

element.className = isVisible ? "visible" : "hidden";

この例では、isVisibleの値に応じて、要素に”visible”または”hidden”のクラス名を付与しています。

CSSで.visibleと.hiddenのスタイルを定義しておけば、JavaScriptからクラス名を切り替えるだけで、要素の表示/非表示を制御できます。

○サンプルコード16：アクティブなタブのスタイル変更

const tabs = document.querySelectorAll(".tab");
const activeIndex = 1;

tabs.forEach((tab, index) => {
  tab.className = index === activeIndex ? "tab active" : "tab";
});

この例では、タブ要素の配列から、アクティブなタブにのみ”active”のクラス名を付与しています。

これにより、アクティブなタブだけ異なるスタイルを適用できます。

○サンプルコード17：フォームのバリデーション

const form = document.getElementById("my-form");
const input = form.querySelector("input");
const isValid = validateInput(input.value);

form.className = isValid ? "valid" : "invalid";

この例では、フォームの入力値のバリデーション結果に応じて、フォーム要素に”valid”または”invalid”のクラス名を付与しています。

バリデーションエラーがある場合は、フォームにエラーを示すスタイルを適用できます。

○サンプルコード18：アコーディオンメニューの実装

const accordionItems = document.querySelectorAll(".accordion-item");

accordionItems.forEach((item) => {
  const header = item.querySelector(".accordion-header");
  const content = item.querySelector(".accordion-content");

  header.addEventListener("click", () => {
    item.className = item.classList.contains("active") ? "accordion-item" : "accordion-item active";
  });
});

この例では、アコーディオンメニューの各項目に”active”のクラス名を付与することで、アクティブな項目のコンテンツを表示しています。

ヘッダーをクリックすると、ClassListのtoggleメソッドを使ってクラス名を切り替えることで、アコーディオンの開閉を実現しています。

classNameを応用すれば、このようにWebアプリケーションの様々な要素を動的に制御できます。