【JavaScript】fetch()とasync/awaitで非同期処理を理解する

1. はじめに

今回はJavaScriptの非同期処理について学習したので、その内容を整理していきます。
外部のデータを取得するfetch()や、処理の完了を待つためのasync/await、エラーハンドリングの方法などをコード付きでまとめました。

学習教材はプログラミング学習サイトのレッスンで、実際にコードを書きながら動作を確認しています。

2. 非同期処理とは

非同期処理とは、時間のかかる処理をバックグラウンドで実行し、その間も他の処理を進められる仕組みのことです。
画面が固まらないようにするための重要な考え方のようです。

たとえば、以下のような処理を順番に実行する場合を考えます:

showHeader();   // ヘッダーを表示
showUsers();    // ユーザー一覧を表示(外部通信が必要)
showFooter();   // フッターを表示

もしshowUsers()で外部からデータを取得する際に同期的に処理すると、通信が終わるまで画面が固まってしまい、ユーザー体験が悪くなってしまいます。

非同期処理を使うと、ローディング画面を先に表示してから、バックグラウンドでデータ取得を行い、完了したら画面を更新できます。

3. fetch()の基本

fetch()は、JavaScriptで外部のサーバーと通信するための命令です。
この章では、fetch()の基本的な使い方と、返り値であるPromiseについて整理します。

3.1 fetch()とは

fetch()にURLを渡すことで、そのURLからデータを取得できます。

fetch(url)

fetch()は非同期処理として実行されるため、呼び出した時点でバックグラウンドで通信が開始されます。

3.2 Promiseとは

fetch()の返り値はPromiseというオブジェクトです。
Promiseは、非同期処理の状態に応じて値が変わる特殊なオブジェクトで、以下の3つの状態を持つようです:

• Pending: 処理が開始された直後の状態
• Fulfilled: 処理が成功した状態(結果が値としてセットされる)
• Rejected: 処理が失敗した状態(エラー情報がセットされる)

const response = fetch(url);
console.log(response);

コンソール出力:

Promise {<pending>}

このコードでは、fetch()を実行した直後にresponseを表示しているため、まだ処理が終わっておらずPending状態のPromiseが表示されます。

4. async/awaitの使い方

async/awaitは、非同期処理の完了を待ってから次の処理に進むための書き方です。
この章では、基本的な使い方とJSONデータの取得方法を整理します。

4.1 基本的な書き方

非同期処理が完了するまで待ってから結果を取得するには、awaitを使います。

async function showUsers() {
  const response = await fetch(url);  // fetch()の完了を待つ
  console.log(response);
}

awaitを使う関数には、必ずasyncキーワードを付ける必要があります。

このコードでは、awaitによってfetch()の処理が完了するまで待機し、完了後にresponseに結果が代入されます。

4.2 JSONデータの取得

fetch()で取得したレスポンスからJSON形式のデータを取り出すには、.json()メソッドを使います。

async function showUsers() {
  const response = await fetch(url);
  const users = await response.json();  // JSON変換も非同期処理
  console.log(users);
}

.json()も非同期処理のため、awaitを付ける必要があります。

コンソール出力:

(3) [{…}, {…}, {…}]
  0: {userName: "Alice", score: 85}
  1: {userName: "Bob", score: 92}
  2: {userName: "Carol", score: 78}

配列の中に3つのオブジェクトが格納され、それぞれuserNameとscoreのキーを持っていることが分かります。

5. エラーハンドリング

外部データを扱う場合は、予期せぬエラーが発生する可能性があります。
この章では、try...catchを使ったエラー処理の方法を整理します。

5.1 try...catchの使い方

非同期処理が失敗した場合に備えて、try...catchでエラーをキャッチする必要があります。

async function showUsers() {
  try {
    const response = await fetch(url);
    const users = await response.json();
    console.log(users);
  } catch (error) {
    console.log("Something went wrong getting user data");
    console.log("Error Log:", error);
  }
}

エラーが起きそうな処理をtryブロックで囲み、catchブロックでエラー時の処理を書きます。catchの引数には、ブラウザがエラー情報をセットしてくれるようです。

外部データを扱う場合は予期せぬエラーが発生する可能性があるため、try...catchでのエラーハンドリングが推奨されます。

5.2 エラーの例

たとえば、JSONの形式が正しくない場合は以下のようなエラーが発生します:

// 不正なJSON(キーにダブルクオーテーションがない)
{userName: "Alice", score: 85}  // エラーになる

このようなデータを.json()で変換しようとすると、catchブロックでエラーがキャッチされ、設定したメッセージが表示されます。

6. 関数式でasyncを使う

asyncは、関数宣言だけでなく関数式(アロー関数)でも使用できます。
ここでは書き方の違いを整理しておきます。

6.1 関数式での書き方

asyncを関数式で使う場合、以下のように記述します。

const showUsers = async () => {
  try {
    const response = await fetch(url);
    const users = await response.json();
    console.log(users);
  } catch (error) {
    console.log("Something went wrong getting user data");
    console.log("Error Log:", error);
  }
};

関数式でasyncを使う場合、()の前に書く必要があります。位置を間違いやすいので注意が必要です。

7. .then()と.catch()の書き方

async/awaitが登場する前は、.then()と.catch()を使ってPromiseを扱っていたようです。
この章では、以前の書き方も確認しておきます。

7.1 以前の書き方

function showUsers() {
  fetch(url)
    .then((response) => {
      return response.json();  // returnが必要
    })
    .then((users) => {
      console.log(users);
    })
    .catch((error) => {
      console.log("Something went wrong getting user data");
      console.log("Error Log:", error);
    });
}

• .then(): 処理が成功した場合の処理を書く
• .catch(): エラーが発生した場合の処理を書く

.then()の中で次の処理に値を渡すには、returnが必要です。

7.2 どちらを使うべきか

最近のプロジェクトではasync/awaitの方が主流になっているようですが、既存のコードで.then()/.catch()を見かけることもあるため、両方の書き方を知っておくと良さそうです。

まとめ

今回学習した内容を整理します:

• 非同期処理: 時間のかかる処理をバックグラウンドで実行し、画面が固まるのを防ぐ仕組み
• fetch(): 外部のデータを取得するための命令で、非同期処理として動作する
• Promise: 非同期処理の状態(Pending/Fulfilled/Rejected)を表すオブジェクト
• async/await: 非同期処理の完了を待つための書き方(awaitを使う関数にはasyncが必要)
• try...catch: エラーをキャッチして適切に処理する仕組み
• .then()/.catch(): 以前よく使われていたPromiseの処理方法

最初はasync、await、.json()など覚えることが多くて戸惑いましたが、fetch()を使う場合はこのパターンで書く、と理解すれば良さそうだと分かりました。

実際のプロジェクトでもよく使われる技術のようなので、しっかり身につけていきたいです。