先生と生徒の会話形式で理解しよう

生徒

「TypeScriptで時間がかかる処理を安全に書く方法ってありますか？」

先生

「あります。TypeScriptでは、ESNextの非同期構文であるasync/awaitを使うことで、順番が大切な処理をわかりやすく書けます。」

生徒

「非同期って難しそうですが、初心者でも大丈夫ですか？」

先生

「大丈夫です。身近な例えを使いながら、基本から順番に説明します。」

1. 非同期処理とは何か

TypeScriptやJavaScriptには、非同期処理という考え方があります。非同期処理とは、「結果がすぐに返ってこない処理」を待ちながら、ほかの作業も進められる仕組みです。例えば、インターネットからデータを取得する、ファイルを読み込む、といった処理は少し時間がかかります。

日常生活に例えると、電子レンジでご飯を温めている間に、机を片付けるようなものです。温め終わるまで何もできない状態を同期処理、待ちながら別のことができる状態を非同期処理と考えると理解しやすくなります。

2. ESNextのasync/awaitとは

async/awaitは、ESNextで使える非同期構文です。難しそうな名前ですが、「待つ」という意味を持つ構文だと考えてください。 asyncは「この関数の中では、待つ処理があります」という宣言で、awaitは「ここで処理が終わるまで待ちます」という合図です。

TypeScriptはESNextの構文をそのまま使えるため、JavaScriptと同じ書き方でasync/awaitを利用できます。さらにTypeScriptでは、型情報によって戻り値がわかりやすくなり、間違いにも気づきやすくなります。

async/awaitを使うには、まず関数にasyncを付けます。これにより、その関数は「非同期関数」となります。非同期関数は、必ずPromiseという特別な箱に入った結果を返します。 Promiseとは、「将来、結果が入りますよ」という約束の箱だと考えてください。


async function getMessage(): Promise<string> {
    return "こんにちは";
}

この例では、文字列を返していますが、実際にはPromiseという箱に入って返されます。 TypeScriptでは戻り値の型を指定できるため、何が返ってくるのかが一目でわかります。

awaitは、非同期処理が終わるまで待つための命令です。 awaitを使うことで、処理の流れを上から下へ順番に書けるようになります。これにより、初心者でも読みやすいコードになります。


async function showMessage() {
    const message = await getMessage();
    console.log(message);
}


こんにちは

awaitがあることで、「先に結果を受け取ってから表示する」という流れが自然に書けています。もしawaitがなければ、結果が届く前に表示しようとしてしまい、正しく動きません。

TypeScriptとESNextのasync/awaitを組み合わせると、多くの利点があります。まず、型があることで「何が返ってくるのか」「どこで間違えたのか」がわかりやすくなります。また、複数の非同期処理を順番に実行する場合でも、読みやすさが保たれます。

プログラミング未経験の人にとって、処理の流れが見えることはとても重要です。 async/awaitは、難しい非同期処理を、普通の文章を読むような感覚で書ける構文だと言えます。

初心者がよくつまずく点として、「awaitはどこでも使えるわけではない」という点があります。 awaitは、必ずasyncが付いた関数の中でしか使えません。これはルールなので、覚えておくとエラーで悩む時間が減ります。

また、非同期処理は「時間がかかるかもしれない処理」に使うものです。すぐ終わる処理に無理に使う必要はありません。必要な場面で使うことで、プログラムが整理され、理解しやすくなります。

TypeScriptは、ESNextの新しい構文を安全に使うための道具です。 async/awaitもその一つで、JavaScriptの便利な機能を、型付きで安心して利用できます。これにより、大きなプログラムでも動作を想像しやすくなります。

非同期構文を理解することは、Webアプリケーションやツール開発の基礎になります。焦らず、まずは「待つ処理を順番に書ける仕組み」だと理解することが大切です。