JavaScript

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つです：

  1. async を関数の前につけると、その関数は自動的に「Promise（約束オブジェクト）」を返します。
    → 呼び出し側は .then() や await を使って結果を受け取ります。
  2. 関数の中では 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() に包まれます。