🐾

【JavaScript】非同期処理をちょっとだけ理解する

2023/07/23に公開

はじめに

フロントエンド環境で実行される JavaScript の非同期処理について、ちょっとだけ理解したことをまとめた記事です。
用語の解説などは特にしていません。

フロントエンドエンジニアを目指して学習を始めて約 1 年半。
これまで非同期処理について学んでみたこともあったし、コードも書いてはきたけど、あらためて非同期処理について説明しようと思うとうまく言葉にできない...

さては私、非同期処理のこと全然わかってないな！？

と気がついたので、あらためて非同期処理について考えてみました。

非同期処理について、いろんな動画や記事で以下のような説明を目にしてきました。
動画をみたり記事を読んでいる間は「ふんふん、なるほど」と、なんとなくわかった気になります。

JavaScript はシングルスレッドで実行されるもの
同期処理について
- 同期処理ではコードを上から順番に実行し、ひとつの処理が終わるまで次の処理へ進むことができない
- メインスレッドが占有されている間は、他の処理が割り込むことができない
非同期処理について
- 非同期処理ではある処理が終わるのを待たずに次の処理を実行することができる
- 非同期処理はメインスレッドを一旦離れて次の処理に譲るため、コードの見た目とは異なる順番で実行される
コールスタック、タスクキュー、イベントループについて
- コールスタックは、関数が呼び出されたときにコンテキストが積まれる箱のようなもの
- 積まれたコンテキストは、後から積まれたものから実行される
- タスクキューは、非同期処理が実行待ちをするところ
- イベントループは、コールスタックの様子を監視していて、コールスタックが空になったらタスクキューに通知するもの
- 通知を受けたタスクキューは、入ってきた順番で非同期処理をコールスタックに渡す

上記を踏まえて非同期処理を説明しようとすると、以下の疑問が生じて混乱してしまいました。

非同期処理に関する記事をいろいろと探す中で、最終的にこちらの本に辿り着きました。

結論から言うと、私が非同期処理を理解するにはまだまだ早いなと言うことがわかったのですが、それでも混乱した部分を自分なりに整理することができたので、以下で少しまとめてみます。

フロントエンドの場合、JavaScript のコードが実行されるのはブラウザ環境
コードを実行するのは、ブラウザの JavaScript エンジンのメインスレッド
JavaScript エンジンのメインスレッドの主な役割は、 JavaScript のコードの実行と画面描画を行うこと
- そのため、時間のかかる処理を実行すると、その間は画面描画ができなくなってしまう

setTimeout()やfetch()は ECMAScript の機能ではなく、ブラウザ環境自体が提供する非同期 API であるということ
非同期 API として提供されている処理そのものは、JavaScript エンジンではなく、JavaScript エンジンを埋め込んでいる環境が裏側で行うということ

「処理が終わるのを待たずに次の処理を実行する」ならシングルスレッドじゃなくない？
→ 非同期 API を使用することで裏側の環境に処理を委任することができるため、シングルスレッドでも「処理が終わるのを待たずに次の処理を実行する」を実現できる 💡
シングルスレッドで実行するなら、処理の順番を入れ替えてもトータルでかかる時間は結局一緒じゃない？？
→ 上記のとおり、あくまでスレッドはひとつだけど、バックグラウンドに処理を任せている間にメインスレッドで別の処理を実行することができるため、トータルの処理時間を短縮することができる 💡
そもそも非同期処理って何のためにあるんだっけ？？？
→ 非同期処理の大きな目的は、環境がバックグラウンドで処理をしている間もメインスレッドをブロッキングすることなく別の作業を続けられるようにすること 💡

この本自体をみつけたのは結構前になるのですが、そのときには読んでも内容がまったくわからず、読むことを諦めてしまっていました。
Zenn でたくさんいいねがついている記事を読んでも、「むずかしくて全然わからん...」ということがよくあります。

それでも、他の記事を読んだり頭の整理をした上で再挑戦してみると、少しずつわかる部分が出てきたりもします。
こうして自分の成長を実感できるのが、プログラミング学習をしていて楽しいところですね。

こちらの本はまだまだ読み始めたばかりで、今の私では難しい部分も多いですが、少しずつ読み進めて非同期処理をちょっとずつ理解していきたいと思います！

最後までお読みいただき、ありがとうございました 🐾