【JavaScript入門】fetch APIの基本｜XHRとの違い・書き方・レスポンス処理を初心者向けに解説

fetch API は、JavaScript で HTTP 通信を行うための現代的な標準APIで、XMLHttpRequest よりもシンプルで扱いやすいのが特徴です。
この記事では、fetch の基本構文から GET・POST の書き方、レスポンス処理、async / await との組み合わせまで、実務で役立つポイントを分かりやすく解説します。

fetch API とは？

fetch API は、JavaScript で HTTP 通信を行うための
現代的でシンプルな標準API です。

XMLHttpRequest（XHR）の後継として登場し、
Promise ベースで書けるためコードが読みやすくなります。

XHR と fetch の違い

項目	fetch	XHR
書きやすさ	シンプル・短い	冗長になりがち
非同期処理	Promise / async / await	コールバック
レスポンス処理	text() / json()	responseText
エラー処理	HTTPエラーは例外にならない	onerror が必要

fetch は「現代の標準」、XHR は「レガシー」という位置づけです。

fetch の基本構文（GET）

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log(data));

fetch は Promise を返すため、
then() を使ってレスポンスを処理します。

レスポンスの種類（text / json）

text として取得

fetch("/hello.txt")
  .then(res => res.text())
  .then(text => console.log(text));

json として取得

fetch("/data.json")
  .then(res => res.json())
  .then(json => console.log(json));

API 連携では json() を使うことがほとんどです。

POST リクエストの書き方

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "Hello",
    body: "fetch POST example",
    userId: 1
  })
})
  .then(res => res.json())
  .then(data => console.log(data));

XHR と違い、fetch はオプションをまとめて指定できるため
コードがスッキリします。

async / await を使うとさらに読みやすい

async function loadData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();
  console.log(data);
}

loadData();

async / await を使うと、
同期処理のように読みやすいコード になります。

fetch の注意点（重要）

• HTTPエラー（404/500）は例外にならない
• ネットワークエラーのみ catch に入る
• レスポンスのチェックは自分で行う必要がある

例：ステータスチェック

const res = await fetch(url);

if (!res.ok) {
  throw new Error("HTTPエラー: " + res.status);
}

まとめ

fetch API は、XHR よりもシンプルで扱いやすい
現代の標準的な通信API です。

• Promise ベースで書きやすい
• GET・POST の実装が簡単
• レスポンスは text() / json() で取得
• async / await と相性抜群

非同期処理を学ぶ上で、fetch は必ず理解しておきたい API です。