JavaScriptのasync/awaitとPromiseについての解説と実演

同期・非同期

• 同期は「前の処理の完了を待った上で次の処理を行う」
• 非同期は「前の処理の完了を待たずに次の処理を行う」

同期はコードの動きがわかりやすいもののUIの快適さなどを犠牲にする場合があり、非同期は各処理の終了のタイミングがバラバラな為にコードが難しくなる傾向があるが、UIの快適さなどを担保する為には欠かせない考え方です。

WEBブラウザ上のプログラムでよく出てくるのは殆どが同期のコードですが、通信のような時間がかかる処理については非同期で動作するAPIが提供されています。Ajaxを行う場合には基本的には非同期処理になります。

非同期の実現方法の歴史

非同期の実現には以下のような歴史があり、適切に書き切るのに大変苦痛を伴うコードになっていたコールバックの時代から、async/awaitまでの改善の道のりがわかると理解の助けになるでしょう。

よく出会う苦しい点としては「ある非同期の処理が終わったら次の非同期処理を始める」という連続した非同期処理のコードの取り回しです。

1. コールバック

「処理が完了した際に呼び出される関数を仕掛けておく」コールバックを使う手法は、とてもシンプルな実現方法ではあります。一方で連続した非同期処理については「コールバック関数の中でさらにコールバック関数を呼び出す」という流れになります。その結果

• コードのネストが深くなる
• コードを上から下へ読み解くことは難しく、左から右へ読むような流れになる

ということから、適切に書いたとしても読み解くのに労力が必要なコードになりやすく「コールバック・ヘル（コールバック地獄）」と呼ばれるような言葉があるくらいです。

2. Promise

コールバックの欠点をうまく補うために導入されたのがPromiseです。元々は外部ライブラリとして提供されることが多かったですが、JSの処理系に組み込まれることで大変使いやすくなりました。Promiseで書かれたコードは上から下へ読みやすい形で提供され、脳内のイメージに近い形で表現されるようになっています。

3. async/await

Promiseの記述をさらにJSの言語のサポートで書きやすくしたのがasync/awaitです。Promiseにあった連続したthenの結合もコードから取り去ることで同期のコードのように連続した非同期処理のコードを読み解くことができます。

現在ではなるべくasync/awaitのコードで書く方が良いでしょう。とは言え古いコードを扱う場合にはコールバックのコードを読むこともありますし、async/awaitとPromiseはとても密接な関係にあるので、Promiseの知識もある程度持っていることが必要になります。

解説に利用したコード ~ Sample code ~

https://github.com/CircleAround/pgonline/tree/master/src/20201221_asynchronous