現在もりけん塾でJavaScriptをメインに、コードにまつわる様々な事を日々学んでいます。
今回はシングルスレッドと同期処理、非同期処理についての備忘録です。
頂いている課題でJavaScriptがシングルスレッドと知りました。
今までシングルスレッドとは知らず、非同期処理と非同期通信を一緒だと思いこみ、
課題に躓き時間を溶かしていました。
同期処理、非同期処理はシングルスレッドの理解があってのものなので、
シングルスレッド、同期処理、非同期処理をまとめました。
シングルスレッドとは
シングルスレッドとは、プログラムが一本の糸のように、
単一に処理されるプログラムの事です。
スレッド(thread) は英語で糸、筋道という意味があります。
シングルスレッドであるJavaScriptは同時に複数の処理(並列処理)ができません。
1度に1つの仕事しかできないので、プログラムは1つずつ順番に動いていきます。
JavaScriptをWebブラウザで動かした場合、
ブラウザにあるメインスレッド(Main Thread)で基本動きます。
メインスレッドは JavaScriptの実行とレンダリング(画面上への反映)を行っているスレッドになります。
(他にも JavaScriptに関わるスレッドは、Service Worker、Web Workerもあるそうです)
JavaScriptは1つずつ処理を実行できるように、
コールスタックが実行コンテキストを管理しています。
コンテキスト
コードが実行されている時どのような状況・状態で実行されているか。
コールスタック
どのような経路をたどって、実行コンテキストにたどり着いたかを記録することだそうです。
コンテキストが積まれている状態で、コールスタックはLIFO（Last In, First Out)後入れ先出し式で実行されます。
同期処理とは
同期処理は、メインスレッドでコードを順番に１つずつ処理をしていき、1つの処理が終わるまで次の処理は行われません。
処理を1つずつ順番に行うため、
何か1つでも処理に時間が掛かるものがあると、
次の処理が実行されず、フリーズしているように感じることになります。
非同期処理とは
非同期処理は、1つの処理が終わるのを待たずに、次の処理を実行することができます。
同時に複数の処理を行う事ができるのが非同期処理になります。
非同期処理は一時的にメインスレッドから処理を切り離し、
メインスレッドを空ける状態を作ります。
メインスレッドが空くため、次の処理を実行することができるます。
ここで重要なのが、一時的に切り離された処理が完了した時点で、
すぐメインスレッドに戻れるとは限りません。
切り離された処理が完了しても、メインスレッドが空いていないと戻すことができません。
JavaScriptがシングルスレッドのためです。
タスクキュー
タスクキューとは実行待ちの非同期処理の行列となります。
キューの中でタスクを管理し、キューに入った順で処理を行っていきます。
キューが非同期処理の順番を管理しています。
FIFO(First In First Out) 先に入ったものが、最初に実行されます。
イベントループ
コールスタックにコンテキストが積まれていないかを確認している。
コンテキストが積まれていない場合は、タスクキューにコールスタックが空いていることを伝える。
まとめ
シングルスレッドを理解することで、同期処理、非同期処理をすんなりと理解することができました。
1つの処理しか実行できないという事を頭にいれ、JavaScriptを書いていきたいと思います。
これで少しはコードの組み立ての第一歩にたどり着けた気がしました。
今までJavaScriptが仕組みを良く理解しないまま書いてきていましたが、
今回の課題で具体的な処理の流れを知り、
また1つJavaScriptが楽しくなった瞬間でした。
現在もりけん塾に参加し、JavaScriptの課題に取り組んでいます！
素敵な先生と塾生に囲まれて切磋琢磨な日々を送っています。
森田先生のBLOG：無骨日記
Twetter：@terrace_tech
参考
