✍️

【脱jQuery】jQuery <=> vanillaJS 書き換え集

2022/06/29に公開
2

jQuery <=> JavaScript全書き換え一覧ではありません

jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。
脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。

script.js
/*-----------------------------------
セレクター
------------------------------------*/
//html
$("html")
document.documentElement;
 
//body
$("body")
document.body;
 
//id
$("#hoge");
document.getElementById("hoge");
 
//class
$(".hoge");
document.querySelector(".hoge");
 
//タグ 単体
$("hoge");
document.querySelector("hoge");

//タグ 複数
$("hoge");
document.querySelectorAll("hoge");
 
//複数
$(".hoge,.fuga");
document.querySelectorAll(".hoge,.fuga");
 
//子孫
$(".hoge fuga");
document.querySelectorAll(".hoge fuga");
 
//親
$(".hode").parents(".fuga");
elem.closest(".fuga");
 
//兄弟
/*1つ前の要素*/
$(".hode").siblings(".fuga");
document.querySelector("hoge").previousElementSibling;
 
/*1つ後の要素*/
$(".hode").siblings(".fuga");
document.querySelector("hoge").nextElementSibling;
 
/*要素を指定*/
$(".hode").siblings(".fuga");
const hoge29 = document.querySelector(".hoge");
const hogeSiblings = hoge29.parentElement.querySelector(".fuga");
 
//:擬似class
$("hoge:first-child");
document.querySelectorAll("hoge:first-child");
/*
css擬似classはこの形でJavaScript上での使用が可能
querySelectorAll("p:first-child") では「全ての要素の先頭の<p>が取得される」
querySelector("p:first-child") では「<p>を持つ一番最初の要素の<p>」が取得される
*/
 
//:否定擬似class
$("hoge:not(:first-child)");
document.querySelectorAll("hoge:not(:first-child)");
 
/*-----------------------------------
生成
------------------------------------*/
const hoge28 = document.querySelector(".hoge");
const hoge29 = document.createElement("p");
hoge29.textContent = "hoge";
hoge28.insertAdjacentElement("beforeend", hoge29);
 
/*実行結果
<div class="hoge">
</div>
↓
<div class="hoge">
  <p>hoge</p>
</div>
*/
 
/*-----------------------------------
取得
------------------------------------*/
$("#hoge").html();
document.getElementById("hoge").innerHTML; // #hogeのhtmlを取得
 
$("hoge").eq(1).html();
document.querySelectorAll("hoge")[1].innerHTML; // 2番目のhogeのhtmlを取得
 
/*-----------------------------------
存在チェック
------------------------------------*/
if (document.querySelector("hoge") != null) {
  //処理を記述
}
 
/*-----------------------------------
書き換え
------------------------------------*/
// .html() idの場合
$("#hoge1").html("<span>hoge</span>");
document.getElementById("hoge1").innerHTML = "<span>hoge</span>";
 
// .html() classの場合
$(".hoge1").html("<span>hoge</span>");
let hoge1 = document.querySelectorAll("hoge");
for (let i = 0; i < hoge1.length; i++) {
  hoge1[i].innerHTML = "<span>hoge</span>";
}
 
//.text() idの場合
$("#hoge").text("hoge");
document.getElementById("hoge").textContent = "hoge";
 
//.text() classの場合
let hoge2 = document.querySelectorAll("hoge2");
for (let i = 0; i < hoge2.length; i++) {
  hoge2[i].textContent = "hoge";
}
 
//val()
$(".hoge3").val("hoge3");
let hoge3 = document.querySelector(".hoge3");
hoge3.value = "hoge3";
 
/*-----------------------------------
挿入
------------------------------------*/
/* HTMLを挿入する場合は、insertAdjacentElement部分を */
insertAdjacentHTML("挿入位置", '<div class="' + hoge + '"></div><div class="' + fuga + '"></div>');
/* 上記に書き換える */
 
/* Elementを挿入 */
 
//before() 起点要素外側の前に挿入
$("#hoge").before($("#fuga"));
let hoge23 = document.querySelector(".hoge");
let fuga3 = document.querySelector(".fuga");
hoge23.insertAdjacentElement("beforebegin", fuga3);
 
/*出力結果
<div class="hoge">
  <h1>hoge</h1>
</div>
 
<p class="fuga">fuga</p>
↓
<p class="fuga">fuga</p>
<div class="hoge">
  <h1>hoge</h1>
</div>
*/
 
//after() 起点要素外側の後に挿入
$("#hoge").after($("#fuga"));
let hoge24 = document.querySelector(".hoge");
let fuga4 = document.querySelector(".fuga");
hoge24.insertAdjacentElement("afterend", fuga4);
 
/*出力結果
<p class="fuga">fuga</p>
<div class="hoge">
  <h1>hoge</h1>
</div>
↓
<div class="hoge">
  <h1>hoge</h1>
</div>
<p class="fuga">fuga</p>
*/
 
//prepend() 起点要素内の最初に挿入
$("#hoge").prepend($("#fuga"));
let hoge25 = document.querySelector(".hoge");
let fuga5 = document.querySelector(".fuga");
hoge25.insertAdjacentElement("afterbegin", fuga5);
 
/*出力結果
<div class="hoge">
  <h1>hoge</h1>
</div>
<p class="fuga">fuga</p>
↓
<div class="hoge">
  <p class="fuga">fuga</p>
  <h1>hoge</h1>
</div>
*/
 
//append() 起点要素内の最後に挿入
$("#hoge").append($("#fuga"));
let hoge26 = document.querySelector(".hoge");
let fuga6 = document.querySelector(".fuga");
hoge26.insertAdjacentElement("beforeend", fuga6);
 
/*出力結果
<div class="hoge">
  <h1>hoge</h1>
</div>
<p class="fuga">fuga</p>
↓
<div class="hoge">
  <h1>hoge</h1>
  <p class="fuga">fuga</p>
</div>
*/
 
//wrap() 対象要素の親要素として追加
$(".hoge").wrap("<div></div>");
let hoge19 = document.getElementById("hoge");
hoge.outerHTML = "<div>" + hoge19.outerHTML + "</div>";
 
/*出力結果
<div>
  <p id="hoge">hoge</p>
</div>
↓
<div>
  <div>
    <p id="hoge">hoge</p>
  </div>
</div>
*/
 
//wrapInner() 対象要素の子要素を別の親要素で囲む
$("#hoge").wrapInner("<span></span>")
let hoge20 = document.getElementById("hoge");
hoge20.innerHTML = "<span>" + hoge.innerHTML + "</span>";
 
/*出力結果
<div>
  <p id="hoge">hoge</p>
</div>
↓
<div>
  <p id="hoge"><span>hoge</span></p>
*/
 
//wrapAll() 全対象要素の親要素として追加
$(".hoge").wrapAll("<div></div>");
 
let hoge20 = document.querySelectorAll(".hoge"),
  wrapElement = document.createElement("div");
 
hoge20[0].parentNode.insertBefore(wrapElement, hoge20[0]);
hoge20.forEach(function (element, index) {
  wrapElement.appendChild(element);
});
 
/*出力結果
<p class="hoge">hoge</p>
<p class="hoge">hoge</p>
<p class="hoge">hoge</p>
↓
<div>
  <p class="hoge">hoge</p>
  <p class="hoge">hoge</p>
  <p class="hoge">hoge</p>
</div>
*/
 
/*-----------------------------------
除去
------------------------------------*/
//unWrap()
$("p").unwrap();
 
let target3 = document.querySelector("p");
let parent3 = target3.parentNode;
let grand = parent3.parentNode;
grand.innerHTML = target3.outerHTML;
 
/*出力結果
<span><p>hoge</p></span>
↓
<p>hoge</p>
*/
 
//remove()
$("p span").remove();
let target1 = document.querySelector("p");
target1.remove();
 
//子要素をremove()
$("p span").remove();
 
let target2 = document.querySelector("p");
let nest = target.querySelector("span");
target.removeChild(nest);
 
/*出力結果
<p><span>fuga</span>hoge</p>
↓
<p>hoge</p>
*/
 
/*-----------------------------------
置換
------------------------------------*/
//prependTo() 起点要素内の最初に置換
$("#hoge").prependTo($("#fuga"));
let hoge21 = document.getElementById("hoge");
let fuga2 = document.getElementById("fuga");
hoge21.insertBefore(fuga2, hoge21.firstElementChild);
 
/*出力結果
<ul id="hoge">
  <li>hoge1</li>
  <li>hoge2</li>
  <li id="fuga">fuga</li>
</ul>
↓
<ul id="hoge">
  <li id="fuga">fuga</li>
  <li>hoge1</li>
  <li>hoge2</li>
</ul>
*/
 
//appendTo() 起点要素内の最後に置換
$("#hoge").appendTo($("#fuga"));
document.getElementById("hoge").appendChild(document.getElementById("fuga"));
 
//replaceWith()
$("p").replaceWith("<h1>fuga</h1>");
document.querySelector("p").outerHTML = "<h1>fuga</h1>";
 
/*出力結果
<p>hoge</p>
↓
<h1>fuga</h1>
*/
/*-----------------------------------
絞り込み
------------------------------------*/
//eq()
$(".hoge8").eq(2);
document.querySelectorAll(".hoge8")[2];
 
//not()
$(".menu").not(".fuga");
let hoge9 = document.querySelectorAll("hoge");
for (let i = 0; i < hoge9.length; i++) {
  if (!hoge9[i].classList.contains("fuga")) {
    //処理内容
  }
}
 
//children()
$("#hoge").children().text("hoge");
let hoge10 = document.getElementById("hoge").children;
for (let i = 0; i < hoge10.length; i++) {
  hoge10[i].textContent = "hoge";
}
 
//children() class名で抽出
$("#hoge").children(".fuga").text("fuga");
let hoge11 = document.getElementById("hoge").children;
for (let i = 0; i < hoge11.length; i++) {
  if (hoge11[i].classList.contains("fuga")) {
    hoge11[i].textContent = "fuga";
  }
}
 
//parent()
$("#hoge").parent().text("hoge");
document.getElementById("hoge").parentNode.textContent = "hoge";
 
//next()
$("#hoge").next().text("hoge");
document.getElementById("hoge").nextElementSibling.textContent = "hoge";
 
//prev()
$("#hoge").prev().text("hoge");
document.getElementById("hoge").previousElementSibling.textContent = "hoge";
 
//find
//タグ
$("#hoge").find("a");
document.getElementById("hoge").querySelector("a");
 
//class
$("#hoge").find(".hoge");
document.getElementById("hoge").querySelector(".hoge");
 
//複数
$("#hoge").find(".hoge12,ul");
document.querySelectorAll(".hoge,li");
 
//id
$("#hoge").find("#fuga");
document.getElementById("hoge").querySelector("#fuga");
// getElementByIdはdocument.から記述開始しなければならないためquerySelectorで代用
 
//:first
$(".hoge:first").text("hoge");
document.querySelectorAll("hoge14")[0].textContent = "hoge";
 
//:last
$(".hoge:last").text("hoge");
let hoge14 = document.querySelectorAll("hoge");
hoge14[hoge14.length - 1].textContent = "hoge";
 
/*-----------------------------------
css
------------------------------------*/
//取得
$("#hoge").css("color");
document.defaultView.getComputedStyle(document.getElementById("hoge"), null)
  .color;
  
/*getComputedStyle()は、「スタイルの値に同的に含まれる可能性のある計算を解決」した後に
要素に適用されているスタイルが格納されたオブジェクトを返す
第一引数:styleを取得したい要素
第二引数:擬似要素に相当する文字列
  例:document.defaultView.getComputedStyle(hoge, ":after").width;
*/
 
 
//書き換え
$("#hoge").css("color", "#000");
document.getElementById("hoge").style.color = "#000";
 
/*
background-color等の「-」を含むプロパティは
backgroundColorの様に「-」直後を大文字に変えて「-」は削除する
*/
 
/*-----------------------------------
animate
------------------------------------*/
$(".hoge").animate({property:value});
const animationSample = document.querySelector(".hoge");
animationSample.addEventListener("click", function () {
  this.animate(
    [
      { /*変化前の状態*/ backgroundColor: "red", transform: "scale(1)", offset: 0.2 /* 0.2 = 20% */ },
      { /*変化後の状態*/ backgroundColor: "blue", transform: "scale(1)", offset: 0.4 /* 0.4 = 40% */ },
      { /*変化後の状態*/ backgroundColor: "green", transform: "scale(2)", offset: 1 /* 1 = 100% */ },
    ],
    {
      duration: 3000, //アニメーションスピード
      easing: "ease-in-out", //イージングを設定
      fill: "forwards", //アニメーション終了状態を維持
      iterations:Infinity // 繰り返しの回数を指定。数値で回数、Infinityで無限
    }
  );
});
 
 
/*-----------------------------------
class
------------------------------------*/
//追加
$("#hoge").addClass("fuga");
document.getElementById("hoge").classList.add("fuga");
 
//削除
$("#hoge").removeClass("fuga");
document.getElementById("hoge").classList.remove("fuga");
 
//判定
$("#hoge").hasClass("fuga");
document.getElementById("hoge").classList.contains("fuga");
 
//toggle
$("#hoge").toggleClass("fuga");
document.getElementById("hoge").classList.toggle("fuga");
 
/*-----------------------------------
属性
------------------------------------*/
//取得
/* 属性 */
$("#hoge").attr("src");
document.getElementById("hoge").getAttribute("src");
 
/* カスタムデータ属性 */
$("#hoge").data("fuga");
document.getElementById("hoge").dataset.fuga;
 
/*
<p id="hoge" data-fuga="fuga"></p>
*/
 
//書き換え
$("#hoge").attr("src", "assets/images/fuga.png");
document.getElementById("hoge").setAttribute("src", "assets/images/fuga.png");
 
//削除
$("a").removeAttr("target");
document.querySelector("a").removeAttribute("target");
 
//prop()
$(".hogedl input[type='radio']:nth-child(1)").prop("checked", true);
document
  .querySelector(".hogedl input[type='radio']:nth-child(1)")
  .setAttribute("checked", "checked");
 
/*-----------------------------------
イベント
------------------------------------*/
// .click() ※click以外のトリガーはclick部分を書き換え
$("#hoge").on("click", function () {
  //処理内容
});
document.getElementById("hoge").addEventListener(
  "click",
  function () {
    //処理内容
  },
  false
);
 
//スクロールイベント
document.getElementById("hoge").addEventListener(
  "scroll",
  function () {
    //処理内容
  },
  //passive:true で、この関数ないでevent.preventDefault()を呼んでいない事を宣言 = 処理が軽くなる
  { passive: true }
);
 
//.on() ※動的に生成された要素をトリガーにする
const hoge = document.querySelector(".hoge");
 
// クラス属性の値で判定
document.addEventListener("click", function (event) {
  if (event.target && event.target.classList.contains("fuga")) {
    hoge.insertAdjacentHTML("beforeend", "<li class='fuga'>fuga</li>");
  }
});
 
// id属性の値で判定
document.addEventListener("click", function (e) {
  if (event.target && event.target.id === "fuga") {
    hoge.insertAdjacentHTML("beforeend", "<li id='fuga'>fuga</li>");
  }
});
 
/*実行結果
<ul class="hoge">
  <li class="fuga">fuga</li> ←トリガー
</ul>
↓
<ul class="hoge">
  <li class="fuga">fuga</li> ←トリガー
  <li class="fuga">fuga</li> ←トリガー
</ul>
*/
 
//trigger()
//イベントターゲットを設定
const eventTarget = document.querySelector(".hoge");
//イベント処理を設定
eventTarget.addEventListener("click", function () {
  this.style.color = "red";
});
//任意のイベントを作成(click部分を任意のイベントタイプに変更)
const createEvent = new Event("click");
 
//希望のタイミングでイベントターゲットに対してイベントを強制発火
window.addEventListener("load", function () {
  eventTarget.dispatchEvent(createEvent);
});
 
 
/*-----------------------------------
要素幅
------------------------------------*/
//width
$("#hoge").width();
//border + スクロールバーまで取得
document.getElementById("hoge").offsetWidth;
 
//paddingまで取得
document.getElementById("hoge").clientWidth;
 
//height
$("#hoge").height();
//border + スクロールバーまで取得
document.getElementById("hoge").offsetHeight;
 
//paddingまで取得
document.getElementById("hoge").clientHeight;
 
//ウィンドウサイズ
$(window).width();
 
//スクロールバーを含んだウィンドウの幅
window.innerWidth;
//スクロールバーを含んだウィンドウの高さ
window.innerHeight;
//サイドバーなどを含んだブラウザ全体の幅
window.outerWidth;
//タブやブックマークバーなどを含んだブラウザ全体の高さ
window.outerHeight;
 
/*-----------------------------------
offset
------------------------------------*/
//top
let hogeTop1 = $("#hoge").offset().top;
 
let hoge15 = document.getElementById("hoge");
let rect1 = hoge15.getBoundingClientRect();
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
let hogeTop2 = rect1.top + scrollTop;
 
//left
let hogeLeft1 = $("hoge").offset().left;
 
let hoge16 = document.getElementById("hoge");
let rect2 = hoge16.getBoundingClientRect();
let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
let hogeLeft2 = rect2.left + scrollLeft;
 
/*-----------------------------------
scroll
------------------------------------*/
//取得
let hogeSrollTop1 = $(window).scrollTop();
let hogeScrollTop2 =
  document.documentElement.scrollTop || document.body.scrollTop;
 
//書き換え
//scrollTo
$(window).scrollTop(300);
window.scrollTo(0, 300);
//(0,300)部分は(x軸,y軸)
/*オプション例
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth", //スムーススクロール
  });
*/
 
/* safari iOS Edgeではsmoothオプションが使用できないためsmoothscroll-polyfillの読み込みが必要(CDN可)*/
 
//scrollIntoView
let hoge18 = document.querySelector(".hoge");
hoge18.scrollIntoView({
  behavior: "smooth",
  block: "start", // center end
});
 
/*-----------------------------------
読み込み
------------------------------------*/
//DOMが読み込まれたら発火
$("document").ready();
document.addEventListener("DOMContentLoaded", function () {
  //処理内容
});
 
//ページのデータが全て読み込まれたら発火
$("window").load();
window.addEventListener("load", function () {
  //処理内容
});
 
//即時関数 引数なし
(function () {
  //処理内容
})();
 
//即時関数 引数あり
(function (param1, param2) {
  //処理内容
})("hoge", "fuga");
 
/*-----------------------------------
each
------------------------------------*/
//$.each()
let arr1 = ["hoge1", "hoge2", "hoge3", "hoge4", "hoge5"];
$.each(arr, function () {
  console.log(this);
});
 
let arr2 = ["hoge1", "hoge2", "hoge3", "hoge4", "hoge5"];
for (let i = 0; i < arr2.length; i++) {
  console.log(arr2[i]);
}
 
//$("hoge").each()
$(".hoge").each(function (i, elem) {
  $(this).text(i + "処理内容" + elem);
});
 
let hoge17 = document.querySelectorAll("hoge");
hoge17.forEach(function (elem, index) {
  elem.textContent(index + "処理内容" + elem);
});

Discussion

udyestudyest
//class
$(".hoge");
document.querySelector(".hoge");
 
//タグ
$("hoge");
document.querySelector("hoge");

document.querySelector は一致した最初の要素1つのみしか取得しません。
よって、一致する全ての要素が欲しい場合は、上記の処理はイコールになりません。

複数の要素が欲しいときはdocument.querySelectorAllが使えますが、
クラス名やタグ名から取得するときは、document.getElementsByClassNamedocument.getElementsByTagNameを使った方がパフォーマンス的にも有利です。

こびとこびと

このコメントを見るまで、jQueryは$("hoge")だけで勝手に複数処理にしてくれて便利だったなぁという記憶を完全に忘れてました。
単体処理と複数処理を追記しました!コメントありがとうございます!🐟