［JavaScript］async、await

公開日：2026-03-24
更新日：2026-03-24

1. 概要

async、await は、非同期処理を同期処理のように書ける構文です。

2. サンプル１

2.1 コード

コード

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>async, await</title>
    <script type="module">
      async function getData() {
        return new Promise((resolve, reject) =>
          setTimeout(() => {
            resolve({ id: 1, name: "太郎" });
          }, 1000),
        );
      }

      const result = await getData(); // Promise が完了するまで待機

      console.log("1秒後");
      console.log(result); //{id: 1, name: '太郎'}
    </script>
  </head>
  <body>
    async, await
  </body>
</html>

2.2 説明

async を付けた関数は、Promise を返す必要があります。

その関数を await を付けて呼び出すと、戻り値の Promise の resolve() が呼ばれるまで待機します。

resolve() が呼ばれると、resolve() の引数を await を付けて呼び出した関数の戻り値として返します。

上記の場合、getData() 自体は Promise を返しますが、await getData() にすると、resolve() に渡した値を返します。

簡単に言うと、async の関数は、resolve() で戻り値を返します。

3. サンプル２

3.1 コード

コード

    <script type="module">
      async function getData() {
        return new Promise((resolve, reject) =>
          setTimeout(() => {
            resolve({ id: 1, name: "太郎" });
          }, 1000),
        );
      }

      const result = getData(); // await を付けない場合は、Promise の完了を待たない
      console.log(result); // Promise {<pending>}

      result.then((result) => {
        console.log("1秒後");
        console.log(result);
      });
    </script>

3.2 説明

await を付けずに getData() を呼ぶと、Promise の完了を待たずに Promise を返します。

Promise のため、then() を使って、resolve() が呼ばれた後の処理を書くことができます。

4. サンプル３

4.1 コード

コード

    <script type="module">
      async function getData() {
        return new Promise((resolve, reject) =>
          setTimeout(() => {
            resolve({ id: 1, name: "太郎" });
          }, 1000),
        );
      }

      async function showData() {
        // await で、非同期処理が完了するまで待機
        const result = await getData();

        console.log("1秒後");
        console.log(result); // {id: 1, name: '太郎'}
      }

      const promise = showData(); // await を付けない場合は Promise が返る
      console.log(promise); // Promise {<pending>}
      console.log("先に動く");
    </script>

実行結果

Promise {<pending>}
先に動く
1秒後
{id: 1, name: '太郎'}

4.2 説明

showData() の中で await getData() を呼んでいます。

await が付いているため、getData() の後ろの処理は resolve() が呼ばれるまで実行されませんが、

処理自体は showData() を抜けて、処理がそのまま続行されます。

そのため、console.log("先に動く") が先に動きます。

そして、resolve() が呼ばれると、await getData() から再開されます。

await getData() 以降の処理が、then(() => { 処理 } ) となっているイメージです。

ちなみに、関数内で await を使用している場合は、関数に async を付ける必要があります。

そのため、showData() は async が付いています。但し、呼ぶ際には、await を付ける必要はありません。

5. サンプル４

5.1 コード

コード

    <script type="module">
      async function getData() {
        const response = await fetch("./data.json"); // fetch が完了するまで待機

        if (!response.ok) {
          throw new Error(`Error:${response.status}`);
        }

        const data = await response.json(); // json が完了するまで待機
        return data;
      }

      const result = await getData();
      console.log(`${result.id} : ${result.name} `);
    </script>

data.json

コード

{
  "id": 1,
  "name": "太郎"
}

実行結果

1 : 太郎

5.2 説明

fetch() で、data.json を非同期で読み込みます。

読み込みが完了すると、Response が返ります。

また、response.json() で、json を解析してオブジェクトに変換します。

変換が完了すると、オブジェクトが返ります。

ちなみに、async と await を使わずに、次のように書くこともできます。

コード

    <script type="module">
      function getData() {
        fetch("./data.json")
          .then((response) => {
            if (!response.ok) {
              throw new Error(`Error:${response.status}`);
            }

            const promise = response.json();
            return promise;
          })
          .then((result) => {
            console.log(`${result.id} : ${result.name} `); // 1 : 太郎
          });
      }

      getData();
    </script>

＜前の記事

Promise について