🤤
JavaScriptの非同期処理の流れを理解する
JavaScriptの非同期処理は、イベントループやコールスタックなどの仕組みを理解することでスムーズに扱えるようになります。本記事では、その基本的な流れをわかりやすく解説します！
基本概念
1. コールスタック (Call Stack)
- JavaScriptのエンジン（例: V8）は、同期的なタスクを実行するためのスタックを持っています。
- 関数呼び出しが発生すると、スタックに積まれ、処理が完了するとスタックから取り除かれます。
2. Web APIs / タスクキュー
- ブラウザやNode.js環境には、非同期処理を処理するためのWeb APIs（例: setTimeout, fetch）やタスクキューがあります。
- 非同期処理が完了すると、関連するコールバックがタスクキューに登録されます。
3. イベントループ (Event Loop)
- イベントループは、コールスタックが空になるのを待ち、タスクキューからコールバックを取り出してコールスタックに送ります。
4. マイクロタスクキュー (Microtask Queue)
- マイクロタスクは、通常のタスクキューよりも優先度が高いです。Promiseのコールバックなどがここに入ります。
非同期処理の流れ
1. 同期処理の実行
- スクリプトが最初に実行されると、すべての同期コードがコールスタックで順次処理されます。
2. 非同期タスクの登録
- setTimeout, fetch, またはPromiseのような非同期処理は、Web APIsによって処理されます
- 処理が完了した後、関連するコールバックがタスクキューまたはマイクロタスクキューに登録されます
3. イベントループの動作
- イベントループは、コールスタックが空になるのを待ち、タスクキューまたはマイクロタスクキューからタスクをコールスタックに移します。
- まずマイクロタスクキューのタスクが優先的に処理され、その後にタスクキューのタスクが処理されます。
具体例
以下のコードを例に具体的な流れを解説します。
console.log("Start");
setTimeout(() => {
console.log("Timeout");
}, 0);
Promise.resolve().then(() => {
console.log("Promise");
});
console.log("End");
1. 同期処理の実行
- console.log("Start") がコールスタックに入り、"Start"が出力される。
- 次に、setTimeoutが実行され、タイマーがWeb APIでセットされる。
- Promise.resolve()が実行され、マイクロタスクキューに.thenコールバックが登録される。
- 最後に、console.log("End") が実行され、"End"が出力される。
2. 非同期処理の実行
- コールスタックが空になると、マイクロタスクキューの.thenコールバックが実行され、"Promise"が出力される。
- 次に、タスクキューからsetTimeoutのコールバックが実行され、"Timeout"が出力される。
出力結果
Start
End
Promise
Timeout
まとめ
同期処理: コールスタックで即座に処理される。
非同期処理: Web APIsやタスクキューで管理され、イベントループによって処理される。
マイクロタスク: タスクキューよりも優先して処理される。
JavaScriptの非同期処理の仕組みを正しく理解することで、非同期タスクを効率よく制御できるようになります。次回は具体的なアプリケーションへの応用例も紹介していきます！
ぜひ、この記事が参考になったら「Like」や「フォロー」をお願いします！コメントでの質問も歓迎です！ 😊
Happy Coding! 🚀
Discussion