jQuery の ajax の書き方を Pure JS の fetch で書き直す - ハトネコエ Web がくしゅうちょう

最近（遅いんですけど） querySelector メソッド知ったんですよ。

今までは、jQuery を使わない JavaScript だと
getElementById か getElementsByClassName 使ってじゃないと DOM 要素を取れないと思っていたので、
jQuery はその点強いよな〜と思っていたんですが、jQuery 使わなくてもいけるぞ、と。

const inputElement = $('input[name="user_name"]');

じゃなくて

const inputElement = document.querySelector('input[name="user_name"]');

のように書けるわけですね。

Internet Explorer 8 にも対応してるそうですから、私が知らないだけで、昔からあったのでしょうね。

で、思ったのがよくある jQuery のファイルを素の JavaScript で書いたら？という話。*1

やってみた

APIサーバーを用意して、JSFiddle で書いてみました。

jQuery を使ったもの: https://jsfiddle.net/nekonenene/pbszvtk3/
素のJavaScriptで書いたもの: https://jsfiddle.net/nekonenene/cpq965j4/

ポイント1: DOMContentLoaded

jQuery

$(function () {
});

JavaScript

document.addEventListener('DOMContentLoaded', () => {
});

load に対するイベントリスナーを昔は書いてたけど DOMContentLoaded でいいらしい。

参考: DOMContentLoadedイベントとloadイベントの違い[タイミング]

DOMツリーが読み込めた段階で発火して普通は影響ないもんな、なるほどね。

そもそも最近の主流通り、JavaScript ファイルを HTML の head タグ内で読み込まず、
body タグ内の最後で読み込んでいるならこのイベントリスナー必要ないんだけど、
まあ、 jQuery 使ってるような昔ながらのサイトなら head 内で JS を読み込んでるでしょう？ということで。

ポイント2: querySelector

jQuery

$('#displayListButton').click(function() {
  $('#debug').html('Show Items ボタンが押されたよ');
});

JavaScript

document.querySelector('#displayListButton').addEventListener('click', () => {
  document.querySelector('#debug').innerHTML = 'Show Items ボタンが押されたよ';
});

最初に話した querySelector 。
いや〜、やっぱ jQuery の方がスッキリは書けますね。

あと、アロー関数（ () => { の部分）を使っているけれど、
これは Internet Explorer だと動かないので、Internet Explorer にも対応させる場合はこうです。

document.querySelector('#displayListButton').addEventListener('click', function() {
  document.querySelector('#debug').innerHTML = 'Show Items ボタンが押されたよ';
});

ポイント3: fetch

jQuery

$.ajax({
  method: 'POST',
  url: 'https://example.com/api/third-power',
  data: { number: 22 },
})
.done(function(data) {
  $('#output').html(data.result);
})
.fail(function(error) { console.error(error); });

JavaScript

fetch('https://example.com/api/third-power', {
  method: 'POST',
  body: JSON.stringify({ number: 18 }),
  headers: { 'Content-Type': 'application/json' },
})
.then(res => res.json())
.then(jsonData => {
  document.querySelector('#output').innerHTML = jsonData.result;
})
.catch(error => { console.error(error); });