MENU
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
WEB制作者向け無料テーマ「Arkhe」をリリースしました

【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ

JavaScript

最近では脱jQueryの流れがきている、という情報を目にしてさっそく脱jQueryしてみることに。
...と思ったのですが、いざやってみるとかなり苦労しました。

なので、今回はその備忘録としてjQueryからネイティブJS（Vanilla JS）への書き換え方をまとめていこうと思います。

というか、本当に脱jQueryしたほうがいいの？

ということは一旦置いておいて、好奇心の赴くままにやっていきましょう。

ちなみに、『Vanilla JS』というのはフレームワークとかの名前ではなく、ただのJavaScriptのことです。

※ 書きかけの部分やら中途半端なもありますが、ご了承ください。

目次

Ready関数 $(function){} の書き換え

jQueryを書いている人の多くは、とりあえずで次のようなコードで書き始めていると思います。

jQueryでの書き方

$(function){
  /* ここにjQueryの処理 */
}


//もしくは以下でも同じ意味のコード

$(document).ready(function(){
  /* ここにjQueryの処理 */
});

これはReady関数などと呼ばれるもので、DOM（HTMLソース）を読み込んだあとに実行するよ〜という意味のコードです。

これをネイティブJSで書き換えると…

ネイティブJS

document.addEventListener('DOMContentLoaded', function() {
  /* ...ここに処理を書く... */
}

こうなります。

$(function){}ってのはDOMContentLoadedイベントに処理を登録していたんですね。

DOM要素の取得方法

"DOM要素" という呼び方があっているのかはちょっとわかりませんが、
要するに、jQueryでいう$('.hoge')のようにしてHTMLを取得する方法をネイティブJSに書き換えるにはどうすればいいかという話。

jQueryでの記述例

const $elem1 = $('#id');
const $elem2 = $('.class');
const $elem3 = $('.class1.class2')
const $elem4 = $('div');
const $elem5 = $('#id .class');
const $elem6 = $('li[data-active=1]');
const $elem7 = $('#id div.class > p');

ネイティブJSで書き換え

/* パターンA : querySelector系を使う */
const elem1 = document.querySelector("#id");
const elem2 = document.querySelectorAll(".class");
const elem3 = document.querySelectorAll(".class1.class2");
const elem4 = document.querySelectorAll("div");
const elem5 = document.querySelectorAll("#id .class");
const elem6 = document.querySelectorAll("li[data-active=1]");
const elem7 = document.querySelectorAll("#id div.class > p");

/* パターンB : 1~5は getElement系でも取得可 */
const elem1 = document.getElementById('id');
const elem2 = document.getElementsByClassName('class');
const elem3 = document.getElementsByClassName('class1 class2')
const elem4 = document.getElementsByTagName('div');
const elem5 = document.getElementById('id').getElementsByClassName('class');

個人的にはquerySelector()とquerySelectorAll()だけ覚えておけば とりあえずは OKだと思います。

また、一応IDで取得するならgetElementById()の方が速いらしいです...（うろ覚えなのでググって）

jQueryオブジェクトとDOMエレメントの違い

これまた呼び方があっているかわからないですが、ここでは以下のように用語を定義します。

  • jQueryオブジェクト：jQueryで取得したDOM要素のこと
  • DOMエレメント：ネイティブJSで取得したDOM要素のこと

とします。

これらの関係性を見ていきましょう。

次のようなHTMLがあるとして

<div class="elem">aaa</div>
<div class="elem">bbb</div>

以下のJSを実行してみます。

document.addEventListener('DOMContentLoaded', function(){
 
  const $elems = $('.elem'); //jQueryで取得
  const elems = document.querySelectorAll('.elem'); //ネイティブJSで取得

  console.log('---------');  
  console.log($elems);
  console.log(elems);
  console.log($elems === elems);
  console.log($elems[0]);
  console.log(elems[0]);
  console.log($elems[0] === elems[0]);
  console.log('---------');
  
});

実行結果は次のようになりました。

console.logの実行結果
console.logの実行結果

jQueryで取得した要素のリストはk.fn.initというオブジェクトになっていて、
querySelectorAllで取得した要素のリストはNodeListというオブジェクトになっています。

了

まぁ、別物なんだなってことさえ覚えておけば大丈夫です。

jQueryオブジェクトとDOMエレメントの相互変換

jQueryオブジェクトで取得した要素に対してネイティブJSの書き方をするとエラーになります。(その逆もしかり)
例えば、要素にクラスを付与するコードで試してみると...

以下のコードはどちらもエラー

const $elems = $('.elem'); //jQueryで取得
const elems = document.querySelectorAll('.elem'); //ネイティブJSで取得

$elems.classList.add('myclass1');  //jQueryオブジェクトにネイティブの書き方
elems.addClass('myclass2'); //DOMエレメントにjQueryの書き方

ですが、次のようにすることもできます。

これはOK

$elems[0].classList.add('myclass1'); //jQueryオブジェクト内のDOMエレメントに対して処理
$(elems).addClass('myclass2'); //jQueryオブジェクト化してから処理

DOMエレメントを単一で取得した時と複数で取得した時の違い

単一のDOM要素を取得できる.querySelector()や.getElementById()と、

複数のDOM要素を取り得る.querySelectorAll()や.getElementsByClassName()などとの違いも見ておきましょう。

例えば次のようなHTMLがあるとして、

<div id="myid" class="myclass"> ~ hogehoge ~ </div>

以下のJSを実行してみます。

document.addEventListener('DOMContentLoaded', function() {
  const querySelector = document.querySelector('.myclass');
  const querySelectorAll = document.querySelectorAll('.myclass');
  const getElementById = document.getElementById('myid');
  const getElementsByClassName = document.getElementsByClassName('myclass');

  console.log('---------');  
  console.log(querySelector);
  console.log(querySelectorAll);
  console.log(getElementById);
  console.log(getElementsByClassName);
  console.log(querySelector === querySelectorAll[0]);
  console.log(getElementById === getElementsByClassName[0]);
  console.log(querySelectorAll[0] === getElementsByClassName[0]);
  console.log('---------');  
});

すると、実行結果は次のようになりました。

console.logの実行結果
console.logの実行結果

この例では1つのdivタグしかないので、どのメソッドでも取得できるのは同じ１つのHTML要素のデータのはずですが、

.querySelector()で取得した時のデータと.querySelectorAll()で取得した時のデータには違いが見られますね。

.querySelectorAll()などの複数要素を取りうるメソッドで取得したデータは、要素が１つだけでも配列データになっています。

了

（まぁ当たり前のことを確認してるですけどね…笑）

また、単一要素のデータはコンソールで見た感じだとHTMLソースの文字列に見えますが、typeofで調べると実態はobjectのようです。

Nodelist と HTMLCollection

先ほどのconsole.logの出力を見て気づいた方もいると思いますが、

  • querySelectorAll で取得したDOMリストは Nodelist というものになり、
  • getElementsBy系 で取得したDOMリストは HTMLCollection となります。

Nodelist と HTMLcolection は似ているけれど厳密には違うので注意しましょう。（詳しくはググって）

要素の存在チェック方法

jQueryでは、取得したい要素があるかないかは.lengthでチェックできますが、これはネイティブJSではどうなるでしょうか。

jQueryでの記述例

const $elem = $('.elem');
if($elem.length > 0){
  /* elemがあれば */
}

ネイティブJSで書き換え

//querySelectorやgetElementByIdなどの単一要素を取得するメソッドを使った場合
const elem = document.querySelector('.elem');
if(elem !== null){
  /* elemがあれば */
}

//querySelectorAll や getElementsByClassNameなどの複数要素を取得するメソッドを使った場合
if(elem.length > 0){
  /* elemがあれば */
}

.querySelector()や.getElementById()では要素が見つからなかった時にnullが返ってくるので、.lengthでのチェックはできないことに注意しましょう。

また、HTMLCollection や NodeList は if文の中に入れると空でもtrue扱いになることにも注意しましょう。
つまり、以下のような分岐はアウトになります。

これはダメ

if(elem){
   /* 空の HTMLCollection や NodeList もこっちにきてしまう */
 }

子要素の取得

$.find()の書き換え

jQueryには$.find()というメソッドで子孫要素を検索することも可能ですので、こちらも書き換え方法を知っておきましょう。

jQueryでの記述例

const $parent = $('.parent');
const $child = $parent.find('.child');

ネイティブJSで書き換え

const parent = document.querySelectorAll('.parent');
const child = parent.querySelectorAll('.child');

//もしくは

const parent = document.getElementsByClassName('.parent');
const child = parent.getElementsByClassName('child');

$.children() の書き換え

特定の要素の１つ下の子要素を全て取得できる$.children()の書き換え。

jQueryでの記述例

const $children = $parent.children();

ネイティブJSで書き換え

const children = parent.children; //HTMLCollectionで取得

子要素を持たなければ、空（lengthが0）のHTMLCollectionが返ってきます。

childrenの他、NodeListで取得できるchildNodesでもほぼ同じように子要素を取得できるが、HTML要素ではないテキストや改行などのデータも配列に入ってきてしまう。

$.children('.hoge') の書き換え

同じく.children()の話ですが、jQueryでは全ての子要素を取得するだけでなくクラスなどの条件も指定できますので、こっちのパターンも見ていきましょう。
ちょっと複雑になります。

jQueryでの記述例

const $hoges = $parent.children('.hoge');

ネイティブJSで書き換え

let hoges = []; //空の配列
const allChildren = parent.children; //とりあえず全ての子要素を取得
for (let i = 0; i < allChildren.length; i++) {
  const child = allChildren[i];
    if(child.classList.contains('hoge')){
      hoges.push(child);  //'hoge'というクラスを持っていれば、配列に追加
      /* ※ 配列に保存して置く必要がない場合は、直接ここで処理を加えればOK */
    }
}

注意点としては、ここで取得できたhogesという配列はただの配列であるということ。
HTMLCollectionでも、NodeListでもありません。（空のHTMLCollectionを作ったりするのはややこしそうだった）

$.first() / $.last() の書き換え（最初 / 最後の子要素を取得）

jQueryでの記述例

const $firstChild = $elem.children().first(); //最初の子要素
const $lastChild  = $elem.children().last();  //最後の子要素

ネイティブJSで書き換え

const firstChild = elem.firstElementChild; //最初の子要素
const lastChild  = elem.lastElementChild;  //最後の子要素

親要素の取得

$.parent()の書き換え

１つ上の親要素を取得するための$.parent()も、簡単に書き換え可能です。

jQueryでの記述例

const $parent = $elem.parent();

ネイティブJSで書き換え

const parent = elem.parentNode;

$.parents()の書き換え

直近の親だけでなく、先祖要素も全て取得できる.parents()は単純に書き換えるのは難しそうでした。

parentNodeを繰り返していくしかないのかな...

$.closest() の書き換え

直近の親要素を検索できる.closest()は、実はネイティブで同じ使い方ができます。

jQueryでの記述例

const $closestHoge = $elem.closest('.hoge');

ネイティブJSで書き換え

const closestHoge = elem.closest('.hoge');

ただし！
IEではネイティブの.closest()が用意されていないので注意が必要です。

MDNでポリフィルの書き方が紹介されていますので、IEに対応しなくてはいけない場合はそちらを御覧ください。

MDN：Element.closest()

兄弟要素の取得

$.next()の書き換え（直後の兄弟要素を取得）

jQueryでの記述例

const $next = $elem.next();

ネイティブJSで書き換え

const next = elem.nextElementSibling;

何もなければ、nullが返ってきます

$.prev()の書き換え（直前の兄弟要素を取得）

jQueryでの記述例

const $prev = $elem.prev();

ネイティブJSで書き換え

const prev = elem.previousElementSibling;

何もなければ、nullが返ってきます

$.siblings()の書き換え

全兄弟要素を取得できる.siblings()は、単純な書き換えはできないようです。

previousElementSiblingとnextElementSiblingを繰り返して処理するしかないっぽいですね...。

その他走査系メソッド

$.eq() の書き換え

jQuery

const $elem1 = $elems.eq(1);
const $elemM2 = $elems.eq(-2);

ネイティブJS

const elem1 = elems[1];
const elemM2 = elems[elems.length - 2];

$.not() の書き換え

単純な変換は難しいので、ループさせて個別に判定する。

jQuery

const $notHoge = $elems.not('.hoge');
$notHoge.{なにかしらの処理};

ネイティブJS

for (let i = 0; i < elems.length; i++) {
  if (!elems[i].classList.contains('hoge')) {
        elems[i].{何かしらの処理};
  }
}

$.slice() の書き換え

2個目 ~ 5個目だけを取得して処理する。

jQuery

const $li = $('li');
$li.slice(2).{何かしらの処理}; //3つ目以降の全てのliに処理
$li.slice(2,5).{何かしらの処理}; //3つ目 ~ 5つ目のliに処理

ネイティブJS

const li = document.getElementsByTagName('li');

//3つ目以降の全てのliに処理
for (let i = 2; i < li.length; i++) {
    li[i].{何かしらの処理};
}

//3つ目 ~ 5つ目のliに処理
for (let i = 2; i < 5; i++) {
    li[i].{何かしらの処理};
}

クラスの操作

$.hasClass()の書き換え（クラスの存在確認）

.hasClass()は.classList.contains()で書き換え可能です。

jQuery

const $elem = $('#elem');

if($elem.hasClass('hoge')){
  /* 'hoge' というクラスを持っているときの処理 */
}

ネイティブJS

const elem = document.getElementById('elem');

if(elem.classList.contains('hoge')){
  /* 'hoge' というクラスを持っているときの処理 */
}

$.addClass()の書き換え（クラスの追加）

.addClass()は.classList.add()で書き換え可能です。

jQuery

$elem.addClass('add-class');
$elem.addClass('add-class01 add-class02'); //複数のクラスを追加

ネイティブJS

elem.classList.add('add-class');
elem.classList.add('add-class01', 'add-class02'); //複数のクラスを追加

複数のクラスを追加する時の書き方がちょっと違うので注意しましょう。

$.removeClass()の書き換え（クラスの削除）

.removeClass()は.classList.remove()で書き換え可能です。

jQuery

$elem.removeClass('remove-class');
$elem.removeClass('remove-class01 remove-class02'); //複数のクラスを削除

ネイティブJS

elem.classList.remove('remove-class');
elem.classList.remove('remove-class01', 'remove-class02'); //複数のクラスを削除

こちらも、複数のクラスを削除する時の書き方がちょっと違うので注意しましょう。

$.toggleClass()の書き換え（クラスのトグル操作）

.toggleClass()は.classList.toggle()で書き換え可能です。

jQuery

$elem.toggleClass('toggle-class');

ネイティブJS

elem.classList.toggle('toggle-class');

.classNameってのもある

ネイティブJSでは.classNameというのも使えます。

ネイティブJS

const className = elem.className; //クラス名の取得
elem.className = 'my-class'; //クラスのセット

複数の要素に対する処理の仕方

さて、クラスの操作について一通りまとめてみましたが上記の例では単一要素に対しての処理のみを例にしていました。

しかし、querySelectorAll()などを使って、複数要素を取得した状態で同じような処理を行うとエラーとなります。

jQueryでは取得した要素が単一であろうと複数であろうと関係なくメソッドを連結させることができますが、
残念ながら、ネイティブJSではそうはいきません。

なので、for文などでループさせて一つ一つの要素に対して処理を加える必要があります。

例えば、クラスを追加するという単純な処理を例にしてみると...

jQuery

const elem = $('#myID'); //一つの要素を取得
const elems = $('.elem'); //複数の要素を取得

//以下はどちらもOK
elem.addClass('add-class');
elems.addClass('add-class');

ネイティブJS

const elem = document.getElementById('myID'); //一つの要素を取得
const elems = document.querySelectorAll('.elem'); //複数の要素を取得

elem.classList.add('add-class');  //OK
elems.classList.add('add-class');  //エラー！


/*
 * querySelectorAll() などで取得した時は、ちゃんとループさせて処理する
 */
for (let i = 0; i < elems.length; i++) {
  elems[i].classList.add('add-class');  //クラスを追加
}

querySelectorAll() の結果、取得できた要素が１つだけの場合でもループ処理は必要になるので、それも注意してください。

getElementsByClassName()やquerySelectorAll()を使うと、 HTMLColection や NodeList という配列的なオブジェクトで取得されるためです。

属性値の操作

$.attr() の書き換え

jQuery

//属性値の取得
$elem.attr('data-hoge');

//属性値のセット
$elem.attr('data-hoge','hoge');

//属性値の削除
$elem.removeAttr('data-hoge');

ネイティブJS

//属性値の取得
elem.getAttribute('data-hoge');

//属性値のセット
elem.setAttribute('data-hoge', 'hoge');

//属性値の削除
elem.removeAttribute('data-hoge');

$.css() の書き換え（スタイルの操作）

jQuery

//取得
$elem.css('background-color');

//セット
$elem.css('background-color','#000');

//複数セット
$elem.css({'color': '#fff', 'background-color':'#000'});

ネイティブJS

//取得
elem.style.backgroundColor;

//セット
elem.style.backgroundColor = '#000';

//複数セット : 一括でセットはできない
elem.style.color = '#fff';
elem.style.backgroundColor = '#000';

プロパティ名の書き方がCSSとは少し違って特殊なルールがあります。

  • そのままでいけるもの
    • color → color
  • -（ハイフン）があるもの
    • background-color → backgroundColor
    • box-shadow → boxShadow
  • ベンダープレフィックス
    • -webkit-transform → webkitTransform

タグ名の取得

jQuery

const tagName = $elem.prop('tagName'));

ネイティブJS

const tagName = elem.tagName;

タグ名は'DIV'などのように大文字で取得されることに注意しましょう。

要素のサイズを取得

$.innerHeight() / $.innerWidth() の書き換え

.innerHeight()・.innerWidth()は padding を含めたサイズを取得できる。

jQuery

const innerHeight = $elem.innerHeight();
const innerWidth  = $elem.innerWidth();

ネイティブJS

const innerHeight = elem.clientHeight;
const innerWidth  = elem.clientWidth;

.innerHeight()は.clientHeightに、.innerWidth()は.clientWidthで変換できます。

$.outerHeight() / $.outerWidth() の書き換え

.outerHeight()・.outerWidth()は padding + border を含めたサイズを取得できる。

jQuery

const outerHeight = $elem.outerHeight();
const outerWidth  = $elem.outerWidth();

ネイティブJS

const outerHeight = elem.offsetHeight;
const outerWidth  = elem.offsetWidth;

.outerHeight()は.offsetHeightに、.outerWidth()は.offsetWidthで変換できます。

$.height() / $.width() の書き換え

.height() ・.width()は、paddingなどを含めない高さを取得できる（たぶん）。

jQuery

const height = $elem.height();
const width  = $elem.width();

ネイティブJS

const height = document.defaultView.getComputedStyle(elem, null).lineHeight;
const width = document.defaultView.getComputedStyle(elem, null).width;  //.inlineSizeの方がいいかも？

document.defaultView.getComputedStyle()でCSSなどの各プロパティ情報をごっっっそりと取得できるので、その中の情報を抜き取ってくる。

$.height()は~ComputedStyle().heightで置き換える、という情報も見かけたんですが、
box-sizingがborder-boxの時に.outerHeightの値と同じになってしまったので、~().lineHeightがよさそう...。

~().widthももしかしたら条件によってはダメかもしれないです。
（~().inlineSizeという数値も同じ横幅を取得できていたので、そのときはそっち試してみて下さい。）

要素の中身・テキストの操作

$.text() の書き換え

jQuery

$elem.text(); //取得
$elem.text('ほげほげ'); //セット

ネイティブJS

elem.textContent; //取得
elem.textContent = 'ほげほげ'; //セット

$.html() の書き換え

jQuery

$elem.html(); //取得
$elem.html('<span>ほげほげ</span>'); //セット

ネイティブJS

elem.innerHTML; //取得
elem.innerHTML = '<span>ほげほげ</span>'; //セット

要素の生成

jQuery

let $plainDIV = $('<div>'); //空のDIVタグの生成

let $newDIV = $('<div class="hoge"><span>ほげ</span></div>'); //クラスや中身のあるDIVタグを生成

ネイティブJS

//空のDIVタグの生成
let plainDIV = document.createElement('div');

//クラスや中身のあるDIVタグを生成
let newDIV = document.createElement('div');
newDIV.className = 'hoge'; //classのセット
newDIV.innerHTML = '<span>ほげ</span>';

要素の置き換え

.replaceWith() と .replaceAll() の書き換え方法です。

jQuery

$elem.replaceWith('<div>NEW!</div>');

//または、以下でも一緒
$('<div>NEW!</div>').replaceAll($elem);

ネイティブJS

//新しい要素
let newElem = document.createElement('div');
newElem.textContent = 'NEW!';

//elem と newElem を置き換え
elem.parentNode.replaceChild(newElem, elem);

要素の挿入

ここでは、要素A（elemA）を基準に、要素B（elemB）を挿入する場面を想定して話していきます。

要素の挿入に関しては、ネイティブJSでは.appendChild()と.insertBefore()を駆使していきます。

appendChildの仕様について
insertBeforeの仕様について

parent.insertBefore(B,A)で、parent内にある要素Aの直前に要素Bを挿入できます。

親要素から指定しなくてはいけないことに注意しましょう。

$.before() / $.insertBefor() の書き換え（"前"に挿入）

要素Aの"前"に要素Bを追加します。

jQuery

$elemA.before($elemB);
$elemB.insertBefore($elemA);

ネイティブJS

elemA.parentNode.insertBefore(elemB, elemA);

$.after() / $.insertAfter() の書き換え（"後ろ"に挿入）

要素Aの"後ろ"に要素Bを追加します。

jQuery

$elemA.after($elemB);

ネイティブJS

elemA.parentNode.insertBefore(elemB, elemA.nextElementSibling);

ポイントは

『要素Aの次の要素』（elemA.nextElementSibling）の直前にelemBを挿入する

としていることです。

これにより、要素Aの"後ろ"に要素Bを移動させることができます。

要素Aの次の要素がなくても（elemA.nextElementSiblingがnullでも）期待通りの動作をするので安心して下さい。（詳しくは仕様書読んで）

$.append() / $.appendTo() の書き換え（"末尾"に挿入）

要素Aの中身の"末尾"に要素Bを追加します。

jQuery

$elemA.append($elemB);
$elemB.appendTo($elemA);

ネイティブJS

elemA.appendChild(elemB);

$.prepend() / $.prependTo() の書き換え（"先頭"に挿入）

要素Aの中身の"先頭"に要素Bを追加します。

jQuery

$elemA.prepend($elemB);
$elemB.prependTo($elemA);

ネイティブJS

elemA.insertBefore(elemB, elemA.firstElementChild);

"先頭に" = "要素Aの最初の要素の前に" という考え方ですね。

一つ注意があって、要素Aの中身がHTMLタグではなくただのテキストで始まる時、jQueryの場合と挙動が異なります。
<div id="elemA">hello!</div>のような場合、ネイティブでは要素Bがそのテキストhello!の後に配置されてしまいます。（jQueryではこのテキストよりも前に配置される）

$.wrap() の書き換え

.wrap()は、指定した要素をごそっと別のHTMLタグで囲みたい時に便利なメソッドですね。

jQuery

$elem.wrap('<div class="hoge"></div>'); //$elem をdivタグで囲む

ネイティブJS：パターン1

elem.outerHTML = `<div class="hoge">${elem.outerHTML}</div>`; // .outerHTMLを使えばシンプル

ネイティブJS：パターン2

// wrap()を自作する
function wrap(element, wrapper) {
  element.parentNode.insertBefore(wrapper, element);
  wrapper.appendChild(element);
}

// wrapする親要素を createElement しておける！
let newDiv = document.createElement('div');
newDiv.classList.add('hoge'); //newDiv にクラスを付与

wrap(elem, newDiv); // wrap()の実行

パターン2の方はかなり複雑に見えるんですが、モジュール化して一度定義してしまえばかなり便利に使えます。
createElement()した要素で囲めるのもいいですね。

$.wrapInner() の書き換え

.wrapInner()はその要素の中身を指定した要素で囲むことのできるものです。

jQuery

$elem.wrapInner('<div class="hoge"></div>'); //$elem の中身をdivタグで囲む

ネイティブJS

elem.innerHTML = `<div class="hoge">${elem.innerHTML}</div>`; // elem の中身をdivタグで囲む

各種イベントの書き換え

$.on() の書き換え

基本的に、.on('イベント名')は.addEventListener('イベント名')で書き換えれる。

windowのloadイベント

jQuery

$(window).on('load', function(){});

ネイティブJS

window.addEventListener('load', function(){});

クリックイベント

jQuery

$elem.click(function(){});

//もしくは
$elem.on('click', function(){});

ネイティブJS

elem.addEventListener('click', function(){});

マウスホバーイベント

jQuery

$elem.hover(
  function() {
    /* マウスカーソルが被さった時の処理 */
  }, function() {
    /* マウスカーソルが離れた時の処理 */
  }
);

ネイティブJS

elem.addEventListener('mouseover', function(){
  /* マウスカーソルが被さった時の処理 */
});
elem.addEventListener('mouseout', function(){
  /* マウスカーソルが離れた時の処理 */
});

スクロールイベント

jQuery

$(window).scroll(function(){});

ネイティブJS

window.addEventListener('scroll', function(){});

フォームの操作

$.val() の書き換え（入力された値の扱い）

jQuery

$input.val(); //取得
$input.val('ほげほげ'); //セット

ネイティブJS

input.value; //取得
input.value = 'ほげほげ'; //セット

チェックボックス

jQuery

$cb.prop('checked', true); //チェックボックスにチェックを付ける

ネイティブJS

cb.checked = true; //チェックボックスにチェックを付ける

座標系

$.offset()の書き換え（要素の座標を取得）

jQuery

const offset = $elem.offset(); // {top, left} のオブジェクト

const top  = offset.top;  //ページ上からの距離
const left = offset.left; //ページ左からの距離

ネイティブJS

const rect = elem.getBoundingClientRect(); //{x, y, width, height, top, right, bottom, left} のオブジェクト

const top = rect.top; //ページ上からの距離
const left = rect.left; //ページ左からの距離

.getBoundingClientRect()で取得できるデータのうち、topとy、leftとxは同じ数値になるようです。

なのでどっちを使えばいいか迷ったのですが、MDNのページを見ると、xとyは古いブラウザでは対応していないこともあり、top / leftを使えばいいっぽいです。

$.scrollTop() の書き換え（現在のスクロール値の取得）

jQuery

const y = $(window).scrollTop();

ネイティブJS

const y = window.pageYOffset; //window.scrollY でもいいが、IE が対応していない

pageYOffset と scrollY について

【MDN：window.scrollY】 を見ると、以下のように書いてあります。

pageYOffset プロパティは、scrollY プロパティのエイリアスです。

window.pageYOffset === window.scrollY; // 常に true

クロスブラウザー互換性のため、window.scrollYではなくwindow.pageYOffsetを使用します。

了

どっちでも同じだけど、pageYOffset の方が無難だよってことですね。

表示・非表示の操作

$.show() / $.hide() の書き換え

単純にスタイルのdisplayプロパティを操作する。

ネイティブJS

elem.style.display = "none";
elem.style.display = "block";

$.fadeIn() / $.fadeOut() の書き換え

単純な書き換えは難しいっぽいですね。

クラスの切り替え + CSSでコントロールするか、JSでopacityを時間によって操作するしかなさそう...？

実践的なこと

TOPへ戻るボタンをネイティブJSで書く

あわせて読みたい
【脱jQuery!】jQueryなしで「ページトップへ戻るボタン」を実装する 目指せ脱jQuery！ということで、jQueryなしで「ページトップへ戻るボタン」を実装するコードを2種類ほどメモしておこうと思います。 処理の流れとしては、 クリックイベ...

スムースリンクをネイティブJSで書く

あわせて読みたい
【脱jQuery!】ページ内リンクのスムーススクロールをjQueryなしで実装するコード 今回はページ内リンクの遷移でよく使う、「スムーススクロール」をjQueryに頼らず実装する方法をメモしていきます。 「スムーススクロール」とは、リンク先まですす〜っ...
JavaScript
まとめ系 脱jQuery

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次