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))

引用・参考リンク

Related Cheatsheets

Related Goods

  • 日本で一番売れているJavaScript本です。 2023年に大幅改訂されました。
    日本で一番売れているJavaScript本です。 2023年に大幅改訂されました。
    詳細をみる
  • 「あのプログラムはどう書くんだろう？」から検索できる便利なコードレシピ集です。
    「あのプログラムはどう書くんだろう？」から検索できる便利なコードレシピ集です。
    詳細をみる
  • JavaScriptを本格的に学ぶ方に贈る本。 私も何度も格闘しました。手元においておき定期的に見返すことで、新たな発見も。
    JavaScriptを本格的に学ぶ方に贈る本。 私も何度も格闘しました。手元においておき定期的に見返すことで、新たな発見も。
    詳細をみる
  • 知識ゼロからでもjQueryを基礎と実践を学べるまさに教科書的な本です。
    知識ゼロからでもjQueryを基礎と実践を学べるまさに教科書的な本です。
    詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm Logo

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)
すべてのチートシートを見る