JavaScript Fetch APIとXMLHttpRequest(XHR)の違い

Fetch APIとXMLHttpRequest (XHR)の違いのまとめ

	登場時期	返り値	コードの書きやすさ
Fetch API	新しい（ES6以降・モダンブラウザ対応）	Promise を返す（then/awaitで扱える）	シンプル・読みやすい
XMLHttpRequest (XHR)	古い（初期のAjax時代から存在）	コールバックで扱う（onreadystatechangeなど）	冗長でネストが深くなりやすい（コールバック地獄）

どちらもブラウザでサーバーと非同期通信を行うための技術です。

Fetch APIはPromiseベースのモダンでシンプルな設計であり、XMLHttpRequestはイベント駆動のレガシーな設計です。

Fetch APIとは

WebページのJavaScriptから、外部のサーバーにリクエストを送って、データ（JSONやHTMLなど）を取得するための仕組みです。

従来の「XMLHttpRequest (XHR)」を置き換えるために設計されました。

Promiseベースで、結果をthenやawaitで扱えます。

.json()や.text()でJSONやテキストを簡単に取得・変換できます。

流れ

ブラウザ（JavaScript）
↓
Fetch API
↓
サーバー（例：example.com）にリクエスト送信
↓
サーバーがデータを返す（JSONなど）
↓
JavaScriptで受け取って使う

コードイメージ

fetch("https://example.com/data.json")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("エラー:", error));

async/awaitを使うと読みやすくなります。

async function getData() {
  try {
    const response = await fetch("https://example.com/data.json");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("通信エラー:", error);
  }
}

XMLHttpRequest(XHR)とは

Webページからサーバーにデータを送受信するための、古くからある通信機能です。

ブラウザからサーバーにリクエストを送り、ページを再読み込みせずにデータを取得できます。

イベントをたくさん書く必要があり、コードが長くて複雑になりがちです。

流れ

ブラウザ（JavaScript）
↓
XMLHttpRequest
↓
サーバー（例：example.com）にリクエスト送信
↓
サーバーがデータを返す（JSONなど）
↓
JavaScriptで受け取って使う

コードイメージ

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data.json"); // リクエスト設定

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) { // 通信完了
    console.log(JSON.parse(xhr.responseText)); // データ取得
  }
};

xhr.send(); // リクエスト送信