Fetch APIは、JavaScriptからHTTPリクエストを発行するためのモダンなWeb APIで、WHATWG Fetch Living Standardとして仕様化されています。Anne van Kesterenらが中心となって2015年3月にChrome 42で最初に実装され、その後Firefox・Safari・Edgeにも実装が広がりました。それまで標準だったXMLHttpRequest（XHR）のコールバック地獄やAPI設計の古さを解決するためにPromiseベースの宣言的な構文として再設計され、現代のフロントエンド開発におけるHTTPクライアントのデファクトスタンダードになっています。
この記事の目次
- Promiseで簡潔に書ける基本構文
- ストリーミング・キャンセル・拡張機能
- 実務で押さえておきたい設定
- XHR・サードパーティライブラリとの比較
- まとめ
Promiseで簡潔に書ける基本構文
Fetch APIの最小コードは fetch('/api/users').then(r => r.json()).then(data => ...) というPromiseチェーン一行で書けます。XHRが必要としていた new XMLHttpRequest・open・onreadystatechange・send という4段階の手続きと比べ、驚くほど簡潔です。async/awaitと組み合わせればconst r = await fetch(url); const data = await r.json(); のように同期処理のように書けるため、Web APIの呼び出しが格段に読みやすくなりました。
Fetch APIはRequest・Response・Headersという3つの主要オブジェクトを中心に設計されています。Requestは送信するHTTPリクエストを表し、URL・メソッド・ヘッダー・ボディ・credentials・cacheなど全ての設定を持ちます。Responseは受信したHTTPレスポンスを表し、text() json() blob() arrayBuffer() formData()といった本文取得メソッドを持ちます。Headersは大文字小文字を区別しないキー値ストアで、両方の操作で共通して使えます。これらは独立したオブジェクトとして再利用や拡張がしやすい設計です。
ストリーミング・キャンセル・拡張機能
Fetch APIの強力な機能の一つがストリーミング処理です。response.body はReadableStream型で、本文を細かいチャンクに分けて順次受け取れます。大きなファイルをダウンロード中にプログレスバーを更新したり、サーバー送信イベント風のテキストストリームをリアルタイムにパースしたりといった処理が、XHRの onprogress よりずっと自然に書けます。OpenAI APIのStreamingレスポンスのようなチャンク配信を扱うのに現代のフロントエンドで広く使われており、ChatGPTのWeb UIなどもこの仕組みで実装されています。
キャンセル機能としてAbortController（2017年標準化）が用意されており、fetch(url, {signal: controller.signal}) のように渡しておけば controller.abort() で進行中のリクエストを中断できます。検索ボックスでタイピング中の古いリクエストを破棄したり、ページ遷移時に未完了リクエストをまとめてキャンセルしたりする実装が容易になりました。Service Workerとの統合も自然で、fetch イベントを横取りしてキャッシュから応答を返すPWAの基本パターンもFetch APIのRequest・Responseを直接扱う形で書けます。
実務で押さえておきたい設定
Fetch APIには実務で気を付けたい挙動がいくつかあります。まず認証Cookieはデフォルトで送信されず、同一オリジンに対しては自動で送られるものの、クロスオリジン呼び出しでは credentials: 'include' の明示が必要です。これはセキュリティ上の安全側設定ですが、初学者がハマりやすいポイントです。また mode: 'cors' 'no-cors' 'same-origin' でクロスオリジン挙動を制御でき、適切な設定とサーバー側のCORSヘッダー協調が両立して初めてリクエストが成功します。
意外な落とし穴として、HTTPエラー（404・500など）でもPromiseは解決状態になります。ネットワークエラー（DNS解決失敗・接続断・CORS違反）の場合のみ reject され、サーバーが応答した4xx・5xxは response.ok が false になるだけで then が呼ばれます。そのためAxiosなど一部ライブラリのように「エラーはcatchで」という感覚で書くと事故が起きやすく、if (!response.ok) throw new Error(...) という明示的なチェックを挟む実装が定番です。POSTのJSONボディを送る際は Content-Type: application/json のヘッダー設定も忘れがちな点です。
XHR・サードパーティライブラリとの比較
XHRと比較すると、Fetch APIはProgress eventや同期リクエストといった一部の機能をあえて省いた割り切りがあり、代わりにPromise・Stream・Service Worker連携といったモダンな機能を獲得しました。サードパーティライブラリのAxiosと比べると、Axiosは「インターセプタ機構」「自動JSON変換」「HTTPエラー時の自動reject」「Node.js環境での同じAPI」など便利機能が充実しており、まだ業務プロジェクトで選ばれる場面が多いのも事実です。ただAxiosもバージョンによってはfetchを内部で使うようになっており、両者の距離は縮まっています。
Node.js 18（2022年4月）からはサーバーサイドでも fetch がグローバルに利用可能になり、「ブラウザとNode.jsで同じAPIが使える」という長年の願いがついに実現しました。Deno・Bun・Cloudflare Workersといったモダンランタイムも標準でFetch APIを採用しており、WebプラットフォームのHTTPクライアントとして真に標準的な地位を確立しました。新規プロジェクトでは特別な理由がなければまずFetch APIを使い、複雑な要件が出てきたら必要に応じてライブラリを足すという順序が、2020年代後半における事実上のベストプラクティスです。
まとめ
Fetch APIは、XMLHttpRequestの後継として2015年に登場した現代Web標準のHTTPクライアントです。Promise・Stream・AbortController・Service Worker連携といった近代的な機能を備え、Node.jsやBun・Cloudflare Workersでも標準APIとして使えるようになりました。Webアプリのデータ取得の第一選択肢として、今後も中心的な位置を占め続けるでしょう。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント