JavaScript・jQueryによる要素へのclassの追加・削除・変更（切り替え）の方法
今回はJavaScript・jQueryによる要素へのclassの追加・削除・変更（切り替え）の方法を備忘録も兼ねて簡単にまとめました。
簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです！
目次
要素へのclassの追加・削除・変更（切り替え）とは？
WEB制作では場合によってはクリックしたりスクロールしたりなど、ユーザーによる操作によって装飾（見た目）を変化させたりする事が必要になる時があります。
そんな時、JavaScript・jQueryによる要素へのclassの追加・削除・変更（切り替え）等を行い要素の状態をユーザーによる操作によって変化するようにWEB制作する事が求められます。
JavaScript・jQueryで直接styleを付与したりして状態を変化させることはできますができる限りCSSで可能な事はCSS側でした方が、処理負荷の軽減やその後の運用・更新等しやすいかと思いますのでclassを追加（付与）・削除・変更（切り替え）してそのclassに対してCSSを追記して状態が変化するようにできる限りしましょう！
JavaScript編
jQueryではなくJavaScriptで記述する場合はメリットとしてjQueryライブラリを読み込んでいなくても処理が実行可能という点です。
jQueryを読み込んでいるサイトだとしてもより早い段階で処理を実行させたい場合は、jQueryライブラリが読み込まれる前に記述して処理させる必要がある場合が実際の仕事では発生したりしますので、そういう場合はJavaScriptで記述していく事が必要な場合があります。
要素へのclassの追加
classの追加は、classListのaddメソッドを使用して下記のように記述します。
下記ではelementsのclassが付与されている要素の1番目（[0]）の要素にclassNameというclassを追加しています。
document.querySelectorAll('.elements')[0].classList.add('className');※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
要素への複数のclassの追加
classListのaddメソッドは下記のようにclass名をカンマ区切りに記述していく事で、複数のclassを追加することができます。
下記ではelementsのclassが付与されている要素の1番目（[0]）の要素にclassName1とclassName2という複数のclassを追加しています。
document.querySelectorAll('.elements')[0].classList.add('className1', 'className2');※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
要素からclassを削除
classの削除は、classListのremoveメソッドを使用して下記のように記述します。
下記ではelementsのclassが付与されている要素の1番目（[0]）の要素からclassNameというclassを削除しています。
document.querySelectorAll('.elements')[0].classList.remove('className');※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
要素から複数のclassを削除
classListのremoveメソッドは下記のようにclass名をカンマ区切りに記述していく事で、複数のclassを削除することができます。
下記ではelementsのclassが付与されている要素の1番目（[0]）の要素からclassName1とclassName2という複数のclassを削除しています。
document.querySelectorAll('.elements')[0].classList.remove('className1', 'className2');※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
要素が持っている特定のclassの変更（切り替え）
classの変更（切り替え）はclassListのtoggleメソッドを使用して下記のように記述します。
下記ではelementsのclassが付与されている要素の1番目（[0]）の要素に指定したclass名classNameがある場合はそのclassを削除し、なければ指定したclass名classNameが追加されます。
document.querySelectorAll('.elements')[0].classList.toggle('className');※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
要素がclassを持っているか確認
要素が指定したclassを持っているか確認するにはclassListのcontainsメソッドを使用して下記のように記述します。
下記ではelementsのclassが付与されている要素の1番目（[0]）の要素にclassNameというclassがある場合はtrue、なければfalseを返します。
document.querySelectorAll('.elements')[0].classList.contains('className');※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
注意
jQueryでも同様の事ですが特にJavaScriptで記述する場合は対応ブラウザなどその時の対応環境で利用可能（メソッドなど）なものか下記の「MDN公式サイト」や「Can I use…」などで調べて実装するように注意しましょう。
対応状況が確認できるサイト
jQuery編
jQueryで処理をする場合は、短い処理で記述できることや学習コストが少なくすむなど便利な事が多いので、特に初心者の方はjQueryで処理を記述していく方がオススメです。
ですが便利な事ばかりではなく、もちろんデメリットもあります。
その１つがjQueryライブラリ本体を読み込んだ後に処理を記述していく必要があるという点です。
より早い段階で処理を実行させたい、またはjQueryライブラリ本体を読み込める環境ではない場合は、JavaScriptで記述していく事も考慮しましょう。
要素へのclassの追加
jQueryでのclassの追加は、addClassメソッドを使用して下記のように記述します。
下記ではelementsのclassが付与されている要素にclassNameというclassを追加しています。
$('.elements').addClass('className');要素への複数のclassの追加
addClassメソッドは下記のようにclass名をスペース区切りに記述していく事で、複数のclassを追加することができます。
下記ではelementsのclassが付与されている要素にclassName1とclassName2という複数のclassを追加しています。
$('.elements').addClass('className1 className2');要素からclassを削除
jQueryでのclassの削除は、removeClassメソッドを使用して下記のように記述します。
下記ではelementsのclassが付与されている要素のclassNameというclassを削除しています。
$('.elements').removeClass('className');要素から複数のclassを削除
removeClassメソッドは下記のようにclass名をスペース区切りに記述していく事で、複数のclassを削除することができます。
下記ではelementsのclassが付与されている要素からclassName1とclassName2という複数のclassを削除しています。
$('.elements').removeClass('className1 className2');要素が持っている特定のclassの変更（切り替え）
jQueryでのclassの変更（切り替え）は、toggleClassメソッドを使用して下記のように記述します。
下記ではelementsのclassが付与されている要素に指定したclass名classNameがある場合はそのclassを削除し、なければ指定したclass名classNameが追加されます。
$('.elements').toggleClass('className');要素がclassを持っているか確認
jQueryでの要素が指定したclassを持っているか確認するにはhasClassメソッドを使用して下記のように記述します。
下記ではelementsのclassが付与されている要素にclassNameというclassがある場合はtrue、なければfalseを返します。
$('.elements').hasClass('className');注意
jQueryが動作しないけどなんでだろうという時はまずjQueryが読み込まれているか確認してください。
読み込まれていない場合は公式サイトからダウンロードしてサイトに追加して読み込むか、CDN経由でjQueryライブラリを読み込ませましょう。
CDN経由の場合は実行させたい今回記述したjQueryより前の箇所に下記コードのように（jQuery CDN公式サイトより引用）追記しましょう。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>jQuery公式サイト
各種CDNの公式サイト
まとめ
今回は「JavaScript・jQueryによる要素へのclassの追加・削除・変更（切り替え）の方法」について簡単にはなりますが、JavaScript・jQueryでの記述方法を説明させていただきました！
複数のメソッドがでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。
参考サイト
JavaScript
jQuery
最後にもう一度ポイントをおさらい
JavaScript
classListとは?
classListは指定した要素のclass属性をリスト形式で返すプロパティです。
classListを使用することで、class属性の追加、削除、変更（切り替え）やclassを持っているかなど、簡単に結果を得ることができるようになります。
classListは下記のメソッドを持っておりますので必要に応じて記述して使い分けましょう。
| メソッド名 | 説明 | 記述例 |
|---|---|---|
| add | 要素へのclassの追加 | elements.classList.add('className'); |
| remove | 要素からclassを削除 | elements.classList.remove('className'); |
| toggle | 要素が持っている 特定のclassの変更（切り替え） | elements.classList.toggle('className |
| contains | 特定のclassを持っているか確認する | elements.classList.contains('className'); |
jQuery
| メソッド名 | 説明 | 記述例 |
|---|---|---|
| addClass | 要素へのclassの追加 | elements.addClass('className'); |
| removeClass | 要素からclassを削除 | elements.removeClass('className'); |
| toggleClass | 要素が持っている 特定のclassの変更（切り替え） | elements.toggleClass('className |
| hasClass | 特定のclassを持っているか確認する | elements.hasClass('className'); |
- jQueryではなくJavaScriptで記述する場合はメリットとしてjQueryライブラリを読み込んでいなくても処理が実行可能！
- jQueryで処理をする場合は、短い処理で記述できることや学習コストが少なくすむなど便利な事が多いので、特に初心者の方はjQueryで処理を記述していく方がオススメ！
- 対応ブラウザなどその時の対応環境で利用可能（メソッドなど）なものか「MDN公式サイト」や「Can I use…」などで調べて実装するように注意しましょう
初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。
