モダンJavaScript入門: 非同期処理: コールバック関数、プロミス、async/await

Javascript フロントエンド

目次

  1. 非同期処理とは
  2. コールバック関数
  3. プロミス (Promise)
  4. async/await
  5. まとめ

非同期処理とは

JavaScriptでは、一部の操作が完了するまで待つことなく次の操作に移ることができます。これを非同期処理と言います。サーバーからデータを取得する際や、時間のかかる計算を行う際などに非同期処理が利用されます。

console.log('Start');
setTimeout(() => {
  console.log('Timeout');
}, 2000);
console.log('End');

上記のコードでは、「Start」→「End」→「Timeout」と表示されます。これはsetTimeout関数が非同期で動作し、指定された時間が経過するまで次の処理に移るからです。

コールバック関数

非同期処理を行うための一つの方法が、コールバック関数です。コールバック関数は、ある関数が終了した後に呼び出される関数を指します。

function doSomething(callback) {
  const value = 42;
  callback(value);
}

doSomething((value) => {
  console.log('The value is ' + value);
});

上記のコードでは、doSomething関数が実行された後に、コールバック関数が呼び出されています。

プロミス (Promise)

プロミスは、非同期処理の結果を表すオブジェクトで、成功（fulfilled）、失敗（rejected）、未決定（pending）の3つの状態を持ちます。

const promise = new Promise((resolve, reject) => {
  const value = 42;
  if (value) {
    resolve(value);
  } else {
    reject('Error');
  }
});

promise.then((value) => {
  console.log('The value is ' + value);
}).catch((error) => {
  console.error(error);
});

上記のコードでは、promiseオブジェクトが成功した場合にはthenメソッド内の処理が実行され、失敗した場合にはcatchメソッド内の処理が実行されます。

async/await

async/awaitは、非同期処理を行うための構文で、プロミスの結果を待つことができます。

async function doSomething() {
  const value = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(42);
    }, 2000);
  });
  console.log('The value is ' + value);
}

doSomething();

上記のコードでは、doSomething関数内でプロミスの結果を待ってから次の処理に移るようになっています。

まとめ

非同期処理はJavaScriptの重要な概念であり、コールバック関数、プロミス、async/awaitなどの方法があります。これらを理解し、適切に使い分けることで、効率的なプログラミングが可能になります。