JavaScriptデザインパターンを学ぶ 第2版

第9章. 非同期プログラミングパターン

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

非同期JavaScriptプログラミング では、バックグラウンドで長時間実行するタスクを実行しながら、ブラウザがイベントに応答し、そのイベントを処理するために他のコードを実行することができる。非同期プログラミングはJavaScriptでは比較的新しいもので、本書の初版が出版されたときには、それをサポートする構文はなかった。

promise 、async 、await といったJavaScriptの概念は、メインスレッドをブロックすることなく、コードをすっきりさせ、読み取りやすくする。async 関数は2016年にES7の一部として導入され、現在ではすべてのブラウザでサポートされている。これらの機能を使ってアプリケーション・フローを構成するパターンをいくつか見てみよう。

非同期プログラミング

JavaScriptでは、同期コードは 、ブロッキング方式で実行される。つまり、コードは1ステートメントずつシリアルに実行される。次のコードは、現在の文の実行が完了した後にのみ実行できる。同期関数を呼び出すと、制御が呼び出し元に戻る前に、その関数内のコードが最初から最後まで実行される。

一方、非同期コードは非ブロッキングで実行される。つまり、JavaScriptエンジンは、現在実行中のコードが何かを待っている間に、バックグラウンドでこのコードの実行に切り替えることができる。非同期関数を呼び出すと、関数内のコードはバックグラウンドで実行され、制御はすぐに呼び出し元に戻る。

JavaScriptの同期コードの例である：

function synchronousFunction() {
  // do something
}

synchronousFunction();
// the code inside the function is executed before this line

そして、ここにJavaScriptの非同期コードの例を示す：

function asynchronousFunction() {
  // do something
}

asynchronousFunction();
// the code inside the function is executed in the background
// while control returns to this line

一般的に、非同期コードを使えば、他のコードをブロックすることなく、長時間実行する演算子を実行できる。非同期コードは、ネットワークへのリクエスト、データベースへの読み取りや書き込み、その他のタイプのI/O（入出力）操作を行うときに適している。

async 、await 、promise のような のような言語機能は、JavaScriptで非同期コードを書くことを容易にする。これらの機能により、非同期コードを同期コードと同じように記述することができ、読みやすく理解しやすくなる。

コールバック、プロミス、async/await 、それぞれの違いを簡単に見てから、さらに深く掘り下げていこう：

// using callbacks
function makeRequest(url, callback) {
  fetch(url)
    .then(response => response.json())
    .then(