ハンズオンJavaScript

10章非同期処理を学ぶ

JavaScriptで関数を呼び出すと、その関数が結果を返すまで関数呼び出しの次の処理は実行されません。このように、必ず前の処理の終了を待ってから次に進む処理を同期処理と言います。これは当然のことのように感じるかもしれませんが、実はそうではありません。先に開始される処理の結果を次の処理で使用しないのであれば、先の処理の終了を待たずに次の処理を開始したとしても何も問題はないはずです。

たとえばネットワークを通じてデータを取得する場合や、複雑な画像処理を行う場合など、完了までに長い時間がかかることが分かっている処理に対しては、ひとまず処理の開始だけを依頼し、その完了を待たずにその次の処理に進みたいこともあるでしょう。このように前の処理の終了を待たずに次に進むことを非同期処理と呼びます。

JavaScriptではこの非同期処理が非常に重要です。というのも、JavaScriptは処理の流れをひとつしか持つことができない†1ことに加え、WebブラウザはJavaScriptの実行や画面の描画、ユーザー入力の受け付けをすべて同じイベントループで行うからです。そのため、JavaScriptで時間のかかる同期処理を実行すると、その処理が完了するまでブラウザの画面描画やユーザーの操作に対する反応がすべて止まってしまいます。

[†1] 処理の流れのことをスレッド、ひとまとまりの処理を実行する際にスレッドをひとつしか使用しない方式をシングルスレッドと呼びます。JavaScriptはシングルスレッドで実行される言語です。

イベントループ

イベントループとはその名前のとおりブラウザ内で発生する各種イベントを処理するためのループです。概念的にはブラウザのソースコードに次のような無限ループがあり、動き続けているのだと考えてください。 ...