【非同期処理】について学習したのでまとめてみた

はじめに

非同期処理について曖昧だったので、アウトプットも兼ねて説明していきます。

同期処理と非同期処理

同期処理は、コードが上から順に実行される方法です。例えば、処理1、処理2の順番で処理が記述されている場合、処理1が完了してから処理2が実行されます。

一方、非同期処理では、処理が終わるのを待たずに次の処理が行われます。つまり、処理1を実行中に処理2も同時に実行されます。

非同期処理の利点は、処理が待機されずにすぐに次の処理が行われるため、全体の処理が速くなることです。

非同期処理の実行

非同期処理を実行するために、JavaScriptでよく使われるのがsetTimeout関数です。これは一定時間後に特定の処理を実行するためのタイマー機能です。

以下にsetTimeout関数の例を示します。

setTimeout(() => {
  console.log('こんにちは');
}, 1000);

setTimeout(() => {
  console.log('こんばんは');
}, 1000);

このコードでは、1秒後に同時に「こんにちは」と「こんばんは」が表示されます。

また、Promiseを使えば、処理の完了を待ってから次の処理を行うことができます。Promiseは必ず結果を返してくれる仕組みです。

以下はPromiseを使った例です。

new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('こんにちは');
    resolve();
  }, 1000);
}).then(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('こんばんは');
      resolve();
    }, 1000);
  });
});

このコードでは、「こんにちは」が表示された後に「こんばんは」が表示されます。

async/await

Promiseを使うときには、then()を使って処理を記述しますが、処理が複雑になるとコードが複雑になります。そこで、async/awaitが役立ちます。これはPromiseをより簡潔に書くための方法です。

以下はasync/awaitを使った例です。

async function asyncFunction() {
  await greeting('こんにちは', 1000);
  await greeting('こんばんは', 1000);
}

function greeting(word, milliseconds) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(word);
      resolve();
    }, milliseconds);
  });
}

asyncFunction();

このようにすることで、非同期処理を同期処理っぽく書くことができます。

参考