JavaScriptのfetchとは？API通信の使い方を解説

PR JavaScript

JavaScriptのfetchとは？API通信の使い方を解説

💡 この記事でわかること

  • fetchとは何か
  • GETリクエストでデータを取得する方法
  • レスポンスをJSONに変換する方法
  • POSTリクエストでデータを送信する方法
  • エラーハンドリングで注意すべき点

1. fetchとは？

fetchとは、
👉 ブラウザに標準で用意されている、サーバーと通信してデータをやり取りするための関数です。

💡 「天気予報アプリで最新の天気データを取得する」「投稿フォームの内容をサーバーに送信する」など、Webページがサーバーと情報をやり取りする場面では欠かせない機能です。fetchはPromiseを返すため、async/awaitと組み合わせて使うのが一般的です。

👉 JavaScriptの非同期処理(async/await・Promise)についての記事はこちら

2. GETリクエストでデータを取得する

最もシンプルな使い方は、URLを1つ渡すだけのGETリクエストです。

async function getUser() {
  const response = await fetch("https://example.com/api/users/1");
  console.log(response); // Responseオブジェクト
}

getUser();

👉 fetchの戻り値(awaitした後の値)は、データそのものではなく「Response」というオブジェクトです。データの中身を取り出すには、もう1段階の変換が必要になります。

3. レスポンスをJSONに変換する

多くのAPIはJSON形式でデータを返します。ResponseオブジェクトのJSONを取り出すにはresponse.json()を使います。

async function getUser() {
  const response = await fetch("https://example.com/api/users/1");
  const data = await response.json();
  console.log(data.name);
}

getUser();

💡 response.json()もPromiseを返す非同期の処理なので、awaitを付け忘れないようにしましょう。付け忘れると、dataにはデータの中身ではなくPromiseオブジェクトそのものが入ってしまいます。

👉 JavaScriptのJSON(stringify・parse)についての記事はこちら

4. POSTリクエストでデータを送信する

データを送信するときは、fetchの第2引数にオプションを指定します。

async function createUser() {
  const response = await fetch("https://example.com/api/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ name: "田中", age: 25 }),
  });

  const data = await response.json();
  console.log(data);
}

createUser();

👉 bodyに渡せるのは文字列だけなので、送信したいオブジェクトはJSON.stringifyで文字列に変換してから渡します。headersのContent-Typeを"application/json"にすることで、サーバー側に「JSON形式で送っています」と伝えられます。

5. エラーハンドリングの注意点

fetchは通信自体が失敗した場合(ネットワーク切断など)しかエラーになりません。

💡 「404 Not Found」や「500 Internal Server Error」のようなHTTPエラーが返ってきても、fetchはエラーとして扱わず、正常に処理を続けてしまいます。そのため、response.okでリクエストが成功したかどうかを自分で確認する必要があります。

async function getUser() {
  try {
    const response = await fetch("https://example.com/api/users/999");

    if (!response.ok) {
      throw new Error(`HTTPエラー:${response.status}`);
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("データの取得に失敗しました:", error.message);
  }
}

getUser();

👉 JavaScriptのエラー処理(try・catch・finally)についての記事はこちら

6. 初心者がつまずきやすいポイント

  • response.json()にawaitを付け忘れる:中身がPromiseのままになり、期待したデータが取れません
  • HTTPエラーがcatchされると思い込む:404や500はresponse.okで自分でチェックする必要があります
  • bodyにオブジェクトをそのまま渡す:必ずJSON.stringifyで文字列に変換してから渡します

まとめ

  • fetchはサーバーと通信するためのブラウザ標準の関数
  • await fetch(url)でリクエストし、await response.json()でデータを取り出す
  • POSTするときはmethod・headers・bodyをオプションで指定する
  • HTTPエラーは自動でエラー扱いにならないため、response.okで確認する

fetchはAPI通信の基本となる機能です。GETでデータを取得する形と、POSTでデータを送信する形の2パターンをまず覚えておけば、実際の開発でも十分に対応できます。

-JavaScript
-, ,