CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

jQuery -> Vanilla JSの変換

エンジニアのためのWebチートシート

Vanilla JSとは純粋なJavaScriptのことです。Pure JSと呼ばれたりもします。jQueryなどのライブラリありきでJavaScriptを考える風潮に皮肉を込めてVanilla JSと呼ばれています。 React.jsやVue.jsが台頭してくる中でjQueryに依存しない純粋なJavaScriptの書き方を覚えるために、jQuery -> Vanilla JSの対応関係をチートシートにまとめてみました。

セレクタ

ID

jQuery
$('#idName')
Vanilla JS
document.getElementById('idName')

class

jQuery
$('.className')
Vanilla JS
document.getElementsByClassName('className')

tag

jQuery
$('div')
Vanilla JS
document.getElementsByTagName('div')

parent

jQuery
$('#idName').parent()
Vanilla JS
document.getElementById('idName').parentNode

next

jQuery
$('#idName').next()
Vanilla JS
document.getElementById('idName').nextSibling

イベント

ready

jQuery
$(document).ready(function() {
  console.log('Hello world!')
})
Vanilla JS
document.addEventListener('DOMContentLoaded', function() {
  console.log('Hello world!')
})

click

jQuery
$('a').click(function() {
  console.log('Hello world!')
})
Vanilla JS
[].forEach.call(document.getElementsByTagName('a'), function(el) {
  el.addEventListener('click', function() {
    console.log('Hello world!')
  })
})

change

jQuery
$('#idName').change(function() {
  console.log('Hello world!')
})
Vanilla JS
document.getElementById('idName').addEventListener('change', function() {
  console.log('Hello world!')
})

Attributes

attr

jQuery
$('#idName').attr('alt', 'Sample Image')
Vanilla JS
document.getElementById('idName').attr('alt', 'Sample Image')

class

add

jQuery
$('#idName').addClass('className')
Vanilla JS
document.getElementById('idName').classList.add('className')

remove

jQuery
$('#idName').removeClass('className')
Vanilla JS
document.getElementById('idName').classList.remove('className')

toggle

jQuery
$('#idName').toggleClass('className')
Vanilla JS
document.getElementById('idName').classList.toggle('className')

操作系

append

jQuery
$('body').append($('<div/>'))
Vanilla JS
document.body.appendChild(document.createElement('div'))

remove

jQuery
$('body').empty()
Vanilla JS
var body = document.body
while(body.firstChild) body.removeChild(body.firstChild)

clone

jQuery
$('#idName').clone()
Vanilla JS
document.getElementById('idName').cloneNode(true)

empty

jQuery
$('#idName').is(':empty')
Vanilla JS
!document.getElementById('idName').hasChildNodes()

create

jQuery
$('<div/>')
Vanilla JS
document.createElement('div')

AJAX

GET

jQuery
$.get('https://cheatsheet.bookhub.jp, function (data) {
  console.log(data)
})
Vanilla JS
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(data) {
  console.log(data)
}
xhr.open('GET', 'https://cheatsheet.bookhub.jp')
xhr.send()

POST

jQuery
$.post('https://cheatsheet.bookhub.jp', { id: 1 }, function (data) {
  console.log(data)
})
Vanilla JS
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function (data) {
  console.log(data)
}
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.open('POST', 'https://cheatsheet.bookhub.jp')
xhr.send('id=' + encodeURIComponent(1))