Vanilla JSとは素のJavaScript、すなわち純粋なJavaScriptのことを言います。
jQueryで記述していたコードをVanilla JSに書き換える時によく使うものをまとめてみました。
セレクタ
IDセレクタ
ID名で要素を指定する。
構文
jQuery
jQuery('#id')
JavaScript
document.getElementById(id)
記述例
ID名「header」の要素を指定する。
jQuery
$('#header')
JavaScript
document.getElementById('header')
クラスセレクタ
クラス名で要素を指定する。
構文
jQuery
jQuery('.class')
JavaScript
document.getElementsByClassName(names)
記述例
クラス名「listItem」の要素を指定する。
jQuery
$('.listItem')
JavaScript
document.getElementsByClassName('listItem')
上記例ではlistItemクラスを持つすべての要素を取得します。
要素セレクター
タグ名で要素を指定する。
構文
jQuery
jQuery('element')
JavaScript
document.getElementsByTagName(name)
記述例
タグ名「div」の要素を指定する。
jQuery
$('div')
JavaScript
document.getElementsByTagName('div')
Attributes
attr
属性の値を設定する。
構文
jQuery
.attr(attributeName, value)
JavaScript
element.setAttribute(name, value)
記述例
ID名「menu」の要素の「title」属性に「メニュー」を指定する。
jQuery
$('#menu').attr('title', 'メニュー')
JavaScript
document.getElementById('menu').setAttribute('title', 'メニュー')
操作系
要素の追加
構文
jQuery
.append(content [,content])
JavaScript
appendChild(aChild)
記述例
ID名「menu」の要素内に「div」タグを追加する。
jQuery
$('#menu').append($('<div/>'))
JavaScript
document.getElementById('menu').appendChild(document.createElement('div'))
要素の削除
構文
jQuery
.remove([selector])
JavaScript
remove()
記述例
ID名「menu」の要素を削除、クラス名「listItem」の要素を削除する。
jQuery
$('#menu').remove()
$('.listItem').remove()
JavaScript
document.getElementById('menu').remove()
document.querySelectorAll('.listItem').forEach(element => element.remove())
CSSクラスの追加
構文
jQuery
.addClass(className)
JavaScript
add(token)
記述例
ID名「header」の要素にクラス名「scrolled」を追加、クラス名「item」の要素全てにクラス名「show」を追加する。
jQuery
$('#header').addClass('scrolled');
$('.item').addClass('show');
JavaScript
document.getElementById('header').classList.add('scrolled');
document.querySelectorAll('.item').forEach(element => element.classList.add('show'));
CSSクラスの削除
構文
jQuery
.removeClass(className)
JavaScript
remove(token)
記述例
ID名「header」の要素のクラス名「scrolled」を削除、クラス名「item」の要素全てからクラス名「show」を削除する。
jQuery
$('#header').removeClass('scrolled');
$('.item').removeClass('show');
JavaScript
document.getElementById('header').classList.remove('scrolled');
document.querySelectorAll('.item').forEach(element => element.classList.remove('show'));
toggle
指定したクラス名のオン（設定）、オフ（削除）の切り替えを行う。
構文
jQuery
.toggleClass(className)
JavaScript
toggle(token)
記述例
ID名「menu」の要素にクラス名「menu_show」の追加と削除を交互に行う。
jQuery
$('#menu').toggleClass('menu_show');
JavaScript
document.getElementById('menu').classList.toggle('menu_show');
イベント系
DOMの読み込みが終わった時に発火するイベント
DOMの読み込みが終わったら何かをさせたい時の記述例
jQuery
$(document).ready(function () {
// 〜 処理 〜
});
JavaScript
document.addEventListener('DOMContentLoaded', () => {
// 〜 処理 〜
});
画像を含むすべての要素の読み込みが終わった時に発火するイベント
画像を含むすべての要素の読み込みが終わったら何かをさせたい時の記述例
jQuery
$(window).on('load', function() {
// 〜 処理 〜
});
JavaScript
window.addEventListener('load', event => {
// 〜 処理 〜
});
クリックイベント
クリックした時に何かをさせたい場合の記述例
jQuery
$('#button').on('click', function () {
// 〜 処理 〜
});
JavaScript
document.getElementById('button').addEventListener('click', () => {
// 〜 処理 〜
});
スクロールイベント
スクロールした時に何かをさせたい場合の記述例
jQuery
$(window).scroll(function () {
// 〜 処理 〜
});
JavaScript
window.addEventListener('scroll', () => {
// 〜 処理 〜
});
小技
親要素の取得
jQuery
$('#menu').parent()
JavaScript
document.getElementById('menu').parentNode
スクロールしたピクセル数の取得
jQuery
var scroll = $(window).scrollTop();
JavaScript
let scroll = document.scrollingElement.scrollTop;
ページ内リンクをクリックするとスクロールして移動する
jQuery
$(document).on('click', 'a[href^="#"]', function (e) {
e.preventDefault();
var anchor = $(this).attr('href');
var content = $(anchor == '#' || anchor == '' ? 'html' : anchor);
var position = content.offset().top;
$('html,body').animate({
scrollTop: position
}, 400, 'swing');
});
JavaScript
const easing = {
easeInOut: (t) => t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
}
const duration = 500;
document.querySelectorAll('a[href^="#"]').forEach(element => {
element.addEventListener('click', (event) => {
event.preventDefault();
let anchor = event.target.hash;
let content = document.querySelector(anchor == "#" || anchor == "" ? 'html' : anchor);
let currentPos = document.documentElement.scrollTop || document.body.scrollTop;
let startTime = performance.now();
/**
* loop function
*
*/
let loop = (nowTime) => {
let time = nowTime - startTime;
let normalizedTime = time / duration;
if (normalizedTime < 1) {
window.scrollTo(0, currentPos + ((content.offsetTop - currentPos) * easing.easeInOut(normalizedTime)));
requestAnimationFrame(loop);
} else {
window.scrollTo(0, content.offsetTop);
}
}
requestAnimationFrame(loop);
});
});
スクロール位置により要素（ページの先頭へリンク等）をフェードイン / フェードアウト表示
jQuery
$(document).ready(function () {
var $element = $('#pageTop');
$element.hide();
$(window).scroll(function () {
$(this).scrollTop() > 1000 ? $element.fadeIn(500) : $element.fadeOut(500);
});
});
JavaScript
document.addEventListener('DOMContentLoaded', () => {
/**
* fadeIn function
* フェードイン
*
* @param {Element} element セレクター（DOM要素を指定）
* @param {number} duration トランジッションの実行にかかる所要時間
*/
const fadeIn = (element, duration) => {
if (element.style.opacity == '1') return;
element.style.cssText = 'display: block; opacity: 0; transition: opacity ' + duration + 'ms;';
setTimeout(() => {
element.style.opacity = 1;
}, 1);
}
/**
* fadeOut function
* フェードアウト
*
* @param {Element} element セレクター（DOM要素を指定）
* @param {number} duration トランジッションの実行にかかる所要時間
*/
const fadeOut = (element, duration) => {
if (element.style.opacity == '0') return;
element.style.cssText = 'opacity: 1; transition: opacity ' + duration + 'ms;';
setTimeout(() => {
element.style.opacity = 0;
}, 1);
setTimeout(() => {
element.style.display = 'none';
}, duration + 10);
}
// ページの先頭へリンクのスクロールイベント
const element = document.getElementById('pageTop');
element.style.display = 'none';
window.addEventListener('scroll', event => {
(document.documentElement.scrollTop || document.body.scrollTop) > 1100 ? fadeIn(element, 500) : fadeOut(element, 500);
});
// ページ描画時のスクロール位置によるリンクの表示設定のためスクロールイベントを強制発火
window.dispatchEvent(new Event('scroll'));
});
スクロール時のヘッダー表示を制御する
スクロールするとヘッダーを固定表示にしたりデザインを変更したい場合
jQuery
$(document).ready(function () {
var $element = $('#header');
var className = 'scrolled';
// スクロール位置によっては背景が透明になるので、初回時に実行
headerChange();
$(window).scroll(function () {
headerChange();
});
function headerChange() {
$(window).scrollTop() > 0 ? $element.addClass(className) : $element.removeClass(className);
}
});
JavaScript
document.addEventListener('DOMContentLoaded', () => {
const header = document.getElementById('header');
const className = 'scrolled';
/**
* headerChange function
* 画面のスクロール位置によってヘッダーの表示方法を切り替える
*/
const headerChange = () => document.scrollingElement.scrollTop > 0 ? header.classList.add(className) : header.classList.remove(className);
// スクロール位置が0以外の場合もあるので初回時に実行
headerChange();
// スクロールイベント発生時に実行
window.addEventListener('scroll', headerChange);
});
まとめ
コード量が増えるもののjQueryを使わなくても純粋なJavaScriptのみで記述できる場合もありますので、他のライブラリへの移行やjQueryを使わずに既存コードを書き換える際の参考になりましたら幸いです。