【JavaScript】脱JQuery！？メソッドを比べてみた！Class操作編

さて、JQueryと言えばJavascriptを簡単な記述で処理できるライブラリで今や多くのサイトで使用されているかと思います。ただ逆を言えばJQueryしか書けなくなってしまうのも事実。自分としては簡単に実現できるのであればjQueryでも全然使ってもいいと思う派なのですが、現在の職場がわりと純粋なJavaScriptを好む現場だったりするので、ちょっとJavascriptとjQueryのメソッドを比べてみました。

Javascript とjQueryのクラスの操作を比較してみた

JavascriptとjQueryでメソッドの比較することがありすぎるのでとりあえずはクラスの操作編として「追加・削除・トグル操作（追加・削除の切り替え）・特定のクラスがあるか」どうかをチェック。
とりあえず、Codepenでさくっとサンプルを作りました。クリックすると文字列の背景が赤くなるクラスを追加・削除するサンプルです。クラスが追加されたら特定のクラスがあるかないかをチェックして「true」「false」で表示しています。

See the Pen jqueryとjavascriptの比較 – Class編 by kiriyama (@kirikirimai) on CodePen.

まずはJavascriptとjQueryでのクラスの書き方を以下に書いていきます

クラスの追加

//jQueryの場合
 $("#addclass_red_jq").addClass("addclass_red");

//javascriptの場合
document.getElementById("addclass_red_js").classList.add("addclass_red");

クラスの削除

//jQueryの場合
 $("#addclass_red_jq").removeClass("addclass_red");

//javascriptの場合
document.getElementById("addclass_red_js").classList.remove("addclass_red");

クラスの切り替え

//jQueryの場合
 $("#addclass_red_jq").toggleClass("addclass_red");

//javascriptの場合
document.getElementById("addclass_red_js").classList.toggle("addclass_red");

クラスのチェック

//jQueryの場合
var flg = $("#addclass_red_jq").hasClass("addclass_red");
if(flg){}

//javascriptの場合
var flg = document.getElementById("addclass_red_js").classList.contains("addclass_red");
if(flg){}

JavascriptとjQueryとの違いについて

jQueryの場合は、単純に「addClass」「removeClass」「toggleClass」メソッドでクラス名を指定すればクラスの「追加・削除・切り替え・チェック」されます。

Javascriptの場合は、 classListと呼ばれるプロパティを使用することで以下のメソッドが使う事が出来るようになります。

classListってなに？

ここで登場したclassListですが、DOMTokenListオブジェクトと呼ばれるもので、addメソッドもJavascriptのメソッドというより DOMTokenListのメソッドとなります。また配列のように扱えるので Element.classList.length のように指定した要素に複数クラスが設定されていた場合のクラスの数を知ることもできるし、 Element.classList[0]といった配列と同じ方法で最初のクラスにアクセスできます。　詳しくは「 Element.classList – Web API | MDN 」「 DOMTokenList – Web API | MDN 」以下を参考にしてください。

まとめ

さて、今回はJavascriptとjQueryのクラスの操作についてメモしました。
他にも要素の選択方法などもありますが、長くなるので次の機会に。