fetch APIの基本

生田 陸人
監修
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

このレッスンで分かること

  • fetch(url) はブラウザ標準の HTTP リクエスト関数、Promise を返す
  • await response.json() でレスポンスボディを JSON にパース
  • デフォルトは GET、fetch(url, { method, headers, body }) でカスタマイズ
  • ネットワークエラーは reject、4xx / 5xx は resolve (response.ok で判別)

fetch APIの基本 とは

fetch関数でGETリクエストを送り、レスポンスを処理する方法を学ぼう。本レッスンでは、fetch APIの基本 の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

fetch APIの基本

fetch()はブラウザ標準のHTTPリクエスト関数です。Promiseを返します。

基本的なGETリクエスト

JavaScript

const response = await fetch("https://api.example.com/users"); const data = await response.json();

URLの構築

APIリクエストでは、ベースURL + パス + クエリパラメータを組み合わせてURLを構築します。

JavaScript

// クエリパラメータの付与 const url = "https://api.example.com/users?page=1&limit=10";

encodeURIComponent

クエリパラメータに日本語やスペースが含まれる場合はエンコードが必要です。

この問題では、URLの構築ロジックを実装しましょう。ベースURL、パス、パラメータから正しいURLを組み立てます。

実務で遭遇するパターン

中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。

  • SPA のデータ取得 ─ const data = await fetch("/api/users").then(r => r.json())
  • フォーム送信 ─ fetch("/api/contact", { method: "POST", body: JSON.stringify(form) })
  • Authorization ヘッダー付き ─ headers: { "Authorization": "Bearer " + token }
  • ファイルアップロード ─ body: formData で multipart/form-data

コードレビューで指摘されがちなポイント

PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。

  • 4xx / 5xx を成功と誤判定 ─ response.ok チェックを入れる
  • Content-Type 漏れ ─ JSON POST 時に必ず "Content-Type": "application/json"
  • encodeURIComponent 漏れ ─ クエリパラメータに日本語 / 記号が入ると壊れる
  • タイムアウト未設定 ─ AbortController でタイムアウトを実装するべき

パフォーマンス考慮事項

  • HTTP/2 Keep-Alive ─ ブラウザが自動でコネクション再利用
  • 並列リクエスト ─ Promise.all([fetch(a), fetch(b)]) で同時発射
  • キャッシュ ─ fetch(url, { cache: "force-cache" }) で明示的キャッシュ
  • Stream API ─ 巨大レスポンスは response.body.getReader() でストリーミング処理
この章のポイント

ここまでの要点 fetch(url, options) で HTTP リクエスト、response.ok で 4xx/5xx 判別、json() でボディ取得、AbortController でタイムアウト。

よくある質問

Q. fetch のレスポンスを JSON にするには？

A. await response.json() を呼びます。読み込み済みの本文は 1 回しか consume できないため、json() と text() を両方呼ぶとエラーになります。Status コードは response.ok で判定し、!response.ok なら throw new Error(...) を投げる定型が安全です。

Q. fetch はエラー時に例外を投げますか？

A. ネットワークエラーだけ throw され、HTTP 404/500 は throw しません。response.ok を必ず確認するクセを付けてください。axios やラッパーライブラリは 4xx/5xx でも throw する挙動が主流なので、fetch だけ仕様が違う点に注意です。

Q. Cookie を一緒に送るには？

A. fetch(url, { credentials: 'include' }) を指定します。デフォルトの 'same-origin' だと CORS をまたぐと送られません。サーバー側も Access-Control-Allow-Credentials: true を返す必要があります。両方そろわないと送れない点が落とし穴です。

次のレッスン

次は POST/PUT/DELETEリクエスト で、fetch関数でGETリクエストを送り、レスポンスを処理する方法を学ぼう を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. fetch APIの基本 の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. fetch APIの基本 とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

入出力例

test-cases.txt

buildApiUrl("https://api.example.com", "/users", {"limit":10,"page":1}) → "https://api.example.com/users?limit=10&page=1" buildApiUrl("https://api.example.com/", "users") → "https://api.example.com/users" buildApiUrl("https://api.example.com", "/search", {"q":"hello world"}) → "https://api.example.com/search?q=hello%20world"
main.js
main.js
学習モード

メモ

fetch APIの基本

⌘S で保存