jQueryのコードをECMAScript/JavaScriptのコードに変換する

2461 ワード
ECMAScript2015 ECMAScript6 jQuery JavaScript ECMAScript JavaScript テキストリンク

jQueryのコードをECMAScript/JavaScriptのコードに変換する

はじめに

以前の10年ほど前までは、JavaScriptと言えば、jQuery一択であった。
しかしこの10年で、Node.jsの登場により、Angular/React/Vue等の様々なフレームワークが活用されるようになった。
またJavaScriptの規格の一つであるECMAScriptもバージョンアップを行い、様々な機能が追加されている。
昨今ではjQueryもレガシーコードの一つとなりつつある。
そこで今回は、jQueryとECMAScript/JavaScriptのコードを変換するためのスペニットを以下に記載する。

コードスペニット

セレクタ

// jQuery
$("#name");
$(".item");

// ECMAScript/JavaScript
document.querySelector("#name");
document.getElementById("name");
document.querySelectorAll(".item");
document.getElementsByClassName("item");

表示/非表示

// jQuery
$("#name").show();
$(".item").hide();

// ECMAScript/JavaScript
// ID指定のみ可。クラス/タグ名の場合はループ処理を挟む必要有り
document.querySelector("#name").style.display = "block";
document.getElementById("name").style.display = "none";

非活性/活性

// jQuery
$("#name").prop("disabled", true);
$(".item").prop("disabled", false);

// ECMAScript/JavaScript
// ID指定のみ可。クラス/タグ名の場合はループ処理を挟む必要有り
document.querySelector("#name").disabled = true;
document.getElementById('name').disabled = false;

ループ処理

// jQuery
$(".item").each((index, element) => {
    ...
});

// ECMAScript/JavaScript
document.querySelectorAll('.item').forEach((element, index) => {
    ...
});

リンク