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

みなさんこんにちは！

今回の記事は、

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

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

運営会社	レバテック株式会社	株式会社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】getElementsByClassName()でclass名からHTML要素を取得する

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

おすすめ記事

【Javascript】idでHTML要素を取得する方法(getElementById()を使おう)

今回は、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

最後に

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

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

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

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

あわせて読みたい

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

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