【比較】jQuery vs Vanilla JS - 2026年どちらを使うべき？

Vanilla JSとは

Vanilla JSとは、ライブラリやフレームワークを使わない「素の」JavaScriptのことです。

名前の由来は「バニラ＝何も加えていないプレーンな」という意味です。

なぜVanilla JSが注目されるのか

モダンブラウザの進化: ES6+の機能が充実
パフォーマンス: ライブラリのオーバーヘッドがない
依存関係なし: 外部ライブラリに依存しない
学習価値: JavaScript自体の理解が深まる

DOM操作の比較

要素の取得

// jQuery
$('#element')
$('.items')
$('div')
$('ul > li')

// Vanilla JS
document.getElementById('element')
document.getElementsByClassName('items')
document.getElementsByTagName('div')
document.querySelectorAll('ul > li')

// querySelector系（モダン）
document.querySelector('#element')      // 単一要素
document.querySelectorAll('.items')     // 複数要素

ポイント: querySelectorとquerySelectorAllを使えば、jQueryとほぼ同じセレクタ記法が使えます。

クラスの操作

// jQuery
$('#element').addClass('active');
$('#element').removeClass('active');
$('#element').toggleClass('active');
$('#element').hasClass('active');

// Vanilla JS
element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');
element.classList.contains('active');

比較: ほぼ同じ記述量で実現できます。

属性の操作

// jQuery
$('#element').attr('href');
$('#element').attr('href', 'https://example.com');
$('#element').removeAttr('disabled');

// Vanilla JS
element.getAttribute('href');
element.setAttribute('href', 'https://example.com');
element.removeAttribute('disabled');

CSSの操作

// jQuery
$('#element').css('color', 'red');
$('#element').css({
    'color': 'red',
    'font-size': '16px'
});

// Vanilla JS
element.style.color = 'red';
Object.assign(element.style, {
    color: 'red',
    fontSize: '16px'  // キャメルケース
});

テキスト・HTMLの操作

// jQuery
$('#element').text();
$('#element').text('新しいテキスト');
$('#element').html();
$('#element').html('<p>新しいHTML</p>');

// Vanilla JS
element.textContent;
element.textContent = '新しいテキスト';
element.innerHTML;
element.innerHTML = '<p>新しいHTML</p>';

要素の追加・削除

// jQuery
$('#list').append('<li>末尾に追加</li>');
$('#list').prepend('<li>先頭に追加</li>');
$('#element').remove();
$('#element').empty();

// Vanilla JS
list.insertAdjacentHTML('beforeend', '<li>末尾に追加</li>');
list.insertAdjacentHTML('afterbegin', '<li>先頭に追加</li>');
element.remove();
element.innerHTML = '';

// または要素を作成して追加
const li = document.createElement('li');
li.textContent = '新しい項目';
list.appendChild(li);

イベント処理の比較

クリックイベント

// jQuery
$('#button').on('click', function(e) {
    console.log('クリックされました');
});

// Vanilla JS
document.getElementById('button').addEventListener('click', function(e) {
    console.log('クリックされました');
});

// アロー関数
button.addEventListener('click', (e) => {
    console.log('クリックされました');
});

複数要素へのイベント

// jQuery
$('.item').on('click', function() {
    $(this).addClass('active');
});

// Vanilla JS
document.querySelectorAll('.item').forEach(item => {
    item.addEventListener('click', function() {
        this.classList.add('active');
    });
});

イベント委譲

// jQuery
$('#container').on('click', '.item', function() {
    $(this).toggleClass('active');
});

// Vanilla JS
document.getElementById('container').addEventListener('click', function(e) {
    if (e.target.classList.contains('item')) {
        e.target.classList.toggle('active');
    }
    // または closest を使用
    const item = e.target.closest('.item');
    if (item) {
        item.classList.toggle('active');
    }
});

DOMContentLoaded

// jQuery
$(document).ready(function() {
    // 処理
});
// または
$(function() {
    // 処理
});

// Vanilla JS
document.addEventListener('DOMContentLoaded', function() {
    // 処理
});

// または（scriptをbody末尾に置く場合は不要）

Ajax通信の比較

GETリクエスト

// jQuery
$.ajax({
    url: '/api/users',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

// または
$.get('/api/users', function(data) {
    console.log(data);
});

// Vanilla JS (Fetch API)
fetch('/api/users')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

// async/await
async function getUsers() {
    try {
        const response = await fetch('/api/users');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

POSTリクエスト

// jQuery
$.ajax({
    url: '/api/users',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ name: '山田', email: 'yamada@example.com' }),
    success: function(data) {
        console.log(data);
    }
});

// Vanilla JS (Fetch API)
fetch('/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: '山田', email: 'yamada@example.com' })
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// async/await
async function createUser(userData) {
    const response = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(userData)
    });
    return await response.json();
}

ポイント: Fetch APIはPromiseベースで、async/awaitと相性が良いです。

アニメーションの比較

表示/非表示

// jQuery
$('#element').show();
$('#element').hide();
$('#element').fadeIn(500);
$('#element').fadeOut(500);
$('#element').slideDown(500);
$('#element').slideUp(500);

// Vanilla JS + CSS
// CSSでトランジションを定義
// .fade { transition: opacity 0.5s; }
// .hidden { opacity: 0; visibility: hidden; }

element.classList.remove('hidden');  // 表示
element.classList.add('hidden');     // 非表示

カスタムアニメーション

// jQuery
$('#element').animate({
    left: '200px',
    opacity: 0.5
}, 500);

// Vanilla JS (Web Animations API)
element.animate([
    { left: '0px', opacity: 1 },
    { left: '200px', opacity: 0.5 }
], {
    duration: 500,
    fill: 'forwards'
});

// または CSS Transitionを活用
element.style.transition = 'all 0.5s';
element.style.left = '200px';
element.style.opacity = '0.5';

推奨: CSSアニメーションやCSS Transitionを使う方がパフォーマンスが良いです。

パフォーマンス比較

ファイルサイズ

ライブラリ	サイズ（min+gzip）
jQuery 3.7.1	約30KB
jQuery Slim	約24KB
Vanilla JS	0KB

実行速度

一般的に、Vanilla JSの方が高速です。jQueryは内部で多くの処理を行うため、オーバーヘッドがあります。

// パフォーマンステスト例
console.time('jQuery');
for (let i = 0; i < 10000; i++) {
    $('#element').addClass('test').removeClass('test');
}
console.timeEnd('jQuery');  // 約50ms

console.time('Vanilla');
const el = document.getElementById('element');
for (let i = 0; i < 10000; i++) {
    el.classList.add('test');
    el.classList.remove('test');
}
console.timeEnd('Vanilla');  // 約5ms

ただし: 通常の使用では体感できる差はほとんどありません。

どちらを選ぶべきか

jQueryを選ぶべき場合

状況	理由
WordPress開発	標準で含まれている
既存jQueryプロジェクトの保守	一貫性を保つ
jQueryプラグインを使いたい	豊富なプラグイン資産
レガシーブラウザ対応	IE対応が必要
プロトタイプ作成	素早く実装できる
チームがjQueryに慣れている	学習コスト削減

Vanilla JSを選ぶべき場合

状況	理由
新規プロジェクト	依存関係を減らす
パフォーマンス重視	オーバーヘッドなし
軽量サイト	ファイルサイズ削減
モダンブラウザのみ対応	ネイティブAPIが充実
JavaScript力を高めたい	基礎理解が深まる
Reactなどへの移行予定	素のJSに慣れておく

判断フローチャート

新規プロジェクト？
  ├─ Yes → モダンブラウザのみ対応？
  │          ├─ Yes → Vanilla JS（またはReact/Vue）
  │          └─ No  → jQuery（IE対応が必要なら）
  │
  └─ No  → 既存がjQuery？
             ├─ Yes → jQuery継続
             └─ No  → 既存技術に合わせる

まとめ

コード比較一覧

操作	jQuery	Vanilla JS
要素取得	`$('#id')`	`document.querySelector('#id')`
クラス追加	`.addClass()`	`.classList.add()`
イベント	`.on('click', fn)`	`.addEventListener('click', fn)`
Ajax	`$.ajax()`	`fetch()`
アニメ	`.fadeIn()`	CSS Transition

結論

2026年の答え:

Vanilla JSを基本とし、必要に応じてjQueryを使う
新規開発ではVanilla JSまたはモダンフレームワークを優先
既存プロジェクトの保守ではjQueryを継続
両方書けるのがベスト

jQueryは便利なツールですが、JavaScript自体の理解を深めることで、より柔軟な開発ができるようになります。

目次