Go to Qiita Advent Calendar 2024 Top
LoginSignup
46
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@s-takayamain株式会社セレス

jQueryからVanilla JS（ピュアなJavaScript）に書き換える時によく使うもの

Last updated at Posted at 2023-05-23

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を使わずに既存コードを書き換える際の参考になりましたら幸いです。

46
43
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
46
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?