TypeScriptで非同期処理を完璧に理解するための実例コード7選

はじめに

TypeScriptは現代のウェブ開発において欠かせない存在となっています。

特に、非同期処理の理解はWebアプリケーションの動的な動作を制御するための核心となっています。

この記事では、TypeScriptを用いた非同期処理の手法や技術を7つの選りすぐりのトピックで詳しく解説します。

実践的なサンプルコードを交えながら、初心者から中級者まで、非同期処理の深い理解を目指します。

このガイドを通して、あなたも非同期処理のプロフェッショナルを目指しましょう！

●TypeScriptとは

TypeScriptはJavaScriptのスーパーセットとして、静的型チェックやクラスベースのオブジェクト指向プログラミングなどの機能を追加したプログラミング言語です。

Microsoftが開発し、オープンソースとして公開されているため、多くの開発者に受け入れられています。

○TypeScriptの特徴と利点

TypeScriptの最大の特徴は、静的型システムを持つことです。

これにより、コードの品質向上やバグの早期発見が可能となります。

また、大規模なプロジェクトでも安定したコードベースを保つことができるため、エンタープライズレベルのアプリケーション開発に適しています。

●非同期処理の基本

非同期処理は、特定のタスクが完了するのを待たずに次のタスクに進むことができる処理方法です。

この処理方法は、ユーザー体験の向上やパフォーマンスの最適化に寄与します。

○同期処理と非同期処理の違い

同期処理は、一つのタスクが完了するまで次のタスクが実行されない処理方法です。

これに対して、非同期処理では複数のタスクを同時にまたは並列に実行することが可能です。

この非同期処理の特性により、効率的な処理が期待できます。

○非同期処理のメリットとデメリット

非同期処理のメリットは、高速化やユーザー体験の向上です。

データを取得するような重いタスクをバックグラウンドで行いながら、ユーザーインターフェースは応答を維持することができます。

一方、デメリットとしては、コードが複雑になることや、エラーハンドリングが難しくなることが挙げられます。

●TypeScriptの非同期処理の仕組み

近年のWeb開発において、非同期処理は避けては通れない重要な技術となっています。

特にTypeScriptを使ったアプリケーション開発においては、非同期処理の書き方やその取り扱い方がとても重要です。

今回は、TypeScriptでの非同期処理の基本から、その背後にある仕組みまでを詳しく解説していきます。

○Promiseの基本

JavaScriptやTypeScriptで非同期処理を行う際の中心的存在となるのが、Promiseです。

Promiseは「将来の完了するかもしれない非同期処理の結果」として考えられます。

では、実際にTypeScriptでPromiseをどのように扱うか、詳細な説明とサンプルコードとともに見ていきましょう。

□サンプルコード1：TypeScriptでのPromiseの基本形

// Promiseの作成
const samplePromise: Promise<string> = new Promise((resolve, reject) => {
    // 非同期処理を模倣するためにsetTimeoutを使用
    setTimeout(() => {
        const isSuccess = Math.random() > 0.5;

        if (isSuccess) {
            // 成功の場合
            resolve("成功！");
        } else {
            // 失敗の場合
            reject(new Error("失敗…"));
        }
    }, 1000);
});

// Promiseの実行と結果の処理
samplePromise
    .then((message) => {
        console.log(message); // "成功！" と出力される場合があります。
    })
    .catch((error) => {
        console.error(error); // Error: 失敗… と出力される場合があります。
    });

このコードでは、新しいPromiseを作成しています。

この例では、1秒後にランダムに成功するか失敗するかの非同期処理を模倣しています。

非同期処理が成功した場合、resolve関数を呼び出してPromiseを成功状態に遷移させます。

一方、失敗した場合はreject関数を呼び出してPromiseを失敗状態に遷移させます。

次に、.thenメソッドでPromiseが成功したときの処理を、.catchメソッドでPromiseが失敗したときの処理をそれぞれ記述しています。

このコードを実行すると、非同期処理の結果に応じて「成功！」または「Error: 失敗…」というメッセージがコンソールに出力されます。

○async/awaitの使い方

TypeScriptでの非同期処理を扱う上で、async/awaitは非常に便利な機能となっています。

ここでは、async/awaitの基本的な使い方から、その背後にある仕組みまでを詳しく解説していきます。

特に初心者の方でも理解しやすいよう、具体的なサンプルコードとともに説明を進めていきます。

async/awaitは、ES2017(ES8)でJavaScriptに導入された機能で、TypeScriptでもそのまま利用することができます。

この機能の主な目的は、非同期処理をより直感的に、かつ読みやすく書くことができるようにすることです。

従来、JavaScriptやTypeScriptでの非同期処理は、コールバック関数やPromiseを用いて実装されてきました。

しかし、これらの方法ではコードがネストして複雑になりがちで、エラーハンドリングも難しかったです。

async/awaitは、このような問題を解決し、非同期処理を同期処理のようにシンプルに記述できるようになりました。

□サンプルコード2：async/awaitを用いた非同期処理

下記のコードは、async/awaitを使って非同期処理を行うシンプルな例を表しています。

この例では、非同期に2秒後に文字列”完了!”を返す関数を、async/awaitを使用して呼び出しています。

// 非同期に2秒後に文字列を返す関数
const fetchData = (): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("完了!");
    }, 2000);
  });
};

// async/awaitを使用した関数の定義
const main = async () => {
  console.log("非同期処理を開始します...");

  // awaitを使用して非同期処理の結果を待つ
  const result = await fetchData();
  console.log(result);  // "完了!"と表示される

  console.log("非同期処理が終了しました。");
};

main();

このコードでは、fetchData関数がPromiseを返し、2秒後に”完了!”という文字列をresolveします。

そして、main関数内でawaitを使って、この非同期処理が完了するまで待機しています。

上記のコードを実行すると、次の出力が得られることが期待されます。

コードを実行すると、まず”非同期処理を開始します…”が表示され、2秒後に”完了!”、その後に”非同期処理が終了しました。”という順番で出力されます。

このように、async/awaitを使うことで、非同期処理をまるで同期処理のように直列的に書くことができるのが大きな特長です。

また、エラーハンドリングもtry-catch文を用いて簡単に行うことができます。

●非同期処理の実践的な使い方

非同期処理は、JavaScriptやTypeScriptの強力な特性の一つであり、多くのWebアプリケーションの開発では欠かせないものとなっています。

特に、データベースの操作や外部APIの呼び出しの際には、非同期処理を上手く利用することで、アプリケーションのパフォーマンスやユーザー体験を向上させることが可能です。

ここでは、非同期処理の実践的な使い方について詳しく説明します。

○外部APIとの連携

現代のWebアプリケーションの開発では、外部のAPIを呼び出してデータを取得する場面が多くあります。

これらのAPI呼び出しはネットワークの遅延などの理由から、非同期処理として実装する必要があります。

具体的なサンプルコードとして、ある外部APIからデータを取得する非同期処理を紹介します。

□サンプルコード3：APIからデータを取得する非同期処理

// TypeScriptにおける非同期関数の宣言
async function fetchData(url: string): Promise<any> {
    // fetch関数を使用してAPIを呼び出し
    const response = await fetch(url);

    // レスポンスをJSON形式でパース
    const data = await response.json();

    return data;
}

// 使用例
fetchData("https://api.example.com/data")
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("データの取得に失敗しました：", error);
    });

このコードでは、fetch関数を使って外部APIを呼び出しています。

fetch関数は非同期関数であり、Promiseを返すので、その結果を待つためにawaitキーワードを使用しています。

この例では、https://api.example.com/dataというURLからデータを取得してコンソールに表示しています。

このコードを実行すると、APIから取得したデータがコンソールに表示されます。

もし何らかの理由でAPIの呼び出しに失敗した場合、エラーの情報がコンソールに表示されるでしょう。

○非同期処理のエラーハンドリング

非同期処理の際、何かの理由でエラーが発生する可能性が常にあります。

例えば、外部サーバーへのリクエストを行う際、サーバーがダウンしている場合やネットワークの障害など、予期しない問題が発生することが考えられます。

そこで、非同期処理におけるエラーハンドリングは、アプリケーションの安定性やユーザーエクスペリエンスの向上に不可欠な要素となります。

TypeScriptにおいても、非同期処理のエラーハンドリングは非常に重要です。

ここでは、try-catch構文を用いて、非同期処理中のエラーを適切にキャッチし、ハンドリングする方法について詳しく解説します。

□サンプルコード4：try-catchを使った非同期処理のエラーハンドリング

このコードではasyncとawaitを使って非同期処理を行い、その際のエラーハンドリングをtry-catch構文で行う例をhyしています。

この例では、非同期で外部APIを呼び出す関数を実行して、エラーが発生した場合にはエラーメッセージをログとして出力します。

// 非同期で外部APIを呼び出す関数
async function fetchData(url: string): Promise<any> {
    let response = await fetch(url);
    if (!response.ok) {
        throw new Error('ネットワークエラーが発生しました。');
    }
    return await response.json();
}

// エラーハンドリングを行う関数
async function handleFetchData(url: string) {
    try {
        let data = await fetchData(url);
        console.log(data);
    } catch (error) {
        // エラーが発生した場合、そのエラーメッセージを出力
        console.log('エラーが発生:', error.message);
    }
}

// 実際に関数を実行
handleFetchData('https://api.example.com/data');

このコードを実行すると、もしAPIが正常に応答した場合はデータがコンソールに出力されます。

しかし、何らかの理由でエラーが発生した場合、例えばURLが間違っている、APIサーバーがダウンしているなどの場合、catchブロックが実行され、「エラーが発生: ネットワークエラーが発生しました。」というメッセージがコンソールに出力されます。

●非同期処理の応用例

○非同期処理を組み合わせる

実際の開発では、複数の非同期処理を同時に行ったり、特定の順序で処理を実行する必要があります。

TypeScriptではPromise.allメソッドを使用することで、複数のPromiseをまとめて扱うことができます。

この手法は、例えば、複数のAPIからデータを同時に取得する際などに非常に役立ちます。

このコードではPromise.allを使って複数の非同期処理を同時に行い、全ての処理が完了した後に結果を取得するコードを表しています。

この例では3つの異なるAPIからデータを取得し、すべてのデータが取得できた後で結果をコンソールに表示しています。

const getDataFromAPI1 = (): Promise<string> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("データ1");
        }, 1000);
    });
};

const getDataFromAPI2 = (): Promise<string> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("データ2");
        }, 1500);
    });
};

const getDataFromAPI3 = (): Promise<string> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("データ3");
        }, 2000);
    });
};

async function fetchAllData() {
    const allData = await Promise.all([
        getDataFromAPI1(),
        getDataFromAPI2(),
        getDataFromAPI3(),
    ]);
    console.log(allData);
}

fetchAllData();

上記のサンプルコードでは、三つの非同期関数（getDataFromAPI1, getDataFromAPI2, getDataFromAPI3）があり、それぞれが1秒、1.5秒、2秒後に異なるデータを返すように設定されています。

fetchAllData関数内でPromise.allを使用してこれらの関数を同時に呼び出し、すべての非同期処理が完了したら結果をコンソールに表示しています。

上記のコードを実行すると、約2秒後にコンソールに["データ1", "データ2", "データ3"]という配列が表示されます。

この結果から、Promise.allは全ての非同期処理が完了するのを待ってから結果を返すことがわかります。

また、Promise.allは一つでもエラーが発生すると、全体としてcatchでエラーをキャッチすることができます。

これは、複数のAPIを同時に呼び出す際などに、特定のAPIからの応答がエラーであった場合でも全体の処理をエラーハンドリングすることができるため、非常に実用的です。

○非同期処理のキャンセル

非同期処理は、Webアプリケーションやモバイルアプリケーションでの体験を向上させるための重要なテクニックの一つです。

しかし、非同期処理を実行する間に、ユーザーが操作をキャンセルする場面も考えられます。

例えば、データをフェッチしている最中にユーザーが画面を離れる、あるいはユーザーが取得を中断したいと思うなどのケースです。

このような場合、不要な非同期処理を完了させることはリソースの浪費となります。

そのため、TypeScriptで非同期処理を行う際には、その処理を必要に応じてキャンセルできるように設計することが望ましいです。

ここでは、非同期処理をキャンセルするための方法を、詳細な説明とサンプルコードを交えて解説します。

□サンプルコード6：非同期処理のキャンセル方法

このコードでは、AbortControllerというWeb APIを使用して非同期処理をキャンセルする方法を紹介しています。

AbortControllerは、fetchなどの非同期処理と連携して、途中でのキャンセルをサポートするためのものです。

この例では、非同期処理を開始してから一定時間が経過したらキャンセルするというシナリオを想定しています。

// AbortControllerのインスタンスを作成
const controller = new AbortController();
const signal = controller.signal;

// 5秒後に非同期処理をキャンセル
setTimeout(() => {
  controller.abort();
}, 5000);

// 10秒かかる非同期処理
fetch("https://api.example.com/data", { signal })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    // キャンセルされた場合、こちらのブロックが実行される
    if (err.name === 'AbortError') {
      console.log("非同期処理がキャンセルされました");
    } else {
      console.error("エラー:", err);
    }
  });

この例では、AbortControllerのインスタンスを作成し、signalというプロパティをfetch関数に渡しています。

そして、5秒後にcontroller.abort()を呼び出すことで非同期処理をキャンセルしています。

キャンセル後、fetchのcatchブロック内で、エラーの名称がAbortErrorであるかどうかを確認することで、非同期処理がキャンセルされたのか、それとも他のエラーが発生したのかを判断しています。

このコードの結果、5秒後に”非同期処理がキャンセルされました”というメッセージがコンソールに表示されます。

一方、非同期処理が正常に完了する場合や、他のエラーが発生する場合はそれぞれ異なるメッセージが表示されるでしょう。

また、AbortControllerは主にfetchとの連携を想定していますが、他の非同期処理とも連携することが可能です。

その際は、非同期処理内部でsignal.abortedの状態を定期的にチェックし、このプロパティがtrueになった場合に非同期処理をキャンセルするようなロジックを実装する必要があります。

また、複数の非同期処理を同時にキャンセルする場合、一つのAbortControllerのインスタンスを共有することも考えられます。

これにより、複数の非同期処理を一度にキャンセルすることができます。

○非同期処理とイベントループ

非同期処理とは、タスクをバックグラウンドで実行させ、タスクの完了を待たずに次のタスクに進む処理のことを指します。

この非同期の特性は、ウェブアプリケーションやモバイルアプリケーションのようなレスポンスの速さが求められる環境で非常に有効です。

一方、イベントループは、この非同期処理を支える背後のメカニズムとなっています。

JavaScriptやTypeScriptにおけるイベントループは、主に非同期のコールバックを管理し、タスクの完了時にそれをメインのスレッドに戻す役割を担っています。

□サンプルコード7：イベントループを理解するシンプルな例

非同期処理とイベントループの関係を理解するためのシンプルなサンプルコードを紹介します。

この例では、setTimeoutを使って非同期に処理を実行しています。

console.log('1. これは最初に実行される');

setTimeout(() => {
    console.log('3. setTimeoutの中身が実行される');
}, 0);

console.log('2. これは2番目に実行される');

このコードでは、setTimeout関数を使って0ミリ秒後にコールバック関数を実行しています。

しかし、0ミリ秒と指定しても、setTimeoutのコールバックは他の全ての同期コードが実行された後に実行されることがわかります。

イメージとしては、setTimeoutのコールバックはイベントループによって「待機リスト」というキューに追加され、現在のスタックにある全てのタスクが終わった後に実行される、と理解すると良いでしょう。

この例から学べることは、非同期処理がどのようにメインスレッド上で順番に処理されていくか、そしてイベントループがそのタスクの実行順をどのように制御しているかということです。

このコードを実際に実行すると、コンソール上では次の出力結果が表示されます。

「1. これは最初に実行される」
「2. これは2番目に実行される」
「3. setTimeoutの中身が実行される」

非同期処理のタイミングやイベントループの動作を正確に理解することは、特に大規模なアプリケーション開発やパフォーマンスの最適化において、極めて重要です。

この知識をベースに、より高度な非同期処理のテクニックやパターンを学んでいくことで、効率的でレスポンシブなアプリケーションを実現することができます。

●注意点と対処法

○非同期処理中のメモリリーク

TypeScriptで非同期処理を行う際、メモリリークは避けるべき大きなトラブルの1つとなります。

メモリリークとは、不要なオブジェクトがメモリ上に残ってしまい、それが積み重なってシステムのパフォーマンスを低下させる現象を指します。

特に非同期処理を多用するWebアプリケーションやサーバーサイドの処理で注意が必要です。

□非同期処理におけるメモリリークの一例

let cache = {};

async function fetchData(id: number): Promise<any> {
    // データ取得処理（ダミー）
    await new Promise(res => setTimeout(res, 1000));

    // データをキャッシュに保持
    cache[id] = { data: 'data' + id };
}

setInterval(() => {
    fetchData(Math.random());
}, 500);

このコードでは、fetchData関数は1秒ごとに新しいデータをキャッシュcacheに追加しています。

しかし、このキャッシュは無限に増え続けるため、長時間稼働させるとメモリリークが引き起こされる可能性があります。

実際に上記のコードを実行すると、時間と共にcacheの大きさは増え続け、メモリを圧迫していくことが確認できます。

○非同期処理のタイムアウトの扱い方

非同期処理を実装する際には、外部のAPIやデータベースへのアクセスに時間がかかる場合が考えられます。

そのため、タイムアウトを設定して、一定時間以上経過しても処理が完了しない場合にはエラーとして処理を中断することが推奨されます。

□非同期処理におけるタイムアウトの実装例

function withTimeout<T>(ms: number, promise: Promise<T>): Promise<T> {
    const timeout = new Promise<T>((_, reject) => {
        setTimeout(() => {
            reject(new Error('タイムアウトしました。'));
        }, ms);
    });
    return Promise.race([promise, timeout]);
}

async function fetchData(): Promise<string> {
    // 3秒後にデータを返す（ダミー）
    return new Promise(res => setTimeout(() => res('data'), 3000));
}

withTimeout(2000, fetchData())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error.message);
    });

この例では、withTimeout関数を使ってfetchData関数の非同期処理にタイムアウトを設定しています。

2秒以内にfetchData関数の処理が完了しなければ、エラーが発生し、エラーメッセージが出力されます。

上記のコードを実行すると、「タイムアウトしました。」というエラーメッセージが表示されることが確認できます。

これにより、外部リソースへのアクセスに時間がかかる場合でも、システム全体のレスポンスが低下するのを防ぐことができます。

まとめ

TypeScriptの非同期処理は、JavaScriptの非同期処理を更に強力に、また型安全に扱うことができる機能です。

この記事を通して、非同期処理の基本的な概念から、TypeScript特有の処理、さらには実践的な使い方や注意点までを解説しました。

最後に、TypeScriptを使って非同期処理を扱うことのメリットを再認識しましょう。

型の安全性を保ちながら、効率的なコードを書くことができるのです。

このガイドを参考に、あなたもTypeScriptでの非同期処理のプロとしてのスキルを磨き上げてください。

初心者から中級者、さらには上級者まで、非同期処理に関する知識やテクニックは常にアップデートされ続けるものです。

そのため、常に新しい情報を取り入れ、学び続ける姿勢が大切です。

このガイドが、TypeScriptでの非同期処理の学習の一助となれば幸いです。