【JavaScript】非同期処理について

非同期処理とは

計算などの処理が連続する場合に、手前の処理が完了したら次の処理を実行することを非同期処理という。
処理によって得られた結果を次の処理で利用する場合などで用いられる。

非同期処理の動作について

非同期処理を使用すると、処理の実行に時差が発生します。
非同期処理として記述されている場合、全処理を実行準備状態として、その結果をPromiseという状態で返します。
同時に最初の処理から開始され、完了したら次の処理が開始されます。
Promiseの状態がすべて完了となるまで各処理を順番に実行するのが非同期処理です。

なぜ非同期処理が必要なのか

連続する処理に対して、非同期処理が行われていないと、期待する結果が得られない可能性があります。

例えば、ある町の住民10万人の平均年齢を計算するプログラムを作ったとします。
プログラムには連続する処理①、②、③があり、内容は以下となっています。

• 処理①　データベースから住民リストから全住民の年齢を取得する。
• 処理②　取得した全住民の年齢を足し合わせる。
• 処理③　処理②の結果から平均年齢を計算する

処理①では、データベースに全住民の年齢を取得するためのリクエストを送信しますが、
リクエストに対する応答処理が完了する前に処理②が開始した場合、足し合わせるデータがないために計算を行うことができません。

処理①が問題なく完了し処理②が開始されたとしても、
10万人分の年齢を合算する処理に時間がかかってしまい、処理③の開始に間に合わなかった場合は、
平均年齢を取得することはできません。

このように、目的とする結果を得るためには、処理の実行を開始するタイミングを前の処理完了後まで遅らせる必要があるため、非同期処理が用いられます。

非同期処理の記述

非同期処理の記述にはthen()メソッドを使用します。
先ほどの平均年齢の例を非同期処理に置き換えると、以下のようになります。

const getData = 処理①
const sumData = 処理②
const aveData = 処理③

getData.then(sumData).then(aveData)

getData.then(sumData).then(aveData)

まず初めのgetDataが完了したときに、thenのカッコ内の処理(sumData)が実行されます。
さらにsumDataが完了したときの、次のthenのカッコ内の処理(aveData)が実行されます。

asyncとawait

JavaScript ES2018から新たにasyncとawaitという2つの非同期処理に関するキーワードが追加されました。

この2つのキーワードを組み合わせて非同期処理を記述することができます。

関数を定義する際にasyncを使用して非同期処理であることを宣伝します。

asyncによって非同期処理化された関数の中では、awaitを記述した関数が非同期に処理されます。

以下記述例です。

async function getData () {
   const sumData = await 処理②
   const aveData = await 処理③
   return aveData
}

このように記述することで、getDataの完了を待って、sumDataが実行されて、sumDataの完了後にaveDataが実行されます。

for/await

複数の処理を連続で非同期的に処理する場合に用いる記述方法です。

配列内の複数の値に対して同じ処理を連続して行う場合に、map関数と併用して使うことができます。

これにより前の処理が完了することで次の処理を開始させて連続した非同期処理を行うことができます。

async function repeat() {
   for await ("処理を繰り返す条件を記述")　{
　　　　繰り返し処理を記述
　 }
}

まとめ

非同期処理は連続する処理の実行において、前の処理の結果を待って次の処理を行う際に用いる。

then()メソッド、もしくはasync/awaitによる記述で非同期処理を行うことができる。

for awaitをasync内で使用することによって、繰り返し処理を非同期化することができる。