JavaScriptの非同期処理についてサンプルコード付きで解説！

JavaScriptの非同期処理とは、あるタスクを実行している間に、他のタスクが別の処理を実行できる方式です。
例えば、データベースから値を取得するなどの通信を伴う処理は、通信状況によって時間がかかる可能性があります。
その場合、非同期処理を使うと、通信が完了するまで待つのではなく、他の処理を進めることができます。
今回はJavaScriptの非同期処理について、簡単で分かりやすいサンプルコードを用いて解説します！

非同期処理のサンプルコード

JavaScriptでは、非同期処理を実現するために、コールバック関数やPromiseやasync/awaitなどの機能があります。

コールバック関数とは、ある関数に引数として渡されて、その関数の中で呼び出される関数です。
Promiseとは、非同期処理の結果を表すオブジェクトで、「成功」や「失敗」などの状態や値を持ちます。
async/awaitとは、Promiseをよりシンプルに書くための構文で、「async」キーワードで関数を定義し、「await」キーワードでPromiseの結果を待ちます。

コールバック関数

コールバック関数とは、ある関数に引数として渡されて、その関数の処理が終わったら呼び出される関数のことです。
非同期通信に使われる場合、コールバック関数は非同期処理の結果を受け取って、その後の処理を行います。

例えば、setTimeout関数は非同期処理の代表的な関数で、指定した時間が経過したらコールバック関数を実行します。

// 2秒後に"Hello"と表示する
setTimeout(function() {
  console.log("Hello");
}, 2000);

上記のコードでは、2秒後に「Hello」と表示するコールバック関数をsetTimeout関数に渡しています。

コールバック関数のサンプルコード

// 非同期処理（1秒後にHello World!と表示する）
function asyncFunc(callback) {
  setTimeout(() => {
    console.log("Hello World!");
    callback(); // コールバック関数
  }, 1000);
}

// 非同期処理（1秒後にGoodbye!と表示する）
function asyncFunc2() {
  setTimeout(() => {
    console.log("Goodbye!");
  }, 1000);
}

// 非同期処理を順番に実行する
asyncFunc(asyncFunc2); // Hello World! -> Goodbye!

コールバック関数は非同期処理の基本ですが、複雑な処理をする場合はネストが深くなったり、エラー処理が煩雑になったりする問題があります。
もっと詳しい解説はこちら。

そのため、Promiseやasync/awaitといったより便利な方法も開発されています。

Promise

Promiseとは、非同期処理の結果を表すオブジェクトのことです。
Promiseオブジェクトは、pending（未決定）、fulfilled（成功）、rejected（失敗）の3つの状態を持ちます。
非同期処理が完了すると、Promiseオブジェクトはその状態に応じてthenメソッドやcatchメソッドで登録したコールバック関数を実行します。

// HTTPリクエストを送る
fetch("https://example.com/api/data")
  // レスポンスをJSONに変換する
  .then(response => response.json())
  // データを表示する
  .then(data => console.log(data))
  // エラーがあれば表示する
  .catch(error => console.error(error));

上記のコードでは、fetch関数でHTTPリクエストを送り、その結果をPromiseオブジェクトとして受け取っています。
その後、thenメソッドでレスポンスをJSON形式に変換し、もう一度thenメソッドでデータを表示します。
もしエラーが発生したらcatchメソッドでエラーメッセージを表示します。

Promiseのサンプルコード

// 非同期処理（1秒後にHello World!と表示し、成功状態（resolve）にする）
function asyncFunc() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Hello World!");
      resolve(); // 成功状態
    }, 1000);
  });
}

// 非同期処理（1秒後にGoodbye!と表示し、成功状態（resolve）にする）
function asyncFunc2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Goodbye!");
      resolve(); // 成功状態
    }, 1000);
  });
}

// 非同期処理を順番に実行する（thenメソッドでPromiseの結果を受け取る
asyncFunc().then(asyncFunc2) // Hello World! -> Goodbye!

async/await

async/awaitとは、非同期処理をよりシンプルに書くための構文です。
async/awaitはPromiseをベースにしていますが、thenメソッドやcatchメソッドを使わずに、同期処理のように記述できますが、async/awaitを使うには以下の2つのステップが必要です。

例えば、以下のコードでは、fetch関数でHTTPリクエストを送り、その結果をJSON形式に変換し、データを表示します。
エラーが発生したらtry…catch文でエラーメッセージを表示します。

// 非同期処理をする関数
async function getData() {
  try {
    // HTTPリクエストを送り、レスポンスを待つ
    const response = await fetch("https://example.com/api/data");
    // レスポンスをJSONに変換し、データを待つ
    const data = await response.json();
    // データを表示する
    console.log(data);
  } catch (error) {
    // エラーがあれば表示する
    console.error(error);
  }
}

// 関数を呼び出す
getData();

async/awaitは非同期処理の可読性や効率性が向上しますが、Promiseと同じく非同期処理の仕組みや挙動は理解しておく必要があります。

async/awaitのサンプルコード

// 非同期処理（1秒後にHello World!と表示し、成功状態（resolve）にする）
function asyncFunc() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Hello World!");
      resolve(); // 成功状態
    }, 1000);
  });
}

// 非同期処理（1秒後にGoodbye!と表示し、成功状態（resolve）にする）
function asyncFunc2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Goodbye!");
      resolve(); // 成功状態
    }, 1000);
  });
}

// 非同期処理を順番に実行する（async/await構文でPromiseの結果を待つ）
async function main() {
  await asyncFunc(); // Hello World!
  await asyncFunc2(); // Goodbye!
}

main();

以上がJavaScriptの非同期処理についての解説とサンプルコードです。
ご参考になれば幸いです。

もっと詳しい解説はこちらをご参考ください。

• Original:https://minory.org/javascrip-async.html
• Source:Minory
• Author:管理者