ハトネコエ Web がくしゅうちょう

プログラミングやサーバー関連、チームマネジメントなど得た技術のまとめ

jQuery の ajax の書き方を Pure JS の fetch で書き直す

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

今までは、jQuery を使わない JavaScript だと
getElementByIdgetElementsByClassName 使ってじゃないと 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 で書いてみました。

ポイント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); });

Internet Explorer 以外では動く fetch メソッドは超便利。
モダンな JavaScript なら、fetch と、Promise によるメソッドチェーンで普通に jQuery っぽく楽に書けるようになってていいですね。

Internet Explorer でも動かしたい場合は、XMLHttpRequests のラッパーである
axios というライブラリを使えばいいと思います。
Vue.js さわってる人たちの中ではおなじみのライブラリですね。

というわけで

jQuery オワコン言われながらも、
Bootstrap だとデフォルトで jQuery 読み込んでるし、つい便利メソッドあるから使っちゃうな〜、
って状態だったんですが、特によく使う便利メソッドの代替が存在していたのでまとめました。

Bootstrap 5 では jQuery 依存から脱却しますし、
今のうちにできれば jQuery 依存のコードを書かないようにしておきたい思いです。

*1:素のJavaScript: jQueryやKnockoutJSなどのラッパーライブラリを使わないで書くJavaScript