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

JavaScriptのasync（非同期）関数とは？基本構文と使い方をわかりやすく解説

JavaScriptにおける async 関数とは、その名の通り非同期処理を定義するための関数です。関数の宣言に async を付けることで、その関数は常に Promise（AsyncFunctionオブジェクト） を返すようになります。

async関数の特徴

  • 呼び出し結果は必ず Promise として返される
  • 関数内で await を使うことで、Promise の完了を待ってから次の処理に進める
  • コールバック地獄を避け、非同期処理を同期処理のように直感的に書ける

構文（シンタックス）

async関数は以下のように宣言します。

async function 関数名([引数1[, 引数2[, ... 引数n]]]) {
    実行したい処理
}

関数式として定義する場合は、次のように書くこともできます。

const 関数名 = async function ([引数]) {
    実行したい処理
};

使用例：5秒後に計算結果を出力する

ここでは、Promiseを使って5秒待機した後に値を返す関数を作成し、async/await でその結果を掛け合わせる例を見てみましょう。

<html>
    <body>
       <script>
          // 5秒後に指定した数値を返すPromiseを返す関数
          function displayFunction(num) {
             return new Promise(resolve => {
                setTimeout(() => {
                   resolve(num);
                }, 5000);
             });
          }
          // async関数：awaitでPromiseの完了を待つ
          async function add2(num) {
             const x = displayFunction(7);
             const y = displayFunction(5);
             return num * await x * await y;
          }
          add2(15).then(result => {
             document.write("乗算の結果（5秒後）： " + result);
          });
       </script>
    </body>
</html>

コードの解説

  1. displayFunction(7) と displayFunction(5) は、それぞれ5秒後に7と5を解決するPromiseを生成します。
  2. async関数 add2 内では、await によって両方のPromiseが完了するのを待ちます。
  3. 両方の結果が揃った時点で 15 × 7 × 5 = 525 という計算が実行されます。
  4. 最終的な結果は .then() を通じて画面に出力されます。

まとめ

async/await構文を使うことで、Promiseベースの非同期処理を、あたかも同期的なコードのように読みやすく記述できます。APIリクエストやタイマー処理など、時間のかかる処理を扱う際にはぜひ活用してみてください。

  1. JavaScriptの部分関数（Partial Function）とは？仕組みと実装例をわかりやすく解説

    部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。 この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。 コード例 以下

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2