【初心者向け】JavaScriptのfetch()の使い方を丁寧解説！非同期通信を理解しよう

2024-07-14

当サイトでは一部リンクに広告が含まれています

JavaScriptを使ったWebアプリケーション開発で必須となるのが、サーバーとの通信を行う非同期処理です。この非同期通信を実現するためのAPIの1つに、fetch()メソッドがあります。

fetch()は比較的新しいAPIですが、現在ではすっかり主流となり、Ajaxに代わる標準的な通信手段として広く使われています。しかし、非同期通信自体がよく分からないという方も多いのではないでしょうか。

本記事では、fetch()を使った非同期通信の仕組みをできる限り分かりやすく説明していきます。JavaScriptのfetch()の基本的な使い方から、Promiseを使ったエラーハンドリングまで、具体的なコード例を交えながら丁寧に解説します。

初心者の方でも、これを読めば非同期通信やfetch()への理解が深まるはずです。fetch()マスターへの第一歩を踏み出しましょう！

また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！

現役のフルスタックWebエンジニアとして活躍中
プログラミングスクールで教材を執筆した経験アリ
副業でプログラミングスクール講師をしている教育のプロ

そもそもfetch()とは？非同期通信との関係

fetch()の概要

fetch()とは、JavaScriptでサーバーとの通信を行うためのメソッドです。より具体的には、サーバーに対してHTTPリクエストを送信し、その結果（レスポンス）を受け取るのがfetch()の役割です。

従来はXMLHttpRequestという方法が使われてきましたが、記述が複雑で分かりづらいという問題がありました。一方、fetch()はよりシンプルで直感的な書き方ができるのが特徴です。

非同期通信とは

fetch()を理解するうえで外せないのが、非同期通信の概念です。

非同期通信とは、リクエストを送ってからレスポンスが返ってくるまでの間に、他の処理を実行できる通信方式のことです。

一方、同期通信はレスポンスが返ってくるまで他の処理はできずブロックされてしまいます。Webアプリでは通信中も操作を継続できる必要があるため、ほとんどの場合で非同期通信が用いられています。

fetch()は、まさにこの非同期通信を実現するためのメソッドなのです。リクエストを送信した後も処理を途中で止めることなく、レスポンスを受け取り次第次の処理を再開できます。

fetch()の基本的な使い方

それでは、fetch()の具体的な使い方を見ていきましょう。まずは基本形から確認します。

fetch("https://example.com/api/endpoint")
  .then(response => {
    // レスポンスを処理するコード
  })
  .catch(error => {
    // エラー処理
  });

fetch()の引数にはアクセスしたいURLを指定します。そしてレスポンスが返ってきたら、then()に記述したコールバック関数で処理を行います。

この時.then()と.catch()がつながっているのは、fetch()が返すのがPromiseオブジェクトだからです。

Promiseによる処理の流れ

Promiseは非同期処理の状態と結果を表すオブジェクトです。非同期処理の成功/失敗に応じて、異なるコールバック関数を呼び出せるのが特徴です。

fetch()の基本的な流れは以下の通りです。

fetch()でHTTPリクエストを送信
Promiseが返される（通信完了まで待機）
レスポンスが返ってきたら、.then() の処理を実行
- 成功すれば.then()の引数で結果を受け取る
- 失敗すれば.catch()に処理が移る

Promiseのおかげで、複雑な非同期処理もシンプルに記述できるようになりました。

レスポンスデータの取得

fetch()で得られるレスポンスは、そのままではデータとして扱えません。そこで、レスポンスデータを適切な形式に変換する必要があります。

よく使われるメソッドとしては、以下の4つがあります。

response.text()：レスポンスをテキストとして取得
response.json()：レスポンスをJSONとして取得しパース
response.blob()：レスポンスをBlobデータとして取得
response.arrayBuffer()：レスポンスをArrayBufferとして取得

データの形式に合わせて使い分けましょう。例えばJSONデータを取得する場合は以下のようになります。

fetch("https://example.com/api/data")
  .then(response => response.json())
  .then(data => {
    // JSONデータを使った処理
  })
  .catch(error => {
    console.error(error);
  });

リクエストの設定とエラー処理

リクエストメソッドとヘッダの指定

fetch()は、デフォルトではGETリクエストを送信します。POST等の他のメソッドを使う場合は、fetch()の第2引数にオプションオブジェクトを指定します。

fetch("https://example.com/api/endpoint", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
});

このように、methodプロパティでHTTPメソッドを指定し、リクエストボディにはJSONにしたデータを渡しています。

エラーハンドリング

Promiseでは、.catch()を使ってエラー処理を記述します。例としては、以下のようなパターンが考えられます。

fetch("https://example.com/api/data")
  .then(response => {
    if (!response.ok) {
      throw new Error(`${response.status} ${response.statusText}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

response.okプロパティでレスポンスのHTTPステータスコードが200番台かどうかを判定し、そうでない場合は例外をthrowしています。そうすることで、.catch()に処理が移ります。

ネットワークエラー等、完全に通信が失敗した場合も同様に.catch()で受け取れます。想定されるエラーをきちんとハンドリングしておくのは、堅牢なコードを書くうえで重要なポイントです。

async/awaitを使った書き方

fetch()と非同期処理を扱う上で、Promiseのかわりにasync/awaitを使うこともできます。

async/awaitは、Promiseをより直感的に記述できる構文です。コードの見通しがよくなり、同期処理のような書き方ができるのが特徴です。

async/awaitを使ったfetch()の基本的な書き方は以下のようになります。

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

ポイントは以下の通りです。