JavaScriptでclassを追加・削除する方法【全部classListで大丈夫です】

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・JavaScriptでclassを追加するにはどうしたらいいの?
・classListとclassNameってどう使い分けたらいいの?
・classを削除したり切り替えたりする方法も知りたい!

というお悩みを解決する記事になっています。


この記事の内容

・JavaScriptでclassを追加する方法【2種類ありますがclassListを使いましょう】
・JavaScriptでclassを削除する方法【classList.remove()メソッド】
・JavaScriptでclassを切り替える方法【classList.toggle()メソッド】
・JavaScriptでclassの有無を確認する方法【classList.contains()メソッド】


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


JavaScriptでclassを追加する方法【2種類あります】

JavaScriptを使ってclassを追加するには、主に以下の2つの方法があります。

  • classListプロパティを使ってclassを追加する
  • classNameプロパティを使ってclassを書き換える

それぞれ順を追って解説させていただきます。

classListプロパティを使ってclassを追加する

まず大前提として、Javascriptを使ってclassを追加するには、まずはclassを追加しようとしているHTML要素をJavaScriptを使って取得しなければなりません。

JavaScriptを使ったHTML要素を取得方法は、以下の記事にて詳しく解説していますので、「やり方がパッと思いつかない…」というかたはまずはこちらからご覧くださいね。

おすすめ記事

みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・JavaScriptを使ってHTML要素を取得したい!・getElementsByClassName()メソッドの使い方が知りたい!・getElementsByClass[…]

【JavaScript】getElementsByClassName()でclass名からHTML要素を取得する
おすすめ記事

今回は、Javascriptでid属性を使ってHTML要素を取得する方法をご紹介していきます。 Javascriptの主な役割の一つとして「DOM操作」が挙げられますが、そのDOM操作のためにはまず操作対象であるHTML要素を取得し[…]

プログラミングイメージ

HTML要素を無事取得できれば、次はJavaScriptで「classList」プロパティにアクセスしてみましょう。

<p class="Javascript1 Javascript2" id="test">Javascriptの練習</p>

let tag = document.getElementById("test")

console.log(tag.classList)
=> ["Javascript1", "Javascript2"]

このように、classListプロパティを使用すると、HTML要素に設定されているclassを取得することができます。

そして、このclassListプロパティのaddメソッドを使うことで、HTML要素にclassを追加できるのです。

classList.addメソッドの使い方自体はとてもシンプルで、以下のように、追加したいclassを引数に指定するだけで大丈夫です。

<p class="JavaScript1 JavaScript2" id="test">JavaScriptの練習</p>

let tag = document.getElementById("text")

tag.classList.add("JavaScript3")

console.log(tag)
=> <p class="JavaScript1 JavaScript2 JavaScript3" id="text">JavaScriptの練習</p>

このように、元々のclass(JavaScript1とJavaScript2)に対して、新たにJavaScript3というclassが追加されているのがお分かりいただけるかと思います。

また、複数のclassを追加する場合には、引数を,で区切ってあげれば大丈夫です。

<p class="JavaScript1 JavaScript2" id="text"> JavaScriptの練習</p>

let tag = document.getElementById("test")

tag.classList.add("JavaScript3", "JavaScript4", "JavaScript5")

console.log(tag)
=> <p class="JavaScript1 JavaScript2 JavaScript3 JavaScript4 JavaScript5" id="text"> JavaScriptの練習</p>

classNameプロパティを使ってclassを書き換える

上記でご紹介したclassListプロパティを使用した方法は純粋に「classを追加」する方法であるのに対して、これからご紹介するclassNameプロパティを使用した方法は「classを書き換える」方法になります。

文章だけではイメージがつきにくいと思いますので、実例を見ながら確認していきましょう。

<p class="JavaScript1 JavaScript2" id="test">JavaScriptの練習</p>

let tag = document.getElementById("test")

tag.className = "JavaScript3"

console.log(tag)
=> <p class="JavaScript3" id="test">JavaScriptの練習</p>

このように、classNameプロパティを使うと、HTML要素のclassを直接書き換えることができます

この特性を利用して、classを追加する場合には以下のように実装します。

<p class="JavaScript1 JavaScript2" id="test">JavaScriptの練習</p>

let tag = document.getElementById("test")

tag.className += " JavaScript3"

console.log(tag)
=> <p class="JavaScript1 JavaScript2 JavaScript3" id="test">JavaScriptの練習</p>

このように、無事JavaScript3というclassが追加されているのがお分かりいただけるかと思います。

ただし、ここで注意すべきは、「追加しようとするclassの前にスペースを入れる必要がある」ということです。

上記の例でもスペースを入れていますが、スペースを入れずに実装してしまうと、以下のようにJavaScript2とJavaScript3がくっついてしまいます。

<p class="JavaScript1 JavaScript2" id="test">JavaScriptの練習</p>

let tag = document.getElementById("test")

tag.className += "JavaScript3"

console.log(tag)
=> <p class="Javascript1 JavaScript2JavaScript3" id="test">JavaScriptの練習</p>

これは、「className += ” JavaScript3″」内で実際に行われているのは、classの追加ではなく、単なる文字列の結合だからです。

「className += ” JavaScript3″」を細かく分類していくと、以下のようになります。

className += " JavaScript3"
=> className = className + " JavaScript3"

// className は "JavaScript1 JavaScript2" という文字列なので、
=> className =  "JavaScript1 JavaScript2" + " JavaScript3"
=> className = "JavaScript1 JavaScript2 JavaScript3"

" Javascript3"(スペースあり) を "JavaScript3"(スペースなし) に変更すると
=> className = "JavaScript1 JavaScript2" + "JavaScript3"
=> className = "JavaScript1 JavaScript2JavaScript3"

JavaScriptでclassを追加する時はclassListを使いましょう

このように、Javascriptでclassを追加するには2つの方法が存在しているのですが、実際の開発では、最初に解説したclassList.addメソッドを使用しましょう

classNameプロパティを使用した方法だと、「スペースを書き忘れてしまう」という懸念もあるのですが、まずもって、classをどのように扱っているのか(追加or削除or書き換え)が一目で分からなくなってしまいます

上記の例のように短いコードであればその弊害はあまり出てこないのですが、実際の開発では何十行ものコードを書くことになりますので、その中でいちいち「このclassNameはどういう処理をしているのかな?」と確認するのは面倒ですよね(※もちろん、勘違いも起きやすいです)。

以上の理由により、Javascriptでclassを追加する時には、classList.addメソッドを使用するようにしてください

JavaScriptでclassを削除する方法:classList.remove()

JavaScriptでclassを削除する場合は、classListプロパティのremove()メソッドを使用します。

使い方はaddメソッドと同じで、削除したいclassを引数に指定します。

<p class="JavaScript1 JavaScript2" id="test">JavaScriptの練習</p>

let tag = document.getElementById("test")

tag.classList.remove("JavaScript2")

console.log(tag)
=> <p class="JavaScript1" id="test">JavaScriptの練習</p>

なお、classを削除する場合も、classNameプロパティを使ってclassを書き換える方法が使えるのですが、先述の通りあまりおすすめしませんので、classListプロパティを使用するようにしましょう。

JavaScriptでclassを切り替える方法:classList.toggle()

JavaScriptでclassを切り替える場合は、classListプロパティのtoggle()メソッドを使用します。

このtoggle()メソッドを使用すると、引数に指定したclassがある場合にはそのclassを削除し、ない場合には追加してくれます。

<p class="JavaScript1 JavaScript2" id="test">JavaScriptの練習</p>

let tag = document.getElementById("test")

tag.classList.toggle("JavaScript2")

console.log(tag)
=> <p class="JavaScript1" id="test">JavaScriptの練習</p>

tag.classList.toggle("JavaScript2")

console.log(tag)
=> <p class="JavaScript1 JavaScript2" id="test">JavaScriptの練習</p>

JavaScriptでclassの有無を確認する方法:classList.contains()

JavaScriptでclassの有無を確認する場合は、classListプロパティのcontains()メソッドを使用します。

contains()メソッドを使うと、引数に指定したclassがある場合には「true」を、ない場合には「false」を返却してくれます。

<p class="JavaScript1 JavaScript2" id="test">JavaScriptの練習</p>

let tag = document.getElementById("test")

tag.classList.contains("JavaScript2")
=> true

tag.classList.toggle("JavaScript3")
=> false

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptを使ったclassの追加方法について解説してきましたがいかがでしたか?

最後にそれぞれのケースを表にまとめておきますので、ぜひ参考にしてみてください。

ケースメソッド
classを追加する場合classList.add()メソッド
classを削除する場合classList.remove()メソッド
classを切り替える場合classList.toggle()メソッド
classの有無を確認する場合classList.contains()メソッド

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。

あわせて読みたい

みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・jQueryでclass属性を追加するにはどうしたらいいの?・jQueryでclass属性を削除するにはどうしたらいいの?・jQueryでclass属性を切り替える方法が[…]

jQueryでclassを追加・削除する方法【これさえ覚えればOK】