JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptの非同期関数（async/await）をサンプルコード付きで解説

非同期関数（async function）とは

JavaScriptの非同期関数は、asyncキーワードを付けて定義する特別な関数です。ES2017（ES8）で標準仕様に組み込まれ、従来のコールバック関数よりも簡潔で読みやすい形でPromiseを扱えるようにするために導入されました。

async関数の内部ではawaitキーワードを使用できます。awaitを付けた箇所では処理の流れが一時停止し、対象のPromiseが完了（resolveまたはreject）するまで待機します。この仕組みにより、非同期処理をあたかも同期処理のような直感的なコードとして書ける点が最大のメリットです。

押さえておきたいポイント

  • asyncを付けた関数は、戻り値が必ずPromiseになる
  • awaitはasync関数の中でのみ使用できる
  • Promiseの結果が返るまで、後続の行の処理を待機できる
  • エラー処理には通常のtry...catch文がそのまま使える

JavaScript 非同期関数のサンプルコード

以下は、ボタンをクリックすると約1.5秒後に「Hello World」という文字列を表示するシンプルなデモです。setTimeoutを使ってPromiseを返す関数を用意し、async関数の中でawaitして結果を受け取っています。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        color: blueviolet;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Asynchronous functions in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the function asyncFunc</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    function displayText() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve("Hello World");
            }, 1500);
        });
    }
    async function asyncFunc() {
        resEle.innerHTML = await displayText();
    }
    BtnEle.addEventListener("click", () => {
        asyncFunc();
    });
</script>
</body>
</html>

実行結果

ページを開いた直後は、まだ何も表示されていません。

【初心者向け】JavaScriptの非同期関数（async/await）をサンプルコード付きで解説

「CLICK HERE」ボタンをクリックして1.5秒ほど待つと、awaitがdisplayText()のPromiseの解決を待ち、その結果である「Hello World」が画面に表示されます。もしawaitを使わずに書いた場合、Promiseオブジェクトそのものが表示されてしまうため、awaitが結果を取り出す役割を果たしていることが分かります。

【初心者向け】JavaScriptの非同期関数（async/await）をサンプルコード付きで解説


  1. 【初心者向け】JavaScriptでオブジェクトのディープクローンを作成する方法を実例付きで解説

    はじめにJavaScriptでは、単純な代入（=）やObject.assign()などによるコピーはシャローコピー（浅いコピー）となり、元のオブジェクトとプロパティへの参照が共有されてしまいます。そのため、一方を変更するともう一方にも影響が及びます。これを防ぐには、参照関係まで完全に切り離したディープクローン（深いコピー）を作成する必要があります。本記事では、JSON.parse(JSON.stringify()) を使ったシンプルな方法で、オブジェクトのディープクローンを作成する例を紹介します。ディープクローンのサンプルコード以下のコードでは、ボタンをクリックすると元のオブジェクト obj

  2. JavaScriptの高階関数とは？基本概念とサンプルコードをわかりやすく解説

    高階関数とは？JavaScriptでは、関数はオブジェクトとして扱われます。そのため、関数を別の関数に引数として渡したり、関数の戻り値として別の関数を返したりすることが可能です。JavaScriptの関数は「第一級関数（ファーストクラス関数）」と呼ばれ、変数・オブジェクト・配列などに自由に格納できるという特徴を持っています。そして、関数を引数として受け取る、戻り値として返す、あるいはその両方を行う関数のことを「高階関数（Higher Order Function）」と呼びます。代表的な高階関数には、map()、filter()、reduce()、forEach()などがあります。これらを活用す