Fetch APIとは？初心者向けにメリットや使い方を解説

はじめに

JavaScriptで非同期通信を行いたいとき、多くの方は Fetch API という言葉を聞くのではないでしょうか。 Fetch APIは、従来よく使われていたXMLHttpRequest（XHR）をよりシンプルにしたような仕組みです。 より読みやすいコードでサーバーからデータを取得できるため、開発現場でも活用されています。 これからプログラミングを学び始めようとしている皆さんにとっても、比較的理解しやすい機能と言えるでしょう。 この記事では、Fetch APIの概要と使い方、そして実務との結びつきをなるべくわかりやすく紹介していきます。

この記事を読むとわかること

• Fetch APIの基本的な仕組みと特徴
• 実際のコード例を通じたGETリクエストやPOSTリクエストの方法
• XHRとの違いやエラー処理で気をつけるポイント
• 実務との関連例
• まとめとしての重要なポイント

Fetch APIの概要

Fetch APIとは、JavaScriptでHTTPリクエストを行うための機能の一つです。 ブラウザで利用するだけでなく、環境によってはサーバーサイドのJavaScriptでも利用できます。 従来のXHRとは異なり、Fetch APIはPromiseベースで設計されているため、非同期の処理が比較的書きやすい構文になっています。 また、JSONなどの形式で返ってくるデータを手軽に扱いやすいのも特徴です。 このように、一言でまとめると「コードがわかりやすく、エラー処理もシンプルに記述できる非同期通信手段」と言えるでしょう。

なぜFetch APIを使うのか

非同期通信を行う手段としては、以前から XHR (XMLHttpRequest) が存在していました。 XHRは動作自体は問題ありませんが、コールバック関数を使う実装がやや複雑になりがちで、可読性を損ねるケースがありました。 一方、Fetch APIはPromiseを返却するので、.then() や async/await 構文と組み合わせやすいというメリットがあります。 また、レスポンスをJSON形式に変換するのも簡単で、コード量が少なくなることも少なくありません。 そのため、最近では新規プロジェクトを中心にFetch APIが主流になりつつあるようですね。

Fetch APIの基本的な使い方

Fetch APIの基本構文はとてもシンプルです。 URLを指定して fetch() を呼び出し、あとはPromiseチェーンや async/await で処理を行うだけです。 以下にシンプルな例を示します。

コピー
// GETリクエストでデータを取得する場合の例
fetch("https://example.com/api/data")
  .then(response => {
    // レスポンスのステータスが正常かどうかチェック
    if (!response.ok) {
      throw new Error("サーバーからエラーが返されました。");
    }
    // レスポンスをJSON形式に変換
    return response.json();
  })
  .then(data => {
    // JSONデータを受け取り、必要な処理を実行
    console.log("取得したデータ:", data);
  })
  .catch(error => {
    // ネットワークエラーや上記throwによるエラー時にここへくる
    console.error("通信でエラーが発生しました:", error);
  });

ここではサンプルとして、あるAPIのエンドポイント "https://example.com/api/data" へアクセスしています。 fetch() で指定したURLに対してHTTPリクエストを送り、返ってきたレスポンスを .then() で受け取っているのがわかるでしょう。 レスポンスがエラーでないことを確認し、問題なければ .json() メソッドでJSONデータにパースしています。 最後に .catch() でエラーを補足し、適切な対処を行います。

async/awaitを使った書き方

Promiseチェーンよりも、async/await を使った方が直感的に書ける場合もあります。 以下は同じ処理を async/await で書き換えた例です。

コピー
async function getData() {
  try {
    const response = await fetch("https://example.com/api/data");
    if (!response.ok) {
      throw new Error("サーバーからエラーが返されました。");
    }

    const data = await response.json();
    console.log("取得したデータ:", data);
  } catch (error) {
    console.error("通信でエラーが発生しました:", error);
  }
}

getData();

await を用いることで、まるで同期処理のようにコードが順番通り進行するため、初心者の皆さんでもイメージしやすいかもしれません。 ただし、 async/await を使う場合は、その関数に async キーワードを付ける必要がある点だけ注意しておきましょう。

POSTリクエストの送信例

Fetch APIを使うと、GETだけでなくPOSTリクエストも手軽に送信できます。 たとえば、フォームデータをサーバーへ送りたい場合は、以下のように fetch() の第二引数にオプションを指定します。

コピー
async function sendData(user) {
  try {
    const response = await fetch("https://example.com/api/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      // bodyには文字列を渡す必要があるため、JSON.stringify() を利用
      body: JSON.stringify(user)
    });

    if (!response.ok) {
      throw new Error("サーバー側でエラーが発生したようです。");
    }

    const result = await response.json();
    console.log("サーバーからのレスポンス:", result);
  } catch (error) {
    console.error("データ送信時にエラーが発生しました:", error);
  }
}

// たとえばユーザー情報をオブジェクトとして送るケース
const newUser = { name: "Taro", age: 25 };
sendData(newUser);

method を "POST" に設定し、 headers で "Content-Type": "application/json" を指定するのがポイントです。 こうすることで、送信データをJSON形式としてサーバーに渡せます。 あとは JSON.stringify() でオブジェクトを文字列化して body にセットするだけで、シンプルにPOSTリクエストが送信できます。

エラー処理で気をつけるポイント

Fetch APIで失敗するケースとしては、いくつかのパターンが考えられます。 一つ目は、ネットワーク障害などによりリクエストがそもそも送信できない場合。 二つ目は、サーバーからエラーコード（4xxや5xx）が返ってくる場合です。 前者の場合、.catch() に入ってきますが、後者はレスポンスオブジェクトそのものは返ってくるため、一見成功に見えてしまうことがあります。 そのため、先ほどの例のように if (!response.ok) { throw new Error(...) } として、ステータスコードを自分でチェックするのが良いでしょう。

実務との関連例

実務の開発現場では、REST APIを用いたデータ取得や投稿、あるいはWebアプリケーションへのログイン認証など、Fetch APIを使う場面は多岐にわたります。 特にSPA（Single Page Application）のように、ページ全体をリロードせずに部分的なデータだけを更新するケースでは、Fetch APIを頻繁に使います。 同じような処理を複数のファイルやコンポーネントで行うこともあるため、チーム開発では共通のユーティリティ関数としてFetch APIをラップして使うことも一般的です。 たとえば、リクエストのステータスコードに応じて自動的にリトライする仕組みを組み込むなど、プロジェクトの要件に合わせた実装も考えられます。

Reactなどのフレームワークとの組み合わせ

Reactをはじめとするフロントエンドフレームワークでも、基本的にFetch APIをそのまま利用できます。 コンポーネントのマウント時にデータを取得する処理や、フォーム送信時のイベントハンドラとしてPOSTを実行する処理など、UIと連動してFetch APIを使うのが一般的なパターンです。 このように、フレームワークであっても生のJavaScript APIと同じ手順で扱えることは、大きな利点の一つと言えるでしょう。

XHRとの違い

XHRはコールバックやイベントリスナーを使って通信結果を受け取るのが基本でした。 それに対してFetch APIはPromiseベースで、エラー処理やデータ変換をシンプルに書けます。 XHRも依然として動作はしますが、コードの見通しや保守性の面からFetch APIのほうが活用されやすくなっています。 また、XHRの場合はレスポンスとしてJSONを扱うには明示的にJSON.parseなどを呼び出す必要がありましたが、Fetch APIでは .json() メソッドが用意されているのも便利なポイントです。 したがって、初学者にとっても学習しやすいと感じられる場合が多いかもしれません。

その他の活用ポイント

Fetch APIを使う際、気をつけるべきポイントはいくつか存在します。 たとえば、クライアント側とサーバー側が異なるドメインやポート番号で動いている場合に生じる CORS (Cross-Origin Resource Sharing) の設定です。 CORSの仕組みを正しく理解していないと、ブラウザでリクエストがブロックされることがあるため、事前にサーバー側の設定と合わせて動作確認を行う必要があります。

また、ファイルアップロードなどを行う場合は FormData オブジェクトを使う方法もあります。 Fetch APIは、送信するデータ形式に合わせた設定を行うことで、さまざまなサーバーサイドAPIに対応できる柔軟性を持っています。 さらに、レスポンスをテキスト形式で受け取りたい場合は .text()、バイナリデータとして扱いたい場合は .blob() などを利用するなど、様々な活用方法があるのも特徴と言えます。

まとめ

ここまでFetch APIの概要から、実際の使い方とエラー処理、実務上の活用ポイントまでお話ししてきました。 Promiseベースであるため、XHRよりシンプルに非同期処理を記述できる点は大きな魅力です。 また、GETやPOSTをはじめとする様々なHTTPメソッドを簡単に使いこなすことができます。 実務でもJSONデータの取得やフォーム送信など、多くの場面で活躍する機能なので、早めに習得しておくと良いでしょう。 皆さんがJavaScriptでデータ通信を扱う際には、ぜひFetch APIを活用してみてください。