jQueryからの脱却！よくある処理をネイティブJSで書き換える

要素の取得とイベントの登録

jQueryの場合：

$(".btn").on("click", function () {
    console.log("クリックされました");
});

ネイティブJavaScript：

document.querySelectorAll(".btn").forEach(function (el) {
    el.addEventListener("click", function () {
        console.log("クリックされました");
    });
});

.querySelectorAll()で複数要素を取得し、forEachでループ。イベント登録はaddEventListenerを使います。

将来追加される要素へのイベント付与（イベントデリゲーション）

jQueryの場合：

$(document).on("click", ".btn", function () {
    console.log("動的に追加された要素がクリックされました");
});

ネイティブJavaScript：

document.addEventListener("click", function (event) {
    if (event.target.matches(".btn")) {
        console.log("動的に追加された要素がクリックされました");
    }
});

動的に追加された要素にもイベントを適用するには、親要素に対してイベントを登録し、event.targetのマッチを確認する方法（イベントデリゲーション）を使います。

クラスの付け外し

jQueryの場合：

$(".box").addClass("active");
$(".box").removeClass("active");
$(".box").toggleClass("active");

ネイティブJavaScript：

document.querySelector(".box").classList.add("active");
document.querySelector(".box").classList.remove("active");
document.querySelector(".box").classList.toggle("active");

classListを使えば、クラス操作もシンプルに書けます。

Ajaxリクエストの送信

jQueryの場合：

$.ajax({
    url: "/api/data",
    method: "GET",
    success: function (data) {
        console.log(data);
    }
});

ネイティブJavaScript（fetch API）：

fetch("/api/data")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("エラー：", error);
    });

fetchはPromiseベースで、非同期処理をスマートに扱えます。

DOMの読み込み完了後の処理

jQueryの場合：

$(function () {
    console.log("DOMの準備ができました");
});

ネイティブJavaScript：

document.addEventListener("DOMContentLoaded", function () {
    console.log("DOMの準備ができました");
});

DOMContentLoadedイベントを使えば、同様の処理が可能です。

フェードイン・フェードアウト

アニメーションはjQueryの強みですが、CSSと併用すればネイティブでも対応可能です。

jQueryの場合：

$(".box").fadeIn();
$(".box").fadeOut();

ネイティブJavaScript + CSS：

.fade {
    opacity: 0;
    transition: opacity 0.5s;
}
.fade.show {
    opacity: 1;
}

const box = document.querySelector(".box");
box.classList.add("fade");
box.classList.add("show");

アニメーションはclassListの切り替えとCSSトランジションで表現します。

まとめ：jQueryから脱却して軽量・モダンなコードへ

jQueryの記述は簡潔でわかりやすい反面、最近のブラウザではネイティブJavaScriptで同じことができるケースがほとんどです。プロジェクトによってはライブラリの読み込みすら不要になり、ページのパフォーマンス改善にもつながります。まずは身近な処理からネイティブに書き換えて、jQueryに頼らない開発スタイルを目指してみましょう。