ウィルスタイル株式会社 / Will Style Inc.

要素の取得

IDはDocument内に1つというルールがあるので取得はgetElementByIdで取得するのが手っ取り早いでしょう。

ID

// jQuery
let hoge = $('#hoge'); // jQuery Object

// Native
let hoge = document.getElementById('hoge'); // element

TagやClassの取得はDocument内に複数存在するので取得はgetElement[s]ByTagName、getElement[s]ByClassNameとなり、取得した値はHTMLCollection（配列）になります。

Tag・Class

// jQuery
let div = $('div'); // jQuery Object
let fuga = $('.fuga'); // jQuery Object

// Native
let div = document.getElementsByTagName('div'); // HTMLCollection
let fuga = document.getElementsByClassName('fuga'); // HTMLCollection
// fuga[0] = .fugaの最初の要素

Selectors API

jQueryのセレクタのような、より複雑な指定ができるAPIが存在します。

// jQuery
let hoge = $('#hoge'); // jQuery Object

// Native
let hoge = document.querySelector('#hoge'); // element

Classのように複数存在するものはquerySelectorAllで指定します。
同じく、取得した値はNodeList（配列）になります。

// jQuery
let fuga = $('.fuga'); // jQuery Object

// Native
let fuga = document.querySelectorAll('.fuga'); // NodeList

ただし、querySelectorやquerySelectorAllは速度の面で劣るため、単純な要素の取得にはgetElementByIdやgetElementsByClassNameを使用することを推奨します。

find()のような指定も可能です。

検索

// jQuery
let link = $('#hoge').find('a'); // jQuery Object

// Native
let link = document.getElementById('hoge').getElementsByTagName('a'); // HTMLCollection
let link = document.querySelector('#hoge').querySelectorAll('a'); // NodeList

取得した要素の存在チェック

jQueryオブジェクトは取得した要素に変更を加えようとした際に、取得した要素が存在しない場合でもプロパティ自体は存在するのでエラーを返さず特に何も起こりませんが、ネイティブでは要素が存在しない場合にnullを返すため、エラーになってしまうので必ず存在チェックを行いましょう。

let hoge = document.getElementById('hoge');
if(hoge){
	// #hogeが存在すれば実行される
}

HTMLCollectionとNodeListの違い

getElementsByTagNameやgetElementsByClassNameの返り値はHTMLCollectionでquerySelectorAllの返り値はNodeListとなっています。
この違いはHTMLCollectionは動的であり、NodeListは静的であるということです。
つまり、DOMに変更を加えた際に取得した値が動的に変更されるのがHTMLCollectionで、取得した値が変更されないのがNodeListということに注意が必要です。

イベントの操作

jQueryでは.on() .off()でイベントハンドラの登録、削除が簡単におこなえました。
これはネイティブとの差はそれほどありません。

登録

// jQuery
$('#hoge').on('click',function(){
	// click event
});

// Native
document.getElementById('hoge').addEventListener('click',function(){
	// click event
},false);

削除

// jQuery
$('#hoge').off('click');

// Native
document.getElementById('hoge').removeEventListener('click');

クラスの操作

jQueryではクラスの操作を行うメソッドは.hasClass() .addClass() .removeClass() .toggleClass()がありました。
これもネイティブとの違いはそれほどありません。

存在の確認

// jQuery
$('#hoge').hasClass('fuga'); // bool

// Native
document.getElementById('hoge').classList.contains('fuga'); // bool

追加

// jQuery
$('#hoge').addClass('fuga');

// Native
document.getElementById('hoge').classList.add('fuga');

削除

// jQuery
$('#hoge').removeClass('fuga');

// Native
document.getElementById('hoge').classList.remove('fuga');

トグル

// jQuery
$('#hoge').toggleClass('fuga');

// Native
document.getElementById('hoge').classList.toggle('fuga');

属性の操作

jQueryでは属性の操作を行うメソッドは.attr() .removeAttr() がありました。
.attr()のみで取得と設定どちらも出来ていましたがネイティブではsetとgetがあることに注意してください。

取得

// jQuery
$('a#hoge').attr('href');

// Native
document.getElementById('hoge').getAttribute('href');

設定

// jQuery
$('a#hoge').attr('href','https://www.willstyle.co.jp');

// Native
document.getElementById('hoge').setAttribute('href','https://www.willstyle.co.jp');

削除

// jQuery
$('a#hoge').removeAttr('href');

// Native
document.getElementById('hoge').removeAttribute('href');

スタイルの操作

jQueryではスタイルの操作を行うメソッドは.css() でした。
ネイティブではメソッドではなくオブジェクトを直接変更することに注意してください。
その際のスタイルのプロパティ名はキャメルケース（プロパティ内のハイフンを削除し、次の頭文字を大文字に）で表記します。

取得

// jQuery
$('#hoge').css('background-color');

// Native
document.getElementById('hoge').style.backgroundColor;

設定

// jQuery
$('#hoge').css('background-color','red');

// Native
document.getElementById('hoge').style.backgroundColor = 'red';

ループ処理

jQueryでは.each()という便利な関数がありましたが、ネイティブではfor…ofもしくはfor文を使います。

// jQuery
$('.hoge').each(function(i){
	// $(this)で現在の要素を指定
})

// Native
let fuga = document.getElementsByClassName('fuga');
for (let elm of fuga) {
	// elmで現在の要素を指定
}

ただしfor…ofはIE未対応のためしばらくはfor文で書きましょう。

for文

// Native
let fuga = document.getElementsByClassName('fuga');
for (let i = 0; i < fuga.length; i++) {
	// fuga[i]で現在の要素を指定
}

Vanilla.jsのプラグイン

ネイティブで書いていても今まで使っていたjQueryの豊富で便利なプラグインが使えなくなる事が大きな問題でもあると思います。
そんな時に「Vanilla List: The Vanilla Javascript Repository」というサイトで様々なプラグインが紹介されています。
例えばよく使うところでいくと、アニメーションには「Anime.js」が重宝しますし、パララックスには「Rellax.js」がとても便利です。
その他にもWeb制作に便利な、沢山のプラグインが紹介されています。

2019/06/19 追記

サイトが移転していましたのでURLを変更しております。

最後に

やはりあらためてjQueryはとても簡単に書けて便利なライブラリだと実感しました。
ですがjQueryにつまらなさすら感じはじめていた自分としてはJavaScriptをネイティブで書けるようになるというのは大きな進歩であり、今後も必要な技術であることに間違えはありません。
弊社での制作で実際にネイティブで書いてみたところ、ファイルサイズは「386KB」→「165KB」ほどになりました。
少しずつでもネイティブで書けるようになっていければどんどんできることの幅も広がると思います。
皆様の参考になれば幸いです。

今回参考にさせていただいたサイト

• 脱jQuery｜q-Az
• 脱jQueryしたい時に参考になるドキュメントやエントリーまとめ