Fetch API（フェッチエーピーアイ）

概要

Fetch API は2015年 W3C で標準化されたブラウザ標準の HTTP リクエスト API。1999年導入の XMLHttpRequest (XHR) の後継として、Promise ベースの宣言的 API と柔軟な Request/Response オブジェクトを提供する。Chrome 42 (2015-04)、Firefox 39 (2015-07) で初実装、現在は IE 含む全モダンブラウザ対応。

Node.js は2022年4月 v18 で fetch をネイティブ標準化 (undici 実装ベース)、Bun 1.0 (2023) と Deno は完全標準対応。React Server Components (Next.js 13+) や Cloudflare Workers / Vercel Edge Functions では Fetch が標準 HTTP API、Web 開発の universal HTTP クライアント化が進行。

2025-2026年最大トピックは ① Streaming SSR / RSC との統合 (Next.js 16 App Router で fetch ベースのデータフェッチが完全に standardized)、② Server Actions で fetch + revalidatePath/revalidateTag によるキャッシュ無効化、③ AbortController による高度なキャンセル制御、④ Cache API 連携 (caches.match() で Service Worker と一体化)、⑤ HTTP/3 対応 (Chrome 124+/Firefox 130+)。

主な特徴・仕組み

• シンタックス: fetch(url, options).then(res => res.json()) または async/await
• メソッド対応: GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS
• デフォルト挙動: GET、credentials: same-origin、redirect: follow、cache: default
• レスポンス処理: .json() .text() .blob() .arrayBuffer() .formData() .body (ReadableStream)
• エラー処理: 4xx/5xx でも resolve、try-catch ではネットワークエラーのみ捕捉
• AbortController: signal プロパティでリクエスト中断、タイムアウト実装に必須
• Headers クラス: イテラブル、Headers.append/get/has/set/delete API
• CORS: mode: cors|same-origin|no-cors、credentials: omit|same-origin|include
• Cache 制御: cache: default|no-store|reload|no-cache|force-cache|only-if-cached
• 対応プラットフォーム: ブラウザ全主要、Node.js 18+、Bun、Deno、Cloudflare Workers、Vercel Edge

fetch vs 主要HTTP クライアント比較表（2026年4月）

自作PC + Fetch API 開発環境

Web/SaaS 開発の自作PC 構成：

• CPU: Ryzen 7 7700X (¥48,800) — Next.js + IDE + Browser + Postman 並列
• メモリ: DDR5-5600 32GB (¥24,800) — TS LSP + ESLint + Vitest 並列
• ストレージ: NVMe Gen4 SSD 1TB (¥18,800) — node_modules×多案件で 200GB+消費
• エディタ: VS Code (無料) または Cursor ($20/月) で AI 補完
• デバッグツール: Chrome DevTools Network タブ、Postman ($14/月) または Bruno (OSS、無料)
• API モック: MSW (Mock Service Worker、OSS) で Vitest テスト時に fetch モック
• AI コード支援: Claude Code ($20-200/月) で fetch ロジック自動生成

Fetch API のベストプラクティス

• エラー処理を必ず実装: if (!res.ok) throw new Error(\HTTP ${res.status}`)` 必須
• AbortController でタイムアウト: const controller = new AbortController(); setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal })
• Content-Type 明示: headers: { "Content-Type": "application/json" }
• Stream 利用: 大ファイルは for await (const chunk of res.body) {} で逐次処理
• キャッシュ戦略: GET なら cache: "default" で良いが、フォーム送信は cache: "no-store"
• 再試行ロジック: ky や独自実装で 3回まで指数バックオフ retry
• Server Actions: Next.js 16 では "use server" ディレクティブと組合せて型安全な API

Fetch API と類似 API の違い

• fetch vs XMLHttpRequest: fetch は Promise ベース・モダン、XHR はコールバック・レガシー
• fetch vs axios: axios は機能豊富 (interceptor/transform)、fetch は軽量・標準
• fetch vs WebSocket: fetch は単発 request/response、WebSocket は双方向常時接続
• fetch vs gRPC: gRPC はバイナリ Protocol Buffers、fetch は HTTP/JSON

よくある質問（FAQ）

Q1: axios から fetch に移行すべき？ A: ケースバイケース。bundle size 重視の SPA は移行価値あり (-50KB)、interceptor/transform 多用なら axios 継続。Next.js Server Components 環境は fetch 一択 (cache 制御が密結合)。

Q2: タイムアウト実装は？ A: AbortController が標準。AbortSignal.timeout(5000) (Browser/Node 18+) でワンライナー化可、古い環境は setTimeout で controller.abort() 呼出。タイムアウト 5-30秒、リトライ 1-3回が典型。

Q3: 自作PC でフロント開発の最適環境は？ A: Ryzen 7 + 32GB DDR5 + NVMe Gen4 SSD + Cursor + Bruno で十分。Mac mini M4 Pro (¥248,000) も同等性能、ただし Windows/Linux 専用ツール (Visual Studio 等) が必要なら自作 Windows、Apple エコシステム+iOS 開発なら Mac。

まとめ

• Fetch API = ブラウザ標準 HTTP API、2015年 W3C 標準化、XHR 後継
• Promise ベース+柔軟な Request/Response、Node 18+/Bun/Deno で完全対応
• 2025-2026年は Streaming SSR + Server Actions + Cache API 連携で活用拡大
• 自作PC は Ryzen 7+32GB+Cursor+Bruno で月¥0-300 で開発環境完結