TypeScript中級

中級 TypeScriptで学ぶ非同期処理｜解説編

 

導入

非同期処理は、現代のウェブアプリケーションにおいて不可欠な要素です。特に、APIからデータを取得する際や、ユーザーインターフェースの応答性を保つために、非同期処理の理解は非常に重要です。本記事では、TypeScriptを用いた非同期処理の具体的なシチュエーションに焦点を当て、実務での活用方法を探ります。

教科書レベルの解説（非同期処理）

重要な概念の整理

非同期処理とは、処理が完了するのを待たずに次の処理を進めることを指します。JavaScriptでは、コールバック、Promise、async/awaitといった手法があり、TypeScriptでも同様のアプローチが採用されます。特に、async/awaitは可読性が高く、エラーハンドリングも容易であるため、実務での利用が増えています。

コード例（TypeScript）


async function fetchUserData(userId: string): Promise {
    try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Fetching user data failed:', error);
        throw error;
    }
}

コードの行ごとの解説

  1. async function fetchUserData(userId: string): Promise {
    この行では、非同期関数を定義しています。引数としてユーザーIDを受け取り、Promise型のUserオブジェクトを返します。
  2. const response = await fetch(`https://api.example.com/users/${userId}`);
    fetch関数を使用して、指定したユーザーIDのデータを取得します。awaitを使用することで、fetchの完了を待ちます。
  3. if (!response.ok) {
    レスポンスが正常でない場合、エラーをスローします。これにより、後続の処理を防ぎます。
  4. const data = await response.json();
    レスポンスのJSONデータを取得します。ここでもawaitを使用して、非同期処理を待ちます。
  5. return data;
    取得したデータを関数の戻り値として返します。
  6. } catch (error) {
    tryブロック内でエラーが発生した場合、catchブロックが実行されます。
  7. console.error(‘Fetching user data failed:’, error);
    エラーメッセージをコンソールに出力します。これはデバッグに役立ちます。
  8. throw error;
    エラーを再スローすることで、呼び出し元で適切に処理できるようにします。

解説編

非同期処理を扱う際には、エラーハンドリングの重要性が特に際立ちます。API通信においては、ネットワークの問題やAPIの変更によるエラーが発生することが多いため、適切なエラーハンドリングが求められます。上記のコード例では、fetch関数が失敗した場合にエラーをログに記録し、再スローすることで、呼び出し元でのさらなる処理を可能にしています。このように、エラー処理をしっかりと設計することで、アプリケーションの信頼性を高めることができます。また、Promise.allを使用して複数の非同期処理を同時に実行する場合など、より複雑なシナリオにも対応できるようにしておくことが重要です。

まとめ

  • 非同期処理は、ユーザーインターフェースの応答性を保つために不可欠です。
  • async/awaitを利用することで、非同期コードの可読性を向上させることができます。
  • エラーハンドリングを適切に設計することで、アプリケーションの信頼性を向上させることが可能です。
RELATED POST