動画付きでイベントループの仕組みを解説した記事の紹介

# 背景
イベントループの勉強を放置してしまっていました。
GWを生かし消化しようと思います。

# 紹介

[こちら](https://coliss.com/articles/build-websites/operation/javascript/javascript-visualized-event-loop.html
)の記事で紹介されていた以下引用元の記事を紹介します

https://www.lydiahallie.com/blog/event-loop

youtubeは以下です！


https://www.youtube.com/watch?v=eiC58R16hb8&t=5s

lydiahallieさんのXはこちらです！

https://x.com/lydiahallie

# 自分用の用語まとめ
:::note
~実行コンテキストとは~
JavaScriptエンジンがスクリプトファイルをスキャンするときに作る環境です。
この環境の中でコードの変換と実行全体を処理します。

実行コンテキストには、グローバルと関数の2種類があります。
- グローバル実行コンテキスト
JavaScriptスクリプトが最初に実行を開始するときに作成され、JavaScriptのグローバルスコープを表します
- 関数実行コンテキスト
関数が呼び出されるたびに作成され、関数のローカルスコープを表します

~JavaScriptエンジンとは~
JavaScriptコードを実行し、コンピュータが理解できる言語に変換するコンピュータプログラムです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/85cbc986-46bc-bffc-1902-c9a0c1258dda.png)
[引用元](https://www.geeksforgeeks.org/introduction-to-javascript-engines/)

~スタックとは~
線形データ構造であり、特定の順序で処理が実行されます。
その順序はLIFO（Last In First Out）またはFILO（First In Last Out）です。
LIFOは最後に挿入された要素が最初に出てくることを意味し、FILOは最初に挿入された要素が最後に出てくることを意味します。

コールスタックの順序はLIFOです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/de3aec2b-9897-aa81-3871-7161a7d7a474.png)
[引用元](https://www.geeksforgeeks.org/stack-data-structure/)

jsでのスタック(LIFO)のサンプルコード
[Implementation of Stack in JavaScript](https://www.geeksforgeeks.org/implementation-stack-javascript/)

~線型データ構造とは~
データ構造の一種で、データ要素が順次または線形に配列されたものです。
各要素は、最初と最後の要素を除いて、前と次に隣接しています。

参考
- [What is the Call Stack in JavaScript ?](https://www.geeksforgeeks.org/what-is-the-call-stack-in-javascript/)
- [Stack Data Structure](https://www.geeksforgeeks.org/stack-data-structure/)
- [Introduction to Linear Data Structures](https://www.geeksforgeeks.org/introduction-to-linear-data-structures/)
- [Introduction to Javascript Engines](https://www.geeksforgeeks.org/introduction-to-javascript-engines/)
- [JavaScript Execution Context – How JS Works Behind the Scenes](https://www.freecodecamp.org/news/how-javascript-works-behind-the-scene-javascript-execution-context/)

参考
- [Rendering engine](https://developer.mozilla.org/en-US/docs/Glossary/Rendering_engine)
- [Networking Stack](https://www.sciencedirect.com/topics/computer-science/networking-stack)

〜非同期〜
他の関数や操作と並行して実行されること

参考
- [What is the difference between Microtask Queue and Callback Queue in asynchronous JavaScript ?](https://www.geeksforgeeks.org/what-is-the-difference-between-microtask-queue-and-callback-queue-in-asynchronous-javascript/)

参考
- [Learn How to Make an Interactive Website that Engages Customers](https://rockcontent.com/blog/how-to-make-interactive-website/#:~:text=An%20interactive%20website%20is%20simply,the%20use%20of%20interactive%20elements.)
- [「機敏なユーザー体験」を実現するUIに求められる応答時間](https://mtx2s.hatenablog.com/entry/2023/02/22/233140)

〜キューとは〜
キューは、データを特定の順序で格納・管理するために用いられます。キューは"First in, First out"（先入れ先出し）の原則に従い、キューに最初に追加された要素が最初に削除されます。

キューの基本操作
- エンキュー（挿入）： キューに要素を追加します
- デキュー（削除）： キューから要素を削除して返します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/39b998ff-0198-64bb-a1f1-22efe9b8fe32.png)
[引用元](https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230726165642/Queue-Data-structure1.png)

jsでのキューのサンプルコード
[Implementation of Queue in Javascript](https://www.geeksforgeeks.org/implementation-queue-javascript/)

参考
[Queue Data Structure](https://www.geeksforgeeks.org/queue-data-structure/)

タスクキューはコールバックキュー、マクロタスクキューとも言うそうです。
参考
- [What is the difference between Microtask Queue and Callback Queue in asynchronous JavaScript ?](https://www.geeksforgeeks.org/what-is-the-difference-between-microtask-queue-and-callback-queue-in-asynchronous-javascript/)

〜プロミス〜
非同期操作の最終的な完了（または失敗）とその結果の値

参考
- [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

〜MutationObserver〜
DOMツリーに加えられた変更を監視します

〜DOM〜
ウェブ・ドキュメントのためのプログラミング・インターフェースです。ドキュメントの構造をオブジェクトのツリーとして表し、各オブジェクトは要素や属性、テキストといったドキュメントの一部に対応しています。

〜queueMicrotask〜
ブラウザのイベントループに制御が戻る前に、安全なタイミングで実行されるマイクロタスクをキューに入れます。

参考
- [MDN MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
- [What is the DOM (Document Object Model) ?](https://www.geeksforgeeks.org/what-is-the-dom-document-object-model/)
- [queueMicrotask](https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask)

〜応答性〜
  与えられた時間内に割り当てられたタスクを完了するシステムまたは機能の具体的な能力
〜一貫性〜
🙇‍♂️調査中です、解釈でき次第まとめます

参考
- [Responsiveness](https://en.wikipedia.org/wiki/Responsiveness)

〜PromiseState〜
thenメソッドへの着信に対してプロミスがどのように反応するかを制御する、つまりPromiseオブジェクトの状態です

〜PromiseResult〜
プロミスが解決または拒否された値です。PromiseStateがPENDINGでない場合のみ意味があります。

〜PromiseFulfillReactions〜
プロミスがPENDING状態からFULFILLED状態に遷移した場合に処理されるレコード

参考
- [27.2.6 Properties of Promise Instances](https://tc39.es/ecma262/#sec-properties-of-promise-instances)

[dynamicの意味](https://e-words.jp/w/%E5%8B%95%E7%9A%84.html)
:::

本記事を読んで頂き、ありがとうございました。
いいねいただけると記事執筆の励みになりますので、参考になったと思われた方は是非よろしくお願い致します🙏