作成日:  (更新日: )

JavaScript と jQuery の書き方の比較

このページは、 JavaScript と jQuery の書き方の違いをまとめる予定のページです。

目次

注意

  • 「jQuery で書いていたコードを jQuery 無しの時どう書くか」の参考ページです。
  • このページを作ったひとが自分のために記載しているため網羅性はありません。
    少し古いですが基本的には You Might Not Need jQuery を見るといいと思います。
  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。
  • できるだけ素の IE11 以上で使用できるように調整しています。(他の想定ブラウザは Edge, Chrome, Firefox)

書き方の比較

要素の条件確認

is(selector)

jQuery
const $target = $('#foo');
if ($target.is('input[type=password]')) {
    // ...
}
JavaScript
if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector; // IE11

const target = document.querySelector('#foo');
if (target.matches('input[type=password]')) {
    // ...
}

反復処理

each()

jQuery
$('.foo').each(function(){
    const $el = $(this);
    // ...
});
JavaScript (forEach)
if (!NodeList.prototype.forEach) NodeList.prototype.forEach = Array.prototype.forEach; // IE11

document.querySelectorAll('.foo').forEach(function(el){
    // ...
}):
JavaScript (for-of。IE11非対応)
for (const el of document.querySelectorAll('.foo')) {
    // ...
}

次の要素

next()

jQuery
const $target = $('#foo');
const $el = $target.next();
JavaScript
const target = document.querySelector('#foo');
const el = target.nextElementSibling;

next(selector)

jQuery
const $target = $('#foo');
const $el = $target.next('.bar');
JavaScript
/**
 * 対象要素の兄弟要素の中で指定セレクタにマッチする次の要素を取得します。
 * @param {Element}   el       対象要素
 * @param {string}    selector 指定セレクタ
 * @returns {Element}          見つかった要素 (存在しない場合 null)
 */
const nextElementSibling = function(el, selector) {
    if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector; // IE11
    let result = el.nextElementSibling;
    while (result && !result.matches(selector)) result = result.nextElementSibling;
    return result;
};

const target = document.querySelector('#foo');
const el = nextElementSibling(target, '.bar');

前の要素

prev()

jQuery
const $target = $('#foo');
const $el = $target.prev();
JavaScript
const target = document.querySelector('#foo');
const el = target.previousElementSibling;

prev(selector)

jQuery
const $target = $('#foo');
const $el = $target.prev('.bar');
JavaScript
/**
 * 対象要素の兄弟要素の中で指定セレクタにマッチする前の要素を取得します。
 * @param {Element}   el       対象要素
 * @param {string}    selector 指定セレクタ
 * @returns {Element}          見つかった要素 (存在しない場合 null)
 */
const previousElementSibling = function(el, selector) {
    if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector; // IE11
    let result = el.previousElementSibling;
    while (result && !result.matches(selector)) result = result.previousElementSibling;
    return result;
};

const target = document.querySelector('#foo');
const el = previousElementSibling(target, '.bar');

要素の挿入

before(node)

jQuery
const $target = $('#foo');
const $newNode = $('div').text('test');
$target.before($newNode);
JavaScript (insertBefore 版)
const target = document.querySelector('#foo');
const newNode = document.createElement('div'); newNode.textContent = 'test';
target.parentNode.insertBefore(newNode, target);
JavaScript (insertAdjacentElement 版)
const target = document.querySelector('#foo');
const newNode = document.createElement('div'); newNode.textContent = 'test';
target.insertAdjacentElement('beforebegin', newNode);

after(node)

jQuery
const $target = $('#foo');
const $newNode = $('div').text('test');
$target.after($newNode);
JavaScript (insertBefore 版)
const target = document.querySelector('#foo');
const newNode = document.createElement('div'); newNode.textContent = 'test';
target.parentNode.insertBefore(newNode, target.nextSibling);
JavaScript (insertAdjacentElement 版)
const target = document.querySelector('#foo');
const newNode = document.createElement('div'); newNode.textContent = 'test';
target.insertAdjacentElement('afterend', newNode);

イベントハンドラ

on(event, selector, handler)

jQuery
$(document).on('click', '.foo', function(e){
    const foo = e.currentTarget;
})
JavaScript (IE11対応)
if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector; // IE11
if (!Element.prototype.closest) { // IE11
    Element.prototype.closest = function(s) {
        let el = this;
        do { if (el.matches(s)) return el; el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1);
        return null;
    };
}

document.addEventListener('click', function(e){
    if (e.target.matches('.foo, .foo *')) {
        const foo = e.target.closest('.foo');
    }
});

イベント発火

trigger(eventType)

jQuery
const $target = $('#foo');
$target.trigger('change');
JavaScript (IE11対応)
const target = document.querySelector('#foo');
let event = null;
try {
    event = new Event('change', { bubbles: true, cancelable: false });
} catch (e) { // IE11
    event = document.createEvent('Event');
    event.initEvent('change', true, false);
}
target.dispatchEvent(event);
JavaScript (IE11対応 / 関数化)
/**
 * 対象要素の兄弟要素の中で指定セレクタにマッチする前の要素を取得します。
 * @param {string}   type          イベントタイプ
 * @param {object}   eventInitDict オプション (bubbles, cancelable)
 * @returns {Event}                イベントオブジェクト
 */
const newEvent = function(type, eventInitDict) {
    try {
        return new Event(type, eventInitDict);
    } catch (e) { // IE11
        const event = document.createEvent('Event');
        eventInitDict = eventInitDict || {};
        event.initEvent(type, eventInitDict.bubbles, eventInitDict.cancelable);
        return event;
    }
};

const target = document.querySelector('#foo');
target.dispatchEvent(newEvent('change', { bubbles: true, cancelable: false }));
JavaScript (IE11非対応)
const target = document.querySelector('#foo');
target.dispatchEvent(new Event('change', { bubbles: true, cancelable: false }));

trigger(eventType, data)

jQuery
const $target = $('#foo');
$target.trigger('bar', { a: 1, b: 2 });
JavaScript (IE11対応)
const target = document.querySelector('#foo');
let event = null;
try {
    event = new CustomEvent('bar', { bubbles: false, cancelable: false, detail: { a: 1, b: 2 } });
} catch (e) { // IE11
    event = document.createEvent('CustomEvent');
    event.initCustomEvent('bar', false, false, { a: 1, b: 2 });
}
target.dispatchEvent(event);
JavaScript (IE11対応 / 関数化)
/**
 * 対象要素の兄弟要素の中で指定セレクタにマッチする前の要素を取得します。
 * @param {string}   type          イベントタイプ
 * @param {object}   eventInitDict オプション (bubbles, cancelable, detail)
 * @returns {Event}                イベントオブジェクト
 */
const newCustomEvent = function(type, eventInitDict) {
    try {
        return new CustomEvent(type, eventInitDict);
    } catch (e) { // IE11
        const event = document.createEvent('CustomEvent');
        eventInitDict = eventInitDict || {};
        event.initCustomEvent(type, eventInitDict.bubbles, eventInitDict.cancelable, eventInitDict.detail);
        return event;
    }
};

const target = document.querySelector('#foo');
target.dispatchEvent(newCustomEvent('bar', { bubbles: false, cancelable: false, detail: { a: 1, b: 2 } }));
JavaScript (IE11非対応)
const target = document.querySelector('#foo');
target.dispatchEvent(new CustomEvent('bar', { bubbles: false, cancelable: false, detail: { a: 1, b: 2 } }));