JavaScript

JavaScriptのasyncとawaitで、Promiseを使う非同期処理を順番どおりに読みやすく書く方法を説明します。

A keyword that lets you write time-taking tasks in order without stopping the rest of your code.

async

async とは？

async は「非同期（ひどうき）」処理を簡単に書けるようにするためのキーワードです。

JavaScriptは、重たい処理があると他の動きを止めてしまうことがあります。たとえばサーバーからデータを取ってくる処理などです。

そのような時間のかかる処理を、ほかの動きを止めずに並行して進めたいときに使うのが「非同期処理」。

async を使うと、その「非同期処理」を見た目は普通のコードのように書けるようになります。

どう使うのか

基本的には「関数の前につける」と覚えてください。

JavaScript

async function fetchData() {
    const response = await fetch("https://example.com/data.json");
    const data = await response.json();
    console.log(data);
}

ポイントはこの2つです：

async を関数の前につけると、その関数は自動的に「Promise（約束オブジェクト）」を返します。
→ 呼び出し側は .then() や await を使って結果を受け取ります。
関数の中では await が使えるようになる
→ await は「結果が返ってくるまで待つ」という意味です。

例え話で理解する

async は「Promiseを返す関数」を作る魔法の印のようなものです。

「この関数の中は非同期の世界ですよ」と宣言する感じです。

そしてその中で await を使えば、「結果が出るまでちょっと待ってね」と書けます。

実際の使い方

JavaScript

async function showMessage() {
    console.log("1: はじめに");
    await new Promise(resolve => setTimeout(resolve, 2000)); // 2秒待つ
    console.log("2: 2秒たちました");
}

showMessage();

もし async を使わないと、このような「待ってから次を実行」という流れを.then() を何重にも書く必要があり、見た目がごちゃごちゃしてしまいます。

async/await を使えば、自然な順番で書けて読みやすくなるのです。

注意点

await は必ず async 関数の中でしか使えません。

外で使いたい場合は、モジュール（type="module"）にする必要があります。

async 関数は必ず Promise を返します。

戻り値が普通の値でも、自動的に Promise.resolve() に包まれます。