目次
async、await は同期・非同期を制御する修飾子
asnyc と await は、JavaScriptにおける連続した処理を「前の処理が終わってから後の処理を実行する」か、「前の処理が終了する前に後の処理を実行する」かを指定するためのキーワードです。
プログラミングでは、前者の処理方式を「同期処理」と呼び、後者の処理方式を「非同期処理」と呼びます。
非同期通信（Ajax）をざっくり復習
ウェブアプリ（ウェブサイトも含む）でサーバーとクライアント間の非同期処理を実装するには、JavaScriptを使います。これをAjax（Asynchronous JavaScript ＋ XML）と呼びます。
Ajaxを実装するための手段として、ネイティブなJavaScriptにはXMLHttpRequestオブジェクト、jQueryには$.ajaxメソッドなどが用意されています。
開発をしている方なら、Ajax専用のJavaScriptライブラリaxiosを使っているかもしれません。
「Ajaxって何？」という方は、Ajaxざっくり解説をお読みください。
async と await を使った処理イメージ
async と await を非同期処理の場面で使うと、処理の順番がどのようになるのかを簡単に解説します。
プログラム用語は英単語を短縮したものがほとんどなので、知らない用語に出会ったらGoogle翻訳で元々の意味を調べましょう。async は Asynchronous（＝非同期）、await は「待つ」の意味です。
例１）
async function(){ 処理A }
処理B
処理C
この場合、BとCは必ず順番に実行されますが、
Aは必ずしもBより先に実行されるとは限りません。
グループ１：処理A
グループ２：処理B＋処理C
のように考えたとき、各グループ内の処理は順番通りに実行されますが、
グループ１とグループ２は非同期に実行されます。
例２）
async function(){
処理A
await 処理B
処理C
}
処理D
この場合、たとえBが非同期型の処理だったとしても、
CはBの完了を待ってから実行されます。
これもグループ分けすると、
グループ１：処理A＋処理B＋処理C
グループ２：処理D
グループ１とグループ２は互いに非同期で実行されますが、
グループ１の中では必ずA→B→Cの順に実行されます。
もし、Bが非同期処理を含んでいた場合に
await をつけずに
async function(){
処理A
処理B
処理C
}
処理D
としてしまうと、Bが終わる前にCが開始してしまいます。
同期・非同期の制御が重要な場面
会員専用サイトにおけるログイン認証や、ECサイトでの決済処理のように、
「成功してから次に進まなければ深刻な問題が起こりうる」
場合に、同期・非同期の制御が重要です。