【脱jQuery】JSのclassListでクラスを追加/削除/判定する!

jQueryを使わないでHTMLのクラスを追加/削除/判定する方法を紹介します!

最近では、jQueryを使わない流れになりつつありますね。
なので、今のうちにVanillaJSでプログラミング出来るようにしておいた方が幸せになれるかと思います!

脱jQueryの理由については、記事の最後に書いてあります!

ちなみにVanillaJSというのは、jQueryなどのプラグインを使わず、素のJavascriptを使うという意味です。

とりあえず記述方法

const element = document.getElementById('elem');
// クラスの取得
const class_list = element.classList;

// クラスの追加
element.classList.add('opened');

// クラスの削除
element.classList.remove('opened');

// クラスをトグル(toggle)で操作
element.classList.toggle('opened');

// 要素にクラスが含まれているか判定
if(element.classList.contains('opened')) {
  // openedクラスが含まれている場合の処理
} else {
  // openedクラスが含まれていない場合の処理
}

HTML要素のクラスを取得する

まずは、HTML要素のクラスを取得する方法を紹介していきます!

<body>
    <div id="elem" class="hoge foo"></div>
</body>
// jQueryの場合
const class_list = $('#elem').attr('class');

// VanillaJSの場合
const element = document.querySelector('#elem');
// クラスの取得
const class_list = element.classList;

Javascriptでは、classListを使うことでクラスを取得できます。
今回の例は、#elem付与されているClassを配列形式で取得しています。

ちなみにclass_listを出力するとこんな感じになります!

// 出力結果
[ 'hoge', 'foo' ]

HTML要素にクラスを追加する

今度はHTML要素にクラス opened を追加してみます!

<body>
    <div id="elem" class="hoge foo"></div>
</body>
// jQueryの場合
$(‘#elem').addClass('opened');

// VanillaJSの場合
const element = document.querySelector('#elem');
// クラスの追加
element.classList.add('opened');

クラスを追加する場合は、classList.add()を使います。
ここでは、クラス opened を追加しています。

結果的にHTML要素は、このようになります。


<div id="elem" class="hoge foo opened"></div>

HTML要素のクラスを削除する

次に、クラスの削除をやっていきます!

<body>
    <div id="elem" class="hoge foo"></div>
</body>
// jQueryの場合
$('#elem').removeClass('hoge');

// VanillaJSの場合
const element = document.querySelector('#elem');
// クラスの削除
element.classList.remove('hoge');

クラスを削除する場合は、classList.remove()を使います。
ここでは、クラス hoge を削除しています。

結果的にHTML要素は、このようになります。

<div id="elem" class="foo"></div>

HTML要素のクラスをトグル(toggle)で操作する

次は、クラスのトグルをやっていきます!

クラスのトグルは、こんな挙動をします。

  • 指定したクラスが付いていない場合は、そのクラスを追加する
  • 指定したクラスが付いている場合は、そのクラスを削除する

例えば、アコーディオンを実装する時に、こんな処理をすることがあると思います。

  • 開閉ボタンを押してコンテンツを開いたら opened を付けてあげる。
  • コンテンツを閉じたら opened を消してあげる。

このような処理を実装したい場合にトグルはスゴイ優秀ですね!!



それでは、記述方法に入っていきます!

<body>
    <div id="elem" class="hoge foo"></div>
</body>
// jQueryの場合
$('#elem').toggleClass('opened');

// VanillaJSの場合
const element = document.querySelector('#elem');
// クラスのトグル
element.classList.toggle('hoge');

クラスのトグルする場合は、classList.toggle()を使います。
ここでは、クラス opened を追加/削除しています。

HTML要素に指定したクラスが含まれているかを判定する

最後に、指定したクラスが含まれているかの判定をやっていきます!

<body>
    <div id="elem" class="hoge foo"></div>
</body>
// jQueryの場合
$('#elem').hasClass('hoge');  // true

// VanillaJSの場合
const element = document.querySelector('#elem');
// クラスの削除
element.classList.contains('hoge');  // true

指定したクラスが存在するかを判定する場合は、classList.contains()を使います。
ここでは、HTML要素にクラス hoge が存在しているかを判定しています。

用途としては、特定のクラスが付いている場合は処理をするとかかな?(もしくはその逆)

脱jQueryをする利点とは?

jQueryは便利なのになぜ【】する必要があるのか解説します!
jQueryを導入することでのデメリットを列挙してみるとこんな感じになります。

  • ページの読み込みが遅くなる
  • 他のプラグインとコンフリクトする危険性が高い
  • jQueryが読み込まれないとエラーが起きる

ページの読み込みが遅くなる

jQuery1つだけで【68KB】もあります。

また、jQueryを使う際は、jQueryファイルを最初に読み込ませないといけないのでdeferなどを使って、非同期に読み込ませることもできません。

つまり、jQueryが読み込まれるまでレンダリングを止める必要が出てきます。

結果、ページの読み込みが遅くなるリスクが出てきます。

他のプラグインとコンフリクトする危険性が高い

プラグインを多く使っていると、プラグイン同士のコンフリクトを起こす場合があります。

コンフリクトを起こす原因が$だったりすることはよくあります。
なぜかプラグイン実装者は$を使いたがるんですよね。。

回避方法はいくつかあります。
まぁ、jQuery導入前であれば、jQueryを使わないようにするのが一番手っ取り早いですね。

jQueryが読み込まれないとエラーが起きる

本番環境で時々見るエラー。

意外と頻度の高いエラーが、

$ is not foundだったりします。

つまり、jQueryが読み込まれていないためにエラーを出しているケースです。
僕が開発に参加したサービスでも、2〜3日に一度はエラーを出していました。

実際、頻度は少ないのですが、遭遇したユーザーにとってはサービスが使えないとストレスですよね?
リロードすれば直りますが、一般ユーザーはその発想には、なりにくいと思います。

なので、jQueryではなく、VanillaJSを使った方がみんな幸せになれます(´ω`)




はい!というわけで以上になります!
一応、脱jQueryを謳ってはいますが、jQueryを使うと記述量が少なくなるし、ソースコードが分かりやすくなるメリットはあります。

あとは、jQuery前提のプラグインが多いという現状もあります。

結論、現状はどっちも使えるのが良いかなと思います。

では、最後までありがとうございました!!