← カテゴリ一覧に戻る

APIへのリクエスト（fetch）

fetch then json AbortController

fetch APIを使って外部サーバーとHTTP通信を行います。XMLHttpRequest（XHR）の後継です。

デモ：実際にAPIを叩く

エンドポイント: https://jsonplaceholder.typicode.com/posts/1

コード例

js
// GETリクエスト（基本）
const res = await fetch('https://api.example.com/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`); // エラーハンドリング必須
const users = await res.json();  // JSON解析

// POSTリクエスト（データ送信）
const res = await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token,
  },
  body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' }),
});

// レスポンスの種類
await res.json();       // JSON（最頻出）
await res.text();       // テキスト
await res.blob();       // バイナリ（画像など）
await res.arrayBuffer(); // ArrayBuffer
await res.formData();   // FormData

// then/catch チェーン（await の代わり）
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

比較：fetch vs XMLHttpRequest（XHR）

観点fetch（推奨）XMLHttpRequest
記法Promise / async/await（シンプル）コールバック（複雑）
進捗監視△ ReadableStream で可能✅ onprogress で簡単
キャンセル✅ AbortController✅ abort()
エラー自動検知❌ res.ok を自分で確認✅ status で確認

NEWAbortController でキャンセル & タイムアウト

AbortController でfetchをキャンセルできます。AbortSignal.timeout() はさらに簡潔です（Chrome 103+）。

js
// キャンセル可能なfetch
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒タイムアウト

try {
  const res = await fetch('/api/data', { signal: controller.signal });
  clearTimeout(timeoutId);
  const data = await res.json();
} catch (e) {
  if (e.name === 'AbortError') console.log('キャンセルされました');
}

// ✅ 新しい書き方（AbortSignal.timeout）
const res = await fetch('/api/data', {
  signal: AbortSignal.timeout(5000), // 5秒でタイムアウト
});

// 複数シグナルの結合（Chrome 116+）
const res2 = await fetch('/api/data', {
  signal: AbortSignal.any([controller.signal, AbortSignal.timeout(5000)]),
});

jQueryで書くとこうなる

jQueryでは $.ajax() や $.get() $.post() でHTTPリクエストを簡潔に書けました。バニラJSでは fetch を使うことで、ライブラリなしで同等の処理が可能です。
js
// GETリクエスト
$.get('https://api.example.com/data', function (data) {
  console.log(data);
});

// POSTリクエスト
$.post('https://api.example.com/data', { name: 'John' }, function (data) {
  console.log(data);
});

// $.ajax() による詳細設定
$.ajax({
  url: 'https://api.example.com/data',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'John' }),
  success: function (data) {
    console.log('成功:', data);
  },
  error: function (xhr, status, error) {
    console.error('エラー:', error);
  },
});

// $.getJSON() でJSONを取得
$.getJSON('https://api.example.com/data', function (data) {
  console.log(data);
});
💡 上記のデモは、バニラJS（ブラウザ標準API）です。

🤖 AIプロンプトテンプレート

以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。

- fetch()を使ったGET/POST/PUT/DELETEリクエストのサンプルを示す
- リクエストヘッダーの設定とJSONレスポンスの処理例を含める
- AbortControllerを使ったリクエストキャンセルのサンプルを含める
- fetch()のエラーハンドリング（ネットワークエラー・HTTPエラー）の例を示す
- リトライ処理付きのfetchラッパー関数のサンプルを含める
- コメントは日本語で記述する

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo