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) => {
...
});