fetch APIの基本｜JavaScriptでAPI通信を行う最小構成
fetch APIを使うと、JavaScriptだけでAPIにGETやPOSTのリクエストを送り、返ってきたJSONをそのまま処理できます。フォーム送信より柔軟にデータを扱いたい場面や、画面を再読み込みせずに情報を更新したい場面で基本になる書き方です。
まず押さえたいのは、最小構成はかなり短いという点です。fetch()でURLを呼び出し、response.json()でJSONを取り出す。入門段階では、まずこの流れを確実に書ければ十分です。
fetch(url)でAPIにリクエストを送るawait response.json()でレスポンスのJSONを取り出すresponse.okで成功判定をするPOSTではmethod、headers、bodyを追加する- フロントエンドではAPIキーを直書きしない
fetch APIで何ができるか
fetch APIは、ブラウザのJavaScriptからHTTPリクエストを送るための標準機能です。MDNでも、XMLHttpRequestの後継となる柔軟な仕組みとして案内されています。
この記事では、ブラウザで動くJavaScriptを前提に、次の流れを最小構成で確認します。
- APIからデータを取得する
GET - APIへデータを送る
POST - 成功判定とエラー処理の基本
- 実務でよく詰まるポイント
ここがポイント: fetch APIは「URLを呼ぶ」だけでは終わりません。返ってきた値をどう判定し、どうJSONとして読むかまで書いて初めて実用になります。
最小構成のGETリクエスト
最初に、もっとも小さい形を見ます。テスト用APIとして JSONPlaceholder を使います。
async function loadTodo() {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await response.json();
console.log(data);
}
loadTodo();
このコードでやっていることは3つだけです。
fetch()でURLへアクセスするresponse.json()でレスポンス本文をJavaScriptのオブジェクトに変換するconsole.log()で中身を確認する
入力例
GET https://jsonplaceholder.typicode.com/todos/1
出力例
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
この形を理解すると、社内APIでも外部APIでも基本は同じです。URLが変わるだけで、取得してJSONを読む流れはほぼ共通です。
実務で使いやすいGETの基本形
最小構成のままだと、404や500が返ってきたときの扱いが弱くなります。実務では、response.ok を見る形にしておくほうが安全です。
async function loadTodo() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}
const data = await response.json();
console.log(data.title);
} catch (error) {
console.error("取得に失敗しました", error);
}
}
loadTodo();
ここで重要なのは、fetch() はHTTPエラーで必ずしも自動例外にならないことです。MDNでも、fetch() はサーバーからヘッダーが返れば、404や500でも Response を解決すると説明されています。
つまり、次の2段階で考える必要があります。
- 通信そのものが失敗したか
- HTTPステータスとして成功だったか
POSTでデータを送る最小構成
次はPOSTです。フォーム入力の内容をAPIへ送る場面をイメージすると分かりやすいです。
async function createPost() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
title: "fetch APIの練習",
body: "POSTの最小構成を確認する",
userId: 1
})
});
if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error("送信に失敗しました", error);
}
}
createPost();
POSTで必要になる要素
method: "POST"でHTTPメソッドを指定するheadersでContent-Type: application/jsonを付けるbodyにJSON.stringify()したデータを入れる
body にオブジェクトをそのまま入れてしまうのは、初心者がよくやるミスです。JSONで送りたいなら文字列化が必要です。
どんな場面で使うか
fetch APIは、画面を一度表示したあとで必要なデータだけを取りに行く処理と相性がいいです。
よくある用途
- 商品一覧や検索結果をあとから読み込む
- ボタン操作でお気に入り登録や削除を行う
- フォーム送信後に画面を切り替えず結果だけ更新する
- 社内ツールで別システムのAPIからJSONを取得する
とくに実務では、HTMLを最初に出してから、JavaScriptで必要な情報だけ追加取得する構成がよくあります。その入口になるのがfetch APIです。
よくある失敗と対処
fetch APIは短く書けますが、詰まりやすい点もはっきりしています。先に知っておくと無駄に悩みにくくなります。
1. response.json() を書き忘れる
fetch() の戻り値は Response オブジェクトです。JSON本体ではありません。
NG例:
const data = await fetch("https://jsonplaceholder.typicode.com/todos/1");
console.log(data.title);
改善例:
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await response.json();
console.log(data.title);
2. 404でも catch に入ると思い込む
通信断やCORS失敗などでは catch に入りますが、404や500は Response として返ることがあります。そこで response.ok を確認します。
3. POSTで Content-Type を付けない
JSONを送るのにヘッダーがないと、サーバー側で正しく解釈されないことがあります。
4. フロントエンドにAPIキーを直書きする
ブラウザで実行されるJavaScriptは、利用者から見えます。外部APIの秘密鍵や認証情報はフロントに置かず、サーバー側やバックエンド経由で扱うのが基本です。
5. CORSで止まる
コードが正しくても、API側がブラウザからのアクセスを許可していないと失敗します。これはfetch APIの文法ではなく、サーバー設定の問題です。
キャンセルしたいときはAbortControllerを使う
検索画面の連打や、ページ離脱時の中断ではキャンセル処理が役立ちます。MDNでは AbortController を signal と一緒に使う方法が案内されています。
const controller = new AbortController();
async function loadData() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1", {
signal: controller.signal
});
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
loadData();
// 必要なタイミングで中断
controller.abort();
大量リクエストを避けたいときや、古い検索結果で画面を書き換えたくないときに使いやすい書き方です。
代替手段との使い分け
fetch APIだけが選択肢ではありません。状況によっては別の道具のほうが速いこともあります。
fetch APIが向いている場面
- 依存ライブラリを増やしたくない
- まず標準機能で小さく始めたい
- ブラウザ側の基本処理を理解したい
他の手段が向いている場面
curl: ターミナルですぐ疎通確認したいとき- Postman: ヘッダーや認証をGUIで試したいとき
- Axiosなど: チームで共通設定やインターセプターを厚く使いたいとき
入門としては、まずfetch APIでHTTP通信の基本を理解してから、必要に応じて他の道具へ広げる順番が無理がありません。
最初に覚えるべき最小セット
最後に、最初の一歩で必要な要点だけ絞ると次の4つです。
fetch(url)でリクエストを送るawait response.json()でJSONを読むresponse.okで成功判定を入れるPOSTではheadersとJSON.stringify(body)を忘れない
この4点を押さえるだけで、一覧取得、詳細取得、登録送信といった基本操作はかなりこなせます。次に見るべき論点は、認証付きAPI、クエリ文字列の組み立て、CORS、タイムアウトや中断処理です。