ブラウザ標準の HTTP リクエスト API。XMLHttpRequest 後継、Promise ベース、2026年は ReadableStream 完全対応+Streaming SSR で活用拡大。
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.json() .text() .blob() .arrayBuffer() .formData() .body (ReadableStream)signal プロパティでリクエスト中断、タイムアウト実装に必須| ライブラリ | サイズ | 環境 | 特徴 |
|---|---|---|---|
| fetch (標準) | 0KB (内蔵) | Browser/Node 18+/Bun/Deno | 標準 API、追加依存なし |
| axios | 56KB | Universal | リクエスト/レスポンス変換、interceptor |
| ky | 8KB | Browser/Node 18+ | fetch ラッパー、retry/timeout 内蔵 |
| got | (Node のみ) | Node | Node 特化、HTTP/2、再試行 |
| undici | (Node のみ) | Node | Node 公式、HTTP/1.1 高速 |
| superagent | 32KB | Universal | プラグイン豊富、古い |
| node-fetch | 廃止予定 | Node | Node 18+ で標準化されたため移行推奨 |
| TanStack Query | 39KB | Browser | React Hook + Cache 自動管理 |
| SWR | 12KB | Browser | Vercel 製、React Hook |
Web/SaaS 開発の自作PC 構成：
if (!res.ok) throw new Error(\HTTP ${res.status}`)` 必須const controller = new AbortController(); setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal })headers: { "Content-Type": "application/json" }for await (const chunk of res.body) {} で逐次処理cache: "default" で良いが、フォーム送信は cache: "no-store""use server" ディレクティブと組合せて型安全な APIQ1: 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。