fetch
Fetch API
概要（サマリー）
fetch とは、JavaScriptでHTTPリクエストを送り、サーバーやAPIからデータを取得するための組み込み関数のことである。ブラウザに標準搭載されており、外部ライブラリなしで使える。「フェッチ（fetch）」は英語で「取ってくる」という意味で、まさにサーバーからデータを取ってくる役割を担う。Promise（非同期処理）ベースで動作するため、データが届くまで処理を止めずに待機できる。
詳細解説
基本的な使い方（GETリクエスト）
fetch の最もシンプルな使い方は以下のとおりだ。
fetch('https://api.example.com/users')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
このコードは「指定したURLにGETリクエストを送り、返ってきたJSONデータを取得して表示する」という処理を行っている。.catch では、ネットワーク障害など通信自体のエラーに対処する。
async/await を使うと、より読みやすく書ける。
async function getUsers() {
try {
const response = await fetch('https://api.example.com/users');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
POSTリクエストの送り方
データをサーバーに送信する（作成・更新など）場合は、オプションでメソッドとボディを指定する。
fetch('https://api.example.com/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: '田中', email: 'tanaka@example.com' })
});
ヘッダーの設定（認証など）
多くのAPIは、アクセス時に認証情報をHTTPヘッダーに付与することを求める。よく使われる方式の一つが「Bearerトークン」を使った認証である。
const token = 'your-api-token-here';
const response = await fetch('https://api.example.com/profile', {
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
}
});
const data = await response.json();
Authorization ヘッダーにトークンを付与することで、「このリクエストを送ってよい権限を持つユーザーである」とサーバーに伝える。APIキーを使う場合も同様に、ヘッダーで渡すことが多い。トークンやAPIキーは、ソースコードに直書きせず、環境変数などから渡す。
レスポンスのステータス確認
fetch はHTTPエラー（404や500など）でも .catch に入らない点に注意が必要だ。response.ok プロパティでステータスを確認する書き方が推奨される。
async function fetchData(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error('リクエストが失敗しました: ' + response.status);
}
return response.json();
}
try {
const data = await fetchData('https://api.example.com/data');
console.log(data);
} catch (error) {
console.error(error.message);
}
response.ok は、ステータスコードが200〜299のときに true になる。この書き方をパターンとして覚えておくと、どんなAPIを呼び出すときにも応用できる。
CORSとの関係
fetch で別オリジンのAPIを呼び出すと、CORSエラーが発生することがある。これはfetch自体の問題ではなく、ブラウザのセキュリティ制限とサーバー側のCORS設定の問題である。
AIコーディングとの関係
AIは fetch でAPIを呼ぶコードを生成するのが得意である。「このエンドポイントにPOSTし、JSONを表示して」と頼むと、通信の骨格はすぐ出てくる。
そのまま使う前に、次を確認する。
response.okを見ているか。404や500は.catchに入らないresponse.json()を待っているか。レスポンス本体はそのままでは使えない- URL、トークン、APIキーが例のまま残っていないか
- 別オリジンなら、失敗がCORSの設定不足ではないか
「エラーハンドリングも含めて」「response.ok で成否を確認して」と添えると、実用に近いコードになりやすい。
よくある勘違い
fetchはエラーが出たら自動で.catchに入る？
そうではない。fetchはネットワーク障害など通信自体が失敗した場合のみ .catch に入る。サーバーが404や500を返した場合は「通信は成功している」とみなされるため、.catch には入らない。response.ok や response.status を使って明示的に確認する必要がある。
fetchはNode.jsでも使える？
使える。Node.js 18で実験的機能として入り、21で安定した。2026年時点の現行版では、追加ライブラリなしでグローバルの fetch を使える。それより古い版では標準になく、node-fetch を足す必要があった。
axios は今も使われる。4xxや5xxで例外になるため、fetchよりエラー処理を短く書きやすい。ブラウザとサーバーで同じ書き方に揃えたいときは fetch、既存コードの共通設定に合わせるときは axios、という選び方になる。
データを受け取ったらすぐ使える？
受け取ったレスポンスはそのままでは使えない。response.json() や response.text() などのメソッドを呼び出してデータを変換する必要がある。これらも非同期処理（Promise）なので、await または .then() で結果を受け取る必要がある。
まとめ
- fetchは、JavaScriptでHTTPリクエストを送り、サーバーやAPIからデータを取る組み込み関数である。
- HTTPの404や500は通信失敗ではないので、
response.okを自分で見る。 - 本文は
response.json()などで変換してから使う。 - 生成コードのURLと認証情報は、例の文字列のままにしない。
情報ソース
より詳しくAIに聞いてみよう
- fetch APIとは何か、初心者でもわかるように説明してください。
- fetchのPromiseとasync/awaitの書き方の違いを整理してください。
- fetchで404エラーや500エラーを正しくハンドリングする方法を教えてください。
- fetchでBearer認証を使ったAPIリクエストを送る方法を教えてください。
- fetchとaxiosの違いと、どちらを選ぶべき場面を教えてください。