jQuery ↔ VanillaJSのチートシート

1. jQuery ↔ VanillaJSチートシート

以下は、jQuery ↔ VanillaJSチートシートです。jQueryに慣れたエンジニアがVanillaJSに移行する際に役立つよう、よく使われる構文を中心にまとめました。

🟦 基本操作

機能	jQuery	Vanilla JS
DOM読み込み後に実行	$(document).ready(function(){})	document.addEventListener('DOMContentLoaded', function() {})
要素の取得	$('#id') $('.class') $('tag')	document.getElementById('id') document.querySelector('.class') document.querySelectorAll('tag')
複数要素のループ	$('.item').each(function(i, el){})	document.querySelectorAll('.item').forEach(function(el, i){})

---

🟨 イベント操作

機能	jQuery	Vanilla JS
イベント追加	$('#btn').on('click', function(){})	document.getElementById('btn').addEventListener('click', function(){})
イベント削除	$('#btn').off('click')	element.removeEventListener('click', handler)
thisの扱い	$(this)	this（関数スコープに注意） 必要ならevent.targetを使用

---

🟩 CSS・属性

機能	jQuery	Vanilla JS
クラス追加	$('#box').addClass('active')	element.classList.add('active')
クラス削除	$('#box').removeClass('active')	element.classList.remove('active')
クラス切替	$('#box').toggleClass('active')	element.classList.toggle('active')
スタイル変更	$('#box').css('color', 'red')	element.style.color = 'red'
属性取得・設定	$('#el').attr('href') $('#el').attr('href', 'url')	element.getAttribute('href') element.setAttribute('href', 'url')

---

🟥 DOM操作

機能	jQuery	Vanilla JS
HTMLの取得・設定	$('#el').html() $('#el').html('<p>text</p>')	element.innerHTML element.innerHTML = '<p>text</p>'
テキストの取得・設定	$('#el').text() $('#el').text('text')	element.textContent element.textContent = 'text'
要素の追加（末尾）	$('#el').append('<div>text</div>')	element.insertAdjacentHTML('beforeend', '<div>text</div>')
要素の追加（先頭）	$('#el').prepend('<div>text</div>')	element.insertAdjacentHTML('afterbegin', '<div>text</div>')
要素の削除	$('#el').remove()	element.remove()
親要素の取得	$('#el').parent()	element.parentElement

---

🟪 AJAX

機能	jQuery	Vanilla JS (Fetch API)
GETリクエスト	$.get('/api', callback)	fetch('/api').then(res => res.json()).then(callback)
POSTリクエスト	$.post('/api', {key: 'value'})	fetch('/api', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({key: 'value'}) })
汎用AJAX	$.ajax({...})	fetch(url, options).then(...)

---

🟫 ユーティリティ関数

機能	jQuery	Vanilla JS
配列ループ	$.each(arr, function(i, val){})	arr.forEach(function(val, i){})
遅延処理	setTimeout(function(){}, 1000)	setTimeout(() => {}, 1000)
値が空かチェック	$.isEmptyObject(obj)	Object.keys(obj).length === 0

---

2. コードスニペット付きjQuery ↔ VanillaJS チートシート

2-1. DOM読み込み

✅ jQuery

$(document).ready(function() {
  console.log('DOM is ready!');
});

✅ VanillaJS

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is ready!');
});

---

2-2. 要素の取得

✅ jQuery

$('#myId');
$('.myClass');
$('div');

✅ VanillaJS

document.getElementById('myId');
document.querySelector('.myClass');
document.querySelectorAll('div');

---

2-3. 要素のループ処理

✅ jQuery

$('.item').each(function(index, el) {
  console.log(index, el);
});

✅ VanillaJS

document.querySelectorAll('.item').forEach(function(el, index) {
  console.log(index, el);
});

---

2-4. イベントの追加

✅ jQuery

$('#btn').on('click', function() {
  alert('Clicked!');
});

✅ VanillaJS

document.getElementById('btn').addEventListener('click', function() {
  alert('Clicked!');
});

---

2-5. クラス操作

✅ jQuery

$('#box').addClass('active');
$('#box').removeClass('active');
$('#box').toggleClass('active');

✅ VanillaJS

const box = document.getElementById('box');
box.classList.add('active');
box.classList.remove('active');
box.classList.toggle('active');

---

2-6. CSS・属性操作

✅ jQuery

$('#box').css('color', 'red');
$('#link').attr('href', 'https://example.com');

✅ VanillaJS

document.getElementById('box').style.color = 'red';
document.getElementById('link').setAttribute('href', 'https://example.com');

---

2-7. HTML・テキストの操作

✅ jQuery

$('#el').html('<p>Hello</p>');
$('#el').text('Hello');

✅ VanillaJS

document.getElementById('el').innerHTML = '<p>Hello</p>';
document.getElementById('el').textContent = 'Hello';

---

2-8. 要素の追加・削除

✅ jQuery

$('#el').append('<span>追加</span>');
$('#el').prepend('<span>最初に追加</span>');
$('#el').remove();

✅ VanillaJS

document.getElementById('el').insertAdjacentHTML('beforeend', '<span>追加</span>');
document.getElementById('el').insertAdjacentHTML('afterbegin', '<span>最初に追加</span>');
document.getElementById('el').remove();

---

2-9. AJAX通信（Fetch）

✅ jQuery

$.get('/api/data', function(response) {
  console.log(response);
});

$.post('/api/send', { name: 'John' }, function(response) {
  console.log(response);
});

✅ VanillaJS

// GET
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

// POST
fetch('/api/send', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
})
.then(res => res.json())
.then(data => console.log(data));

---

2-10. ユーティリティ

✅ jQuery

$.each([1, 2, 3], function(i, val) {
  console.log(i, val);
});

$.isEmptyObject({});

✅ VanillaJS

[1, 2, 3].forEach(function(val, i) {
  console.log(i, val);
});

Object.keys({}).length === 0;