【JavaScript・TypeScript】非同期処理を理解したい

はじめに

フロントを業務として触り初めて、半年くらい経ちました。
少しずつ、理解できてきて「フロント楽しいかも？」と思ったのをきっかけに、つよつよフロントエンジニアを目指して、アウトプットしていきます。

まずは、説明しろと言われると「うーん」となってしまう、非同期処理から学習していきます！

そもそも非同期処理ってなに？

一言で言うと「裏側でいろいろやってくれる処理のこと」です。

ただイメージが湧かないので、非同期処理を理解するには、JavaScript・TypeScriptの処理がどのように進むかを理解する必要があります。

JavaScript・TypeScriptはシングルスレッドで動く

シングルスレッドではプログラムが動く場所は「１つ」ということです。

カレーとサラダを作る場合で、イメージするとこんな感じでしょうか？
※間違ってたらごめんなさい

◎シングルスレッド
シェフ１人、キッチン１つで作る

◎マルチスレッド
シェフ2人、キッチン2つで作る

シングルスレッドだと何が困るのか？

では、シングルスレッドだと何が困ってしまうのか？
それは、「時間がかかる処理は待たなければならない」ということが起きてしまいます。

同じくカレーとサラダを作る場合でイメージしてみます
◎シングルスレッドでカレーを作る場合
1.人参を切る
2.玉ねぎを切る
3.じゃがいもを切る
4.具材を炒める
5.具材を煮る
6.ルーを入れて煮る
7.サラダを作る
8.完成

上記のようなプログラムで作るとき、時間がかかる処理は「具材を煮る」部分です。
「具材を煮る」より下にある処理は「具材を煮る」が完了してからでないと実行できないのです。
シェフは「具材を煮る」が完了するまでずっと待っている状態になります。

実際のプログラムで時間がかかる処理は
・API通信
・ファイルの読み書き
などがあります。

つまり、シングルスレッドで実行すると「ファイルの読み書き」が全て終わってから、次の処理が実行されるという事が起きてしまうので、アプリを使っているユーザーは長時間待たないと行けない状態になってしまいます。

ただ、本当は具材を煮ている間にサラダを作りたくなりませんか？その方が効率良いですよね。
1.人参を切る
2.玉ねぎを切る
3.じゃがいもを切る
4.具材を炒める
5.具材を煮る → 5.1煮てる間にサラダを作る
6.ルーを入れて煮る
8.完成

このように、JavaScript・TypeScriptは「非同期処理」を使って、時間がかかる処理があっても、時間がかかる処理は裏側でいろいろ処理してもらって、先にプログラムを実行させ、シングルスレッドの問題を回避しています。
1.人参を切る
2.玉ねぎを切る
3.じゃがいもを切る
4.具材を炒める
「5.具材を煮る(非同期処理させる)」 → 5.1煮てる間にサラダを作る
6.ルーを入れて煮る
8.完成

おわり

非同期処理の理解難しいですね。。。アウトプットしながら理解を深めていきたいと思います