fetch
中級読み方：フェッチ｜英語：Fetch
サーバーからデータを取得するための関数で、APIとの通信に使うよ。
やさしい説明
fetchは、サーバーからデータを取得したり送信したりするための関数です。Promiseを返すので、async/awaitで結果を受け取ります。
天気予報アプリがサーバーから天気データを取得する、SNSが新しい投稿を読み込む——こうした「サーバーとの通信」はすべてfetchで行います。
GETでデータ取得、POSTでデータ送信ができます。レスポンスは .json() でJavaScriptオブジェクトに変換します。
具体例・使い方
// データを取得（GET）
async function getUsers() {
const res = await fetch("https://api.example.com/users");
const data = await res.json();
return data;
}
// データを送信（POST）
await fetch("/api/submit", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "太郎" })
});エラーハンドリングの書き方
async function fetchData(url) {
try {
const res = await fetch(url);
// fetchはHTTPエラーでもthrowしない！res.okで確認する
if (!res.ok) {
throw new Error(`HTTPエラー: ${res.status}`);
}
const data = await res.json();
return data;
} catch (err) {
console.error("通信エラー:", err.message);
return null;
}
}fetch は 404 や 500 などの HTTPエラーでも catch に入りません。res.ok（ステータス 200〜299 で true）を必ず確認する習慣をつけましょう。
よく使うオプション一覧
method— HTTPメソッド（"GET"・"POST"・"PUT"・"DELETE"）headers— リクエストヘッダー（Content-Type や Authorization など）body— 送信するデータ（POST/PUT時に使用。JSON.stringify()で文字列化）credentials: "include"— クッキーをリクエストに含める（認証が必要なAPIで使用）
いつ使う？
- 外部APIからデータを取得するとき（天気・地図・SNSなど）
- フォームのデータをサーバーに送信するとき
- ページをリロードせずにデータを更新するとき（SPA・動的コンテンツ）
- ログイン・ログアウトなどの認証処理をするとき
間違いやすいポイント
❌ res.json() の await を忘れる
res.json() も非同期処理です。await を書かないと Promise オブジェクトがそのまま返ってきます。
// ❌ awaitがないとPromiseが返る
const data = res.json(); // Promise{<pending>}
// ✅ awaitで中身を取り出す
const data = await res.json(); // { name: "太郎", ... }❌ HTTPエラー（404・500）でもエラーがthrowされない
fetch はネットワークエラー時のみ例外を投げます。404 や 500 のレスポンスは正常に resolve されるため、res.ok や res.status で必ずチェックしましょう。
よくある疑問
Q: fetchの基本的な書き方は？
A: const res = await fetch('/api/data'); const data = await res.json(); の2ステップです。fetchでレスポンス取得→.json()でパースします。
Q: POSTリクエストを送るには？
A: fetch(url, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) }) と書きます。
Q: CORSエラーが出たら？
A: 別ドメインへのリクエストがブロックされています。サーバー側でCORS許可が必要です。開発中はプロキシ設定で回避できます。
関連用語
- async/await — fetchの結果を待つために使う非同期構文
- Promise — fetchが返すオブジェクト。非同期処理の基盤
- API — fetchで通信する相手。データのやり取りの窓口
- try-catch — fetch失敗時のエラーハンドリングに使う
📖 関連レッスン
レッスンを見る →