fetch

概要（サマリー）

fetch とは、JavaScriptでHTTPリクエストを送り、サーバーやAPIからデータを取得するための組み込み関数のことである。ブラウザに標準搭載されており、外部ライブラリなしで使える。「フェッチ（fetch）」は英語で「取ってくる」という意味で、まさにサーバーからデータを取ってくる役割を担う。Promise（非同期処理）ベースで動作するため、データが届くまで処理を止めずに待機できる。

詳細解説

基本的な使い方（GETリクエスト）

fetch の最もシンプルな使い方は以下のとおりだ。

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

このコードは「指定したURLにGETリクエストを送り、返ってきたJSONデータを取得して表示する」という処理を行っている。.catch でエラーに対処する。

async/await を使うと、より読みやすく書ける。

async function getUsers() {
  try {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

POSTリクエストの送り方

データをサーバーに送信する（作成・更新など）場合は、オプションでメソッドとボディを指定する。

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: '田中', email: 'tanaka@example.com' })
});

ヘッダーの設定（認証など）

多くのAPIは、アクセス時に認証情報をヘッダーに付与することを求める。最も一般的な方式が「Bearerトークン」を使った認証だ。

const token = 'your-api-token-here';

const response = await fetch('https://api.example.com/profile', {
  headers: {
    'Authorization': 'Bearer ' + token,
    'Content-Type': 'application/json'
  }
});
const data = await response.json();

Authorization ヘッダーにトークンを付与することで、「このリクエストを送ってよい権限を持つユーザーである」とサーバーに伝える。APIキーを使う場合も同様に、ヘッダーで渡すことが多い。

レスポンスのステータス確認

fetch はHTTPエラー（404や500など）でも .catch に入らない点に注意が必要だ。response.ok プロパティでステータスを確認する書き方が推奨される。

async function fetchData(url) {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error('リクエストが失敗しました: ' + response.status);
  }

  return response.json();
}

try {
  const data = await fetchData('https://api.example.com/data');
  console.log(data);
} catch (error) {
  console.error(error.message);
}

response.ok は、ステータスコードが200〜299のときに true になる。この書き方をパターンとして覚えておくと、どんなAPIを呼び出すときにも応用できる。

CORSとの関係

fetch で別オリジンのAPIを呼び出すと、CORSエラーが発生することがある。これはfetch自体の問題ではなく、ブラウザのセキュリティ制限とサーバー側のCORS設定の問題だ。AIコーディングでよく遭遇するパターンなので、CORSについても合わせて理解しておくとよい。

AIコーディングとfetchの関係

AIはfetchを使ったAPIとの通信コードを生成するのが得意だ。「このエンドポイントにPOSTリクエストを送り、レスポンスを表示して」といった指示で、適切なコードを生成してもらえる。

指示に「エラーハンドリングも含めて」「response.ok で成否を確認して」と明示すると、より実用的なコードが生成される。生成されたコードのURLやトークンは必ず実際の値に書き換えて使うこと。

よくある勘違い

fetchはエラーが出たら自動で.catchに入る？

そうではない。fetchはネットワーク障害など通信自体が失敗した場合のみ .catch に入る。サーバーが404や500を返した場合は「通信は成功している」とみなされるため、.catch には入らない。response.ok や response.status を使って明示的に確認する必要がある。

fetchはNode.jsでも使える？

Node.js 18以降ではグローバルにfetchが使えるが、それ以前のバージョンでは標準では使えなかった。Node.js環境では axios や node-fetch といったライブラリが広く使われてきた経緯がある。axios はエラーハンドリングがシンプルで（4xxや5xxで自動的に例外をスロー）、設定の再利用もしやすいため、Node.jsや大規模プロジェクトでは今でも選ばれることが多い。

データを受け取ったらすぐ使える？

受け取ったレスポンスはそのままでは使えない。response.json() や response.text() などのメソッドを呼び出してデータを変換する必要がある。これらも非同期処理（Promise）なので await が必要だ。

より詳しくAIに聞いてみよう

• fetch APIとは何か、初心者でもわかるように説明してください。
• fetchのPromiseとasync/awaitの書き方の違いを整理してください。
• fetchで404エラーや500エラーを正しくハンドリングする方法を教えてください。
• fetchでBearer認証を使ったAPIリクエストを送る方法を教えてください。
• fetchとaxiosの違いと、どちらを選ぶべき場面を教えてください。