fetch
中級読み方：フェッチ｜英語：Fetch
サーバーからデータを取得するための関数で、APIとの通信に使うよ。いつ使う？ 天気情報を取得したい、ユーザーデータをサーバーに送りたいなど、外部サービスとデータをやり取りするときに使うよ。間違いやすいポイント: fetchはPromiseを返すからawaitが必要。また、レスポンスをJSONにするにはawait res.json()が必要だよ。HTTPエラー（404等）でもcatchに入らないからres.okの確認も忘れずに。
やさしい説明
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: "太郎" })
});いつ使う？
APIからデータを取得するとき、フォームのデータをサーバーに送信するとき、外部サービス（天気API等）と連携するときに使います。
間違いやすいポイント
❌ res.json()のawaitを忘れる
// ❌ awaitがないとPromiseが返る
const data = res.json(); // Promise{...}
// ✅ awaitで中身を取り出す
const data = await res.json(); // {name:"太郎"}よくある疑問
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許可が必要です。開発中はプロキシ設定で回避できます。
関連用語
📖 関連レッスン
レッスンを見る →