MENU
  1. ホーム
  2. TypeScript
  3. TypeScriptでasync/awaitを使った非同期処理の書き方と応用例

TypeScriptでasync/awaitを使った非同期処理の書き方と応用例

TypeScript

TypeScriptにおける非同期処理は、サーバーからのデータ取得やファイルの読み込みなど、リアルタイムでの応答が求められる場面で頻繁に使用されます。従来のコールバック関数による非同期処理では、可読性が低く、デバッグが難しくなる「コールバック地獄」と呼ばれる問題が発生していました。しかし、async/awaitを使うことで、同期処理のように簡潔かつ直感的に非同期処理を記述することが可能になります。本記事では、TypeScriptでの非同期処理の基本から応用までを、async/awaitの使い方を中心に詳しく解説します。

目次
  1. 非同期処理とは
    1. 同期処理との違い
    2. なぜ非同期処理が重要か
  2. Promiseの基本
    1. Promiseの三つの状態
    2. Promiseの基本構文
    3. Promiseの使用例
  3. async/awaitの基本的な使い方
    1. async/awaitの基本構文
    2. 実際の使用例
    3. async/awaitのポイント
  4. 非同期関数のエラーハンドリング
    1. try/catchを使ったエラーハンドリングの基本
    2. 非同期エラーの種類
    3. エラーハンドリングのベストプラクティス
  5. async/awaitを用いた並行処理
    1. Promise.allの基本的な使い方
    2. Promise.allの利点
    3. エラーハンドリングの注意点
    4. Promise.allSettledによる柔軟なエラーハンドリング
  6. APIリクエストの例
    1. 基本的なAPIリクエスト
    2. APIリクエストの詳細
    3. APIリクエストの実用性
  7. デバッグ方法
    1. 基本的なデバッグ手法
    2. 非同期特有のデバッグ課題
    3. async/awaitを使ったデバッグツール
    4. 非同期処理のデバッグ時の注意点
  8. 非同期処理の応用例
    1. リアルタイムチャットアプリケーション
    2. ファイル読み込みの例
    3. データベースアクセスの例
    4. 非同期処理を組み合わせた複雑なシナリオ
    5. まとめ
  9. 非同期処理を学ぶ際のよくあるミス
    1. 1. awaitを使い忘れる
    2. 2. async関数の返り値を待たない
    3. 3. エラーハンドリングを忘れる
    4. 4. 複数の非同期処理を順次実行してしまう
    5. 5. 関数の同期/非同期の扱いを混同する
    6. まとめ
  10. 演習問題
    1. 問題1: APIリクエストを実行し、エラーハンドリングを追加する
    2. 問題2: 複数の非同期処理を並行して実行する
    3. 問題3: 非同期関数の結果を処理する
    4. 問題4: ファイルの読み込みを非同期で行う
    5. まとめ
  11. まとめ

非同期処理とは


非同期処理とは、あるタスクが完了するまで待たずに次の処理を進めることができるプログラミング手法のことです。これは、時間のかかる操作（例えば、APIのリクエストやファイルの読み込みなど）を実行中に他の作業を続けることができるため、アプリケーションの応答性を保つために非常に重要です。

同期処理との違い


同期処理では、あるタスクが終了するまで次のタスクに進むことができません。一方、非同期処理では、時間のかかるタスクが完了するのを待たずに、他のタスクを並行して実行することができます。これにより、アプリケーション全体の処理がスムーズに進行し、ユーザーにとっての待ち時間が短縮されます。

なぜ非同期処理が重要か


特にWebアプリケーションやサーバーサイドアプリケーションにおいて、非同期処理は効率的なリソース利用を可能にします。例えば、ネットワークリクエストやデータベースアクセスなど、処理時間が不定の操作を行う際に、アプリケーションが「待機状態」にならないため、ユーザーの体験を向上させることができます。

Promiseの基本


async/awaitを使いこなすためには、まずPromiseの基本概念を理解することが重要です。Promiseは、非同期処理の結果を将来的に返すオブジェクトであり、「成功」または「失敗」のいずれかの状態を持つものです。これにより、非同期処理の完了を待つことなく、次の処理に進むことが可能になります。

Promiseの三つの状態


Promiseは以下の三つの状態を持ちます。

  1. Pending（保留中）: 非同期処理がまだ完了していない状態。
  2. Fulfilled（成功）: 非同期処理が正常に完了し、結果が返された状態。
  3. Rejected（失敗）: 非同期処理が失敗し、エラーメッセージなどが返された状態。

Promiseの基本構文


Promiseは、以下のようにnew Promise()コンストラクタを使用して作成されます。

const promise = new Promise((resolve, reject) => {
  // 非同期処理を行う
  if (成功) {
    resolve(結果);
  } else {
    reject(エラー);
  }
});

Promiseの使用例


以下は、Promiseを使用して非同期処理を行う基本的な例です。

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('データ取得成功');
    } else {
      reject('データ取得失敗');
    }
  }, 2000);
});

fetchData.then((result) => {
  console.log(result); // データ取得成功
}).catch((error) => {
  console.error(error); // データ取得失敗
});

Promiseは、非同期処理の結果を扱うための強力なツールであり、async/awaitを理解するための基礎となります。

async/awaitの基本的な使い方


async/awaitは、Promiseをよりシンプルに扱うための構文で、非同期処理を同期処理のように記述できる点が大きな利点です。これにより、複雑なPromiseチェーンが簡潔になり、コードの可読性が向上します。

async/awaitの基本構文


async関数を使うことで、その関数内でawaitを使用してPromiseの結果を待つことができます。以下が基本的な構文です。

async function fetchData() {
  try {
    const result = await someAsyncFunction();  // Promiseの解決を待つ
    console.log(result);  // 結果を使用する
  } catch (error) {
    console.error(error);  // エラー処理
  }
}

実際の使用例


次に、fetch関数を用いてAPIからデータを取得する際のasync/awaitの使用例を示します。

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');  // APIリクエストを送信
    const data = await response.json();  // 取得したデータをJSON形式に変換
    console.log(data);  // 取得したデータを表示
  } catch (error) {
    console.error('データ取得に失敗しました:', error);  // エラーハンドリング
  }
}

getData();

async/awaitのポイント

  • asyncの付いた関数は常にPromiseを返す: async関数は、その中でawaitを使用しているかどうかに関係なく、Promiseを返します。これは、他の非同期関数と組み合わせて処理を行う際に便利です。
  • awaitはPromiseの完了を待つ: awaitキーワードは、Promiseが解決または拒否されるまで、処理を一時停止します。そのため、同期的に次の処理が行われるように見える効果を持ちます。

このようにして、async/awaitは非同期処理を直感的かつシンプルに書くための手法として、JavaScriptやTypeScriptで幅広く使われています。

非同期関数のエラーハンドリング


async/awaitを使用した非同期処理では、エラーハンドリングが重要な要素となります。非同期処理の中でエラーが発生する可能性があるため、それに適切に対処することが必要です。通常、try/catch構文を使用して、非同期関数内で発生したエラーを捕捉し、安全に処理することができます。

try/catchを使ったエラーハンドリングの基本


以下は、try/catch構文を使ってasync/awaitでエラーをキャッチする基本的な例です。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('ネットワークエラー: ' + response.status);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('データ取得に失敗しました:', error.message);
  }
}

上記の例では、APIリクエストが失敗した場合や、レスポンスが正常でない場合（response.okがfalse）、エラーがスローされ、それをcatchで捕まえて処理しています。

非同期エラーの種類


非同期処理におけるエラーは、以下の2つの主要なケースがあります。

  1. ネットワークエラーやサーバーの応答エラー
    API呼び出しやリモートサーバーとの通信中に発生するエラーです。例えば、リクエストがタイムアウトしたり、サーバーが利用できない場合に発生します。これらのエラーは通常、HTTPステータスコードを使って判別します。
  2. Promiseの拒否によるエラー
    非同期処理内で発生したエラーがPromiseを拒否する（reject）場合もあります。awaitでそのPromiseを待っている際に、エラーがスローされ、catchブロックで処理されます。

エラーハンドリングのベストプラクティス


非同期処理においてエラーハンドリングを効果的に行うためのベストプラクティスを以下に示します。

  • エラーメッセージを具体的にする: エラーメッセージは、何が問題だったのかを明確に伝えるものにします。これにより、デバッグやトラブルシューティングが容易になります。
  • 非同期関数のチェーン内で適切にエラーを伝播させる: 非同期関数が他の関数を呼び出す際、エラーが適切に伝播されるようにすることが重要です。これにより、処理が失敗した場所や理由を追跡できます。
  • ユーザーにフィードバックを提供する: 非同期処理が失敗した際には、ユーザーにわかりやすいフィードバックを提供することが重要です。例えば、「サーバーに接続できませんでした。再試行してください。」などのメッセージを表示することで、ユーザー体験を向上させることができます。

このように、async/awaitを使った非同期処理では、エラーハンドリングを適切に行うことで、アプリケーションの信頼性を向上させることができます。

async/awaitを用いた並行処理


非同期処理を効率的に行うためには、複数の非同期タスクを同時に実行する「並行処理」が重要です。async/awaitでは、Promise.allを使用することで複数の非同期処理を並行して実行でき、全てのタスクが完了するまで待つことができます。これにより、処理の高速化と効率化が図れます。

Promise.allの基本的な使い方


Promise.allは、複数のPromiseを受け取り、それらすべてが解決（成功）または拒否（失敗）されるのを待ちます。すべてのPromiseが解決されると、その結果が配列として返されます。

以下は、Promise.allを使って並行処理を行う例です。

async function fetchMultipleData() {
  try {
    const [data1, data2, data3] = await Promise.all([
      fetch('https://api.example.com/data1'),
      fetch('https://api.example.com/data2'),
      fetch('https://api.example.com/data3')
    ]);

    const result1 = await data1.json();
    const result2 = await data2.json();
    const result3 = await data3.json();

    console.log(result1, result2, result3);
  } catch (error) {
    console.error('データの取得に失敗しました:', error);
  }
}

fetchMultipleData();

この例では、3つのAPIリクエストを並行して実行し、それぞれの結果を待っています。この方法では、各リクエストが順番に実行されるのではなく、同時に実行されるため、全体の処理時間が短縮されます。

Promise.allの利点

  • 処理速度の向上: 各Promiseを並行して実行するため、全体の処理時間が短縮されます。これは、ネットワークリクエストやファイル読み込みなど、時間のかかる操作において特に効果的です。
  • 結果の一括取得: 全ての非同期処理が完了したタイミングで結果を取得できるため、複数のデータを同時に利用したい場合に便利です。

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


Promise.allを使用する際、いずれかのPromiseが失敗すると、全体の処理がcatchブロックに入ります。例えば、3つのリクエストのうち1つが失敗すると、その時点で全体がエラーとして扱われます。

try {
  const results = await Promise.all([
    fetchData1(),
    fetchData2(),
    fetchData3()
  ]);
} catch (error) {
  console.error('エラーが発生しました:', error);
}

このため、複数のタスクの中で個々のエラーに対処したい場合には、各Promiseの中で個別にエラーハンドリングを行うか、Promise.allSettledを使うことが有効です。

Promise.allSettledによる柔軟なエラーハンドリング


Promise.allSettledは、全てのPromiseの成功・失敗に関係なく、すべての結果を受け取ることができるメソッドです。これを使用すれば、個々のPromiseが失敗しても、他のPromiseの結果は取得可能です。

async function fetchMultipleDataWithAllSettled() {
  const results = await Promise.allSettled([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2'),
    fetch('https://api.example.com/data3')
  ]);

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Data ${index + 1} succeeded:`, result.value);
    } else {
      console.error(`Data ${index + 1} failed:`, result.reason);
    }
  });
}

このように、Promise.allを使った並行処理は、非同期処理を効率的に行うための強力な手段です。用途に応じて、Promise.allやPromise.allSettledを使い分けることで、非同期タスクの管理が柔軟かつ効率的に行えます。

APIリクエストの例


async/awaitは、APIからデータを取得する際に非常に役立ちます。APIリクエストは非同期操作であり、サーバーからの応答を待つ必要があるため、これを効率的に処理するためにasync/awaitを使うことで、コードの可読性を大幅に向上させることができます。ここでは、APIリクエストにおけるasync/awaitの使用例を紹介します。

基本的なAPIリクエスト


以下の例は、fetchを使ってAPIからデータを取得する際の基本的な使い方を示しています。

async function fetchUserData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');

    // リクエストが成功しているか確認
    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }

    const userData = await response.json();  // レスポンスをJSON形式で取得
    console.log(userData);
  } catch (error) {
    console.error('ユーザーデータの取得に失敗しました:', error);
  }
}

fetchUserData();

この例では、fetch関数を使って外部APIにリクエストを送信し、その結果をawaitで待っています。応答が正常でない場合（response.okがfalseの場合）は、throwを使ってエラーをスローし、catchブロックでエラーメッセージを処理しています。

APIリクエストの詳細


上記のコードでは、fetch関数を使ってHTTPリクエストを非同期で行い、サーバーからのレスポンスを待っています。awaitを使うことで、コードが同期的に動作しているように見えますが、バックグラウンドで非同期にリクエストが実行されています。レスポンスが取得された後、そのデータをawait response.json()でJSON形式にパースして結果を取得しています。

GETリクエスト


基本的なAPIリクエストでは、デフォルトでGETメソッドが使用されます。GETリクエストは、サーバーからデータを取得するための最も一般的なリクエストです。

POSTリクエスト


データをサーバーに送信する場合には、POSTメソッドを使用します。以下は、ユーザー情報をサーバーに送信する例です。

async function createUser() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: 'John Doe',
        email: 'johndoe@example.com'
      })
    });

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

    const newUser = await response.json();
    console.log('新しいユーザーが作成されました:', newUser);
  } catch (error) {
    console.error('ユーザー作成に失敗しました:', error);
  }
}

createUser();

この例では、POSTメソッドを使って、fetch関数に追加のオプションを指定しています。headersでリクエストの種類を指定し、bodyに送信するデータをJSON形式で記述しています。リクエストが成功した場合、サーバーが返す新しいユーザー情報がコンソールに表示されます。

APIリクエストの実用性


非同期APIリクエストは、さまざまな場面で非常に有用です。例えば、以下のようなケースで活用できます。

  • リアルタイムデータの取得: 天気予報、ニュース、株価情報など、リアルタイムの情報を取得し、ユーザーに提供する際に使用します。
  • フォーム送信: ユーザーが入力したデータをサーバーに送信し、サーバーからの応答を待つ処理に使えます。
  • データベースとの通信: クライアントアプリケーションがサーバー上のデータベースとやり取りする際に、APIを介して非同期通信を行います。

このように、async/awaitを使ったAPIリクエストは、非同期処理を簡潔にし、直感的に書ける強力なツールです。特にAPIリクエストの際には、その可読性と効率性が際立ちます。

デバッグ方法


async/awaitを使った非同期処理では、コードがシンプルになる一方で、エラーハンドリングやデバッグが複雑になることがあります。非同期処理に関連するバグを見つけ、効率的に修正するためには、いくつかのポイントを押さえる必要があります。ここでは、async/awaitのデバッグに役立つ方法とツールを紹介します。

基本的なデバッグ手法


非同期処理のデバッグには、同期処理と同様にコンソール出力やブレークポイントの活用が有効です。しかし、非同期処理ではタイミングが重要になるため、エラーの原因が追跡しにくい場合があります。

  1. console.logを活用する
    非同期処理の進行状況を把握するために、console.log()で各処理の結果や状態を確認することが有効です。特に、awaitを使った非同期関数の前後にログを挿入して、どこで問題が発生しているかを確認します。
async function fetchData() {
  try {
    console.log('APIリクエストを送信中...');
    const response = await fetch('https://api.example.com/data');
    console.log('レスポンスを受信:', response);

    const data = await response.json();
    console.log('データを取得:', data);
  } catch (error) {
    console.error('エラーが発生:', error);
  }
}

fetchData();
  1. ブレークポイントを設定する
    ブラウザのデベロッパーツールやVSCodeなどの統合開発環境（IDE）で、ブレークポイントを設定し、コードの実行を一時停止させて状態を確認できます。これにより、変数の値やPromiseの状態をリアルタイムで追跡できます。
  • Chromeのデベロッパーツールでは、「Sources」タブから非同期処理の途中でブレークポイントを設定することができます。
  • また、VSCodeではdebugger;文を使って手動でブレークポイントを挿入できます。
async function fetchData() {
  try {
    debugger;  // ここで実行が停止する
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
  } catch (error) {
    console.error('エラーが発生:', error);
  }
}

非同期特有のデバッグ課題


async/awaitでは、以下のような非同期特有のデバッグ課題に遭遇することがあります。

  • スタックトレースが分かりにくい: 非同期関数のエラーは、同期処理のエラーと異なり、スタックトレースが非同期処理チェーンをまたいで表示されるため、エラーが発生した正確な場所を特定するのが難しくなることがあります。これを解決するためには、catchブロックでエラーメッセージを詳細に記録することが重要です。
  • 非同期処理の順序を誤解する: awaitでPromiseの解決を待つ間に、他の処理が先に進むため、非同期処理の順序が予期せぬ結果を生む場合があります。このような問題を防ぐためには、Promiseの実行順序を明示的に管理し、必要な場合にはPromise.allやPromise.allSettledを使用して、すべての非同期処理の完了を待つことが重要です。

async/awaitを使ったデバッグツール

  • Chrome DevTools
    Chrome DevToolsは、非同期関数のデバッグに役立つツールです。DevToolsでは、非同期関数の実行順序を追跡し、スタックトレースを確認することができます。async関数やawaitを含む非同期処理でもブレークポイントを使用して処理を一時停止し、変数や状態を確認することができます。
  • VSCodeデバッガ
    VSCodeには内蔵デバッガがあり、async/awaitを使ったTypeScriptコードのデバッグが簡単に行えます。ブレークポイントの設定、コールスタックの確認、変数のウォッチなど、様々な機能を活用して非同期処理の問題を解決できます。

非同期処理のデバッグ時の注意点


非同期処理のデバッグを行う際には、以下の点に注意する必要があります。

  • エラーハンドリングを忘れない: エラーが発生した場合、try/catchブロックで適切にハンドリングすることを怠らないようにします。これにより、エラーが原因でコードが予期せず停止することを防ぎます。
  • 複数の非同期タスクを適切に追跡する: 非同期処理が複数絡み合う場合、それぞれのタスクがどのように進行しているかを正確に把握するため、Promiseやawaitの順序や依存関係を明示的に管理することが重要です。

このように、async/awaitを使った非同期処理のデバッグには、コンソールログやブレークポイントの活用が有効です。特に、非同期処理特有のエラーの追跡には、専用のデバッガや適切なエラーハンドリングが重要です。

非同期処理の応用例


async/awaitは、単純な非同期タスクの実行だけでなく、より複雑なアプリケーションでもその力を発揮します。ここでは、リアルタイムチャットアプリケーションやファイル読み込み処理など、async/awaitを活用したいくつかの応用例を紹介します。

リアルタイムチャットアプリケーション


リアルタイムチャットアプリケーションでは、サーバーとの非同期通信が不可欠です。メッセージの送受信を行うために、WebSocketやAPIリクエストを非同期で処理する必要があります。async/awaitを使うことで、チャットアプリケーション内のメッセージ送信処理をシンプルかつ効率的に管理できます。

async function sendMessage(message: string) {
  try {
    const response = await fetch('https://api.chatapp.com/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ message })
    });

    if (!response.ok) {
      throw new Error(`メッセージ送信に失敗しました: ${response.status}`);
    }

    const result = await response.json();
    console.log('メッセージが送信されました:', result);
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
}

この例では、メッセージ送信が成功するまでawaitを使って非同期処理を順次実行しています。エラーハンドリングもtry/catchで適切に行い、送信が失敗した場合にはエラーメッセージを表示します。

ファイル読み込みの例


非同期でファイルを読み込む場合、async/awaitを使うことで処理の流れがシンプルになります。大きなファイルやリモートにあるファイルを読み込む際には、非同期処理が欠かせません。

async function readFile(filePath: string) {
  try {
    const response = await fetch(filePath);

    if (!response.ok) {
      throw new Error(`ファイルの読み込みに失敗しました: ${response.status}`);
    }

    const fileContent = await response.text();
    console.log('ファイル内容:', fileContent);
  } catch (error) {
    console.error('ファイル読み込みエラー:', error);
  }
}

readFile('/path/to/file.txt');

この例では、fetchを使用してファイルの内容を非同期で取得し、結果をテキストとして取得します。大きなファイルやリモートファイルを読み込む際、処理の進行が一時停止しないため、UIの応答性が向上します。

データベースアクセスの例


サーバーサイドアプリケーションでは、データベースとの通信も非同期処理が必要です。async/awaitを使うことで、データの取得や更新をスムーズに行うことができます。

async function fetchUserDataFromDB(userId: string) {
  try {
    const user = await db.collection('users').findOne({ id: userId });
    if (!user) {
      throw new Error('ユーザーが見つかりません');
    }

    console.log('ユーザーデータ:', user);
    return user;
  } catch (error) {
    console.error('データベースエラー:', error);
  }
}

この例では、データベースのクエリを非同期で実行し、結果が返されるまでawaitで待ちます。エラーハンドリングも行っており、データが存在しない場合には適切なエラーメッセージが表示されます。

非同期処理を組み合わせた複雑なシナリオ


非同期処理をさらに応用した例として、複数の非同期タスクを同時に実行し、結果を組み合わせるシナリオがあります。例えば、複数のAPIからデータを取得し、それを1つの画面にまとめて表示する場合です。

async function fetchDashboardData() {
  try {
    const [userInfo, stats, notifications] = await Promise.all([
      fetch('https://api.example.com/user'),
      fetch('https://api.example.com/stats'),
      fetch('https://api.example.com/notifications')
    ]);

    const user = await userInfo.json();
    const statsData = await stats.json();
    const notificationData = await notifications.json();

    console.log('ユーザー情報:', user);
    console.log('統計情報:', statsData);
    console.log('通知:', notificationData);
  } catch (error) {
    console.error('ダッシュボードデータの取得に失敗しました:', error);
  }
}

fetchDashboardData();

この例では、Promise.allを使用して、複数のAPIリクエストを並行して実行し、全てのデータが取得できた後に画面に表示しています。こうした実装により、複数の非同期タスクを効率的に処理できます。

まとめ


async/awaitを活用することで、リアルタイムチャットやファイル操作、データベースアクセスなど、さまざまな非同期タスクを効率的に管理できます。特に、複雑な非同期処理を扱う場合でも、コードをシンプルに保ち、エラーハンドリングやデバッグを容易に行うことができます。これにより、非同期処理の応用範囲は広がり、より高度なアプリケーション開発が可能となります。

非同期処理を学ぶ際のよくあるミス


async/awaitを使った非同期処理は非常に便利ですが、初学者や慣れていない開発者が陥りやすいミスもあります。これらのミスを理解し、回避することで、非同期処理をより効果的に使いこなせるようになります。ここでは、よくあるミスとその解決策を紹介します。

1. awaitを使い忘れる


async関数の中でPromiseを処理する際に、awaitを使わずにそのままPromiseオブジェクトを返してしまうミスがあります。awaitを使わないと、Promiseが解決されるまで待たずに次の処理に進んでしまい、意図した結果が得られないことがあります。

async function fetchData() {
  // awaitを忘れる
  const response = fetch('https://api.example.com/data');  // Promiseが返される
  console.log(response);  // Promiseオブジェクトが表示される
}

解決策: 必ずawaitを使って非同期処理が完了するのを待つようにします。

async function fetchData() {
  const response = await fetch('https://api.example.com/data');  // 解決された結果を待つ
  console.log(response);
}

2. async関数の返り値を待たない


async関数は常にPromiseを返しますが、thenやawaitでその結果を処理しないまま放置してしまうケースがあります。この場合、非同期処理の完了を待たずに次の処理が進んでしまい、バグの原因となります。

async function getUserData() {
  return await fetch('https://api.example.com/user');
}

// 関数の結果を待たない
const userData = getUserData();
console.log(userData);  // Promiseが返される

解決策: 非同期関数の結果をきちんとawaitやthenで待ってから処理を進めます。

async function getUserData() {
  return await fetch('https://api.example.com/user');
}

const userData = await getUserData();
console.log(userData);  // 取得したデータを表示

3. エラーハンドリングを忘れる


非同期処理は失敗する可能性があるため、エラーハンドリングが非常に重要です。しかし、try/catchブロックでエラーをキャッチするのを忘れてしまうことがあります。これにより、エラーが発生してもユーザーに適切なフィードバックが提供されず、アプリケーションが予期せぬ挙動を示す可能性があります。

async function fetchData() {
  const response = await fetch('https://api.example.com/data');  // エラーが起こるかもしれない
  const data = await response.json();
  console.log(data);
}

解決策: 必ずtry/catchを使ってエラーが発生した際に適切な処理を行います。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('データの取得に失敗しました:', error);
  }
}

4. 複数の非同期処理を順次実行してしまう


非同期処理を複数行う際に、awaitを使用してそれらを順次実行してしまい、処理全体のパフォーマンスが低下することがあります。各非同期処理が互いに依存していない場合は、並行して実行する方が効率的です。

async function fetchAllData() {
  const data1 = await fetch('https://api.example.com/data1');
  const data2 = await fetch('https://api.example.com/data2');
  const data3 = await fetch('https://api.example.com/data3');
  // 各リクエストが順次実行され、時間がかかる
}

解決策: Promise.allを使って並行して実行し、全ての非同期処理が完了するのを待ちます。

async function fetchAllData() {
  const [data1, data2, data3] = await Promise.all([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2'),
    fetch('https://api.example.com/data3')
  ]);
  // 並行して実行されるため、処理時間が短縮される
}

5. 関数の同期/非同期の扱いを混同する


async関数の中で行う処理がすべて非同期になると誤解し、awaitを不要な場所で使用したり、逆に非同期処理を同期的に扱ってしまうことがあります。このようなミスは、プログラムの意図しない挙動を引き起こします。

async function getData() {
  const data = await processData();  // processDataが同期処理の場合、awaitは不要
  console.log(data);
}

解決策: 必要に応じてawaitを使用し、同期処理と非同期処理を適切に区別します。同期処理にはawaitを使わず、非同期処理にのみ使用します。

async function getData() {
  const data = processData();  // これは同期処理なのでawaitは不要
  console.log(data);
}

まとめ


非同期処理を学ぶ際にありがちなミスとして、awaitの使い忘れやエラーハンドリングの不備、複数の非同期タスクの順次実行などがあります。これらの問題を避けるためには、非同期処理の基本をしっかりと理解し、async/awaitを正しく使うことが重要です。

演習問題


async/awaitを使った非同期処理の理解を深めるために、いくつかの演習問題を用意しました。これらの問題に取り組むことで、async/awaitの基本的な使い方やエラーハンドリング、並行処理の実装方法について実践的に学ぶことができます。

問題1: APIリクエストを実行し、エラーハンドリングを追加する


次のコードを参考にして、fetchを使用してAPIリクエストを行い、データを取得する処理を作成してください。また、エラーハンドリングを追加し、リクエストが失敗した場合にエラーメッセージを表示するようにしてください。

async function fetchData() {
  // APIリクエストを実行してデータを取得する
}

要件:

  • APIのURLはhttps://jsonplaceholder.typicode.com/posts/1を使用する
  • レスポンスをJSON形式に変換して表示する
  • リクエストが失敗した場合はエラーメッセージを表示する

問題2: 複数の非同期処理を並行して実行する


以下の3つのAPIエンドポイントにリクエストを送り、それらを並行して実行するプログラムを作成してください。Promise.allを使用して、全てのリクエストが完了したら結果を表示します。

  • https://jsonplaceholder.typicode.com/posts/1
  • https://jsonplaceholder.typicode.com/posts/2
  • https://jsonplaceholder.typicode.com/posts/3
async function fetchMultipleData() {
  // 並行してAPIリクエストを送信し、結果を表示する
}

要件:

  • 3つのAPIリクエストを並行して実行する
  • 全てのレスポンスを取得し、JSON形式に変換して表示する

問題3: 非同期関数の結果を処理する


次の非同期関数getUserDataを呼び出し、ユーザー情報を取得した後に、そのデータを使ってprocessUserData関数を呼び出してデータを処理するプログラムを作成してください。

async function getUserData() {
  return {
    id: 1,
    name: 'John Doe',
    email: 'johndoe@example.com'
  };
}

function processUserData(user) {
  console.log('ユーザーデータを処理中:', user);
}

要件:

  • awaitを使って非同期関数の結果を待ち、データを取得する
  • processUserData関数を呼び出して、取得したユーザーデータを引数として渡す

問題4: ファイルの読み込みを非同期で行う


非同期関数を使用して、ローカルファイルを読み込むプログラムを作成してください。ファイルのパスは/path/to/file.txtとし、ファイルの内容をコンソールに表示するようにします。

async function readFileAsync(filePath) {
  // 非同期でファイルを読み込み、内容を表示する
}

要件:

  • 非同期でファイルを読み込み、その内容を表示する
  • ファイルが見つからない場合や読み込みに失敗した場合には、エラーメッセージを表示する

まとめ


これらの演習問題は、async/awaitの基本的な使い方、エラーハンドリング、並行処理の実装方法を実践的に学ぶためのものです。実際にコードを書いて解答することで、async/awaitを使った非同期処理の理解を深め、応用力を養うことができます。

まとめ


本記事では、TypeScriptにおけるasync/awaitを使った非同期処理の基本的な書き方から、エラーハンドリングや並行処理の実装方法、応用例や演習問題に至るまで詳しく解説しました。async/awaitは、複雑な非同期処理をシンプルで可読性の高いコードに変える強力なツールです。非同期処理を効果的に使いこなすことで、より応答性の高いアプリケーションを開発することができます。

TypeScript
非同期処理 async/await TypeScript

コメント

コメントする

目次
  1. 非同期処理とは
    1. 同期処理との違い
    2. なぜ非同期処理が重要か
  2. Promiseの基本
    1. Promiseの三つの状態
    2. Promiseの基本構文
    3. Promiseの使用例
  3. async/awaitの基本的な使い方
    1. async/awaitの基本構文
    2. 実際の使用例
    3. async/awaitのポイント
  4. 非同期関数のエラーハンドリング
    1. try/catchを使ったエラーハンドリングの基本
    2. 非同期エラーの種類
    3. エラーハンドリングのベストプラクティス
  5. async/awaitを用いた並行処理
    1. Promise.allの基本的な使い方
    2. Promise.allの利点
    3. エラーハンドリングの注意点
    4. Promise.allSettledによる柔軟なエラーハンドリング
  6. APIリクエストの例
    1. 基本的なAPIリクエスト
    2. APIリクエストの詳細
    3. APIリクエストの実用性
  7. デバッグ方法
    1. 基本的なデバッグ手法
    2. 非同期特有のデバッグ課題
    3. async/awaitを使ったデバッグツール
    4. 非同期処理のデバッグ時の注意点
  8. 非同期処理の応用例
    1. リアルタイムチャットアプリケーション
    2. ファイル読み込みの例
    3. データベースアクセスの例
    4. 非同期処理を組み合わせた複雑なシナリオ
    5. まとめ
  9. 非同期処理を学ぶ際のよくあるミス
    1. 1. awaitを使い忘れる
    2. 2. async関数の返り値を待たない
    3. 3. エラーハンドリングを忘れる
    4. 4. 複数の非同期処理を順次実行してしまう
    5. 5. 関数の同期/非同期の扱いを混同する
    6. まとめ
  10. 演習問題
    1. 問題1: APIリクエストを実行し、エラーハンドリングを追加する
    2. 問題2: 複数の非同期処理を並行して実行する
    3. 問題3: 非同期関数の結果を処理する
    4. 問題4: ファイルの読み込みを非同期で行う
    5. まとめ
  11. まとめ