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

みなさんこんにちは!

今回の記事は、

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

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


この記事の内容

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト



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】