HTML要素の操作方法をVanillaJSとjQueryで比較 #JavaScript

jQueryの時代は終わりなんていわれて久しいですが、まだまだ業務ではバリバリ使っている、止むを得ず使っているという方が多いかと思います。VanillaJS（素のJavaScript）ではこう書くけどjQueryではどう書くんだっけ？という場面がしばしば。いまからわざわざいちからjQueryを覚えたくないという人向けにサイト制作時によく使う処理をまとめていこうかと思います。主に自分のメモ用。

スタイルを変更する

JSで動的にスタイルを指定する方法です。ここでは文字を大きくします。

vanilla.js

const target = document.querySelector('.hoge');

target.style.fontSize = '20px';

jquery.js

const target = $('.hoge');

target.css('fontSize', '20px');

jQueryで同時に複数のスタイルを変更したいとき

jquery.js

const target = $('.hoge');

target.css({'fontSize': '20px', 'color': 'red'});

スタイルを変更する上での注意点

プロパティ名はキャメルケース（大文字で単語を繋げる）です。cssのときのようなケバブケース(ハイフンで単語を繋げる)ではないので注意しましょう。

// この例はVanillaJSをもとにしています
// NG
target.style.font-size = '20px';
// OK
target.style.fontSize = '20px';

クラスを追加

あるクラスを追加します。openというクラスを追加してみましょう

vanilla.js

const target = document.querySelector('.hoge');

target.classList.add('open');

// 複数クラスを追加する場合
target.classList.add('open', 'active'); // コンマ区切り

jquery.js

const target = $('.hoge');

target.addClass('open');
// 複数クラスを追加する場合
target.addClass('open acitve'); // 半角スペース区切り

クラスを追加する時の注意点

追加したいクラスがすでに要素のclass属性に存在した場合は、無視されます。クラス名に「.（ドット）」は不要です。

// この例はVanillaJSをもとにしています
// NG
target.classList.add('.open');
// OK
target.classList.add('open');

クラスを削除

あるクラスを削除します。openというクラスを削除してみましょう

vanilla.js

const target = document.querySelector('.hoge');

target.classList.remove('open');

// 複数クラスを削除する場合
target.classList.remove('open', 'active'); // コンマ区切り

jquery.js

const target = $('.hoge');

target.removeClass('open'); 
// 複数クラスを削除する場合
target.removeClass('open acitve'); // 半角スペース区切り

クラスを削除するときの注意点

存在しないクラスを削除しようとしてもエラーはスローされません。

クラスを切り替え

あるクラスを切り替えます。切り替えるとは、

切り替えたいクラスがなかったら追加
切り替えたいクラスがすでにあれば削除

という動作のことをいいます。

openというクラスを切り替えてみましょう

vanilla.js

const target = document.querySelector('.hoge');

target.classList.toggle('open');

jquery.js

const target = $('.hoge');

target.toggleClass('open');

クラスがあるかどうか判定

openというクラスがあるかどうか調べます。

vanilla.js

const target = document.querySelector('.hoge');

console.log(target.classList.contains('open')); // true

jquery.js

const target = $('.hoge');

console.log(target.hasClass('open')); // true

複数要素に対して同一の処理をする

hogeというクラスがついた要素に対してactiveというクラスを追加してみましょう。

vanilla.js

const target = document.querySelectorAll('.hoge');

target.forEach((index) => {
    index.classList.add('active');
});

jquery.js

const target = $('.hoge');

target.each((index, elment) => {
    $(elment).addClass('active');
});

複数要素に対して同一の処理をするうえでの注意点

VanillaJSのforEachとjQueryのeachでは引数の中身がそれぞれ違うので注意です。

forEach.js

// 第一引数が要素
// 第二引数がインデックス
target.forEach((element, index) => {
  // 処理
});

each.js

// 第一引数がインデックス
// 第二引数が要素
target.each((index, element) => {
  // 処理
});