▶▶▶ 【最大補助3/4】
IT導入補助金特別枠(C類型)を使って越境ECサイトを構築しませんか?

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

XMLHttpRequest(Ajax)とFetch APIの使い方を比較してみる

テクニック

XMLHttpRequest(Ajax)とFetch APIの使い方を比較してみる

最近、JavaScriptを深く理解できるように、jQueryを使わずにコードを書くことにハマっています。

jQueryの便利な機能として大きなものに、Ajaxがあります。
jQeuryでAjaxを手軽に使えるようになったことで、画期的なJavaScriptの機能を抵抗感なく使えるようになりました。
このAjaxの機能は、JavaScriptのXMLHttpRequest APIを利用したものです。XMLHttpRequest APIは利用方法が直感的ではなく、単体で利用するためには、冗長で見づらいコードを書く必要が出てきます。

JavaScript標準でjQueryのAjax APIのようにわかりやすいコードで直感的に非同期通信を利用できるように策定されたのが Fetch API です。Fetch API にはjQueryのAjax APIの影響が随所に見られ、利用法はとても似ていて、尚且、非同期通信を便利に利用するための機能が強化されています。

便利なFetch APIの登場で、Ajaxの利用の必要はなくなりそうですが、IE11で対応していないため、IE11が公式にフェードアウトする2025年までは、PC向けにAjaxを利用する機会が残ります。Polyfillを使って間を継ぐ方法もありますが、IEのためだけにPolifyll入れるのもちょっと抵抗があるかもしれません。

Fetch APIは触ってみたことがあったのですが、XMLHttpRequest APIは直接触ったことがなかったので、今回はその基本的な使い方について比べてみました。

XMLHttpRequest API

流れ

  1. APIの呼び出し
  2. 通信が成功したときと失敗したときのコールバック関数の設定
  3. 通信の設定
  4. 通信の開始

実際のコード

XMLHttpRequest APIを使った非同期通信の場合、記述が分散してコードが見づらくなりがちです。オプションの設定もメソッドが別れていたりして煩雑です。

Fetch API

流れ

  1. APIの実行
  2. 通信が成功したときと失敗したときのコールバック関数の設定

実際のコード

Fetch APIを使った非同期通信の場合、記述がまとまっており、コードが見やすいです。オプションの設定も整理されていてわかりやすいです。

感想

XMLHttpRequest APIを初めて直接触ってみた感触としては、思ったほど煩雑でないにしても、記述が分散したり、実際の流れと記述の順序が一致しない場合があるので全体として見づらいという感じでした。

一方のFetch APIはオブジェクトでひとくくりになったオプション指定やPromiseオブジェクトによる一連した通信後の記述により、シンプルで見やすいコードで非同期通信を記述できます。

IE11を配慮しないで良い範囲ではできるだけFetch APIを使いたいと思いました。

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。