[JavaScript] jQueryからネイティブJavaScriptへの置き換え

ECMAに準拠したモダンブラウザの普及に伴いjQueryの利用を止めてネイティブなJavaScriptに移行(回帰)しようという際に、jQueryで実装していた処理をどう置き換えるかは悩みどころ。

JavaScriptには似たような機能が沢山あって解決策はひとつではありませんが、ECMAScript 6(2015)での動作を前提とした代表的な置き換え方法を備忘録がてら残しておくことにします。

要素の選択

// jQuery
$("#id");
$(".class");

// Native JavaScript
document.querySelector("#id");
document.querySelectorAll(".class");

こちらの記事も併せてご参照ください。

要素内の値の操作

要素内のHTML取得

// jQuery
let content = $("#id").html();

// Native JavaScript
let content = element.innerHTML;

要素内のHTML設定・変更

// jQuery
$("#id").html(content);

// Native JavaScript
element.innerHTML = content;

要素内のテキスト取得

// jQuery
let content = $("#id").text();

// Native JavaScript
let content = element.textContent();

要素内のテキスト設定・変更

// jQuery
$("#id").text(content);

// Native JavaScript
element.textContent = content;

フォームの値取得

// jQuery
let value = $("#id").val();

// Native JavaScript
let value = element.value;

フォームの値設定・変更

// jQuery
$("#id").val(value);

// Native JavaScript
element.value = value;

属性の操作

属性値の取得

// jQuery
let value = $("#id").attr(attributeName);

// Native JavaScript
let value = element.getAttribute(attributeName);

属性の追加及び属性値の変更

// jQuery
$("#id").attr(attributeName, value);

// Native JavaScript
element.setAttribute(attributeName, value);

属性の削除

// jQuery
$("#id").removeAttr(attributeName);

// Native JavaScript
element.removeAttribute(attributeName);

属性の有無判定

// jQuery
if (typeof $("#id").attr(attributeName) != 'undefined') { ... }

// Native JavaScript
if (element.hasAttribute(attributeName))  { ... }

クラスの操作

クラスの追加

// jQuery
$("#id").addClass(class);

// Native JavaScript
element.classList.add(class);

クラスの削除

// jQuery
$("#id").removeClass(class);

// Native JavaScript
element.classList.remove(class);

クラスのトグル(あれば削除、なければ追加)

// jQuery
$("#id").toggleClass(class);

// Native JavaScript
element.classList.toggle(class);

クラスの有無判定

// jQuery
$("#main").hasClass(class);

// Native JavaScript
element.classList.contains(class);

ノードの操作

末尾にノード追加

// jQuery
$("#id").append(childNode);

// Native JavaScript
element.appendChild(childNode);

先頭にノード追加

// jQuery
$("#id").insertBefore(childNode);

// Native JavaScript
element.insertBefore(childNode, element.firstChild);

中身を空にする

// jQuery
$("#id").empty();

// Native JavaScript
element.textContent = null;

配列とオブジェクト操作

取得した要素で繰り返し

// jQuery
$(".class").each(function() { ... });

// Native JavaScript
for (let e of document.querySelectorAll(".class")) { ... }

配列から条件に合致しない値を除去

// jQuery
array = $.grep(array, function (s) { ... });

// Native JavaScript
array = array.filter(function (s) { ... });

配列内に値が存在するか確認

// jQuery
$.inArray(value, array);

// Native JavaScript
array.indexOf(value);

配列内の重複除去

// jQuery
array = $.unique(array);

// Native JavaScript
array = Array.from(new Set(array));

文字列操作

トリム

// jQuery
$.trim(string);

// Native JavaScript
string.trim();

イベント制御

クリックイベントのハンドリング

// jQuery
$("#id").on('click', function(){
  ...
});

// Native JavaScript
element.addEventListener("click", function() {
  ...
});

イベント発火

// jQuery
$("#id").trigger("change")

// Native JavaScript
evt = new Event('change');
element.dispatchEvent(evt);

AJAX

AJAX処理の実行

// jQuery
$.ajax({
  type       : 'GET',
  url        : url
}).done(function (data, textStatus, jqXHR) {
  // 成功時
  console.log(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
  // 失敗時
});

// Native JavaScript
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 成功時
      console.log(xhr.responseText);
    } else {
      // 失敗時
    }
  }
};
xhr.send(null);

実行タイミングの制御

DOMの読み込み完了を待って実行

// jQuery
$(function(){
  ..
});

// Native JavaScript
document.addEventListener('DOMContentLoaded', function() {
  ..
});