Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScriptはなぜシングルスレッドでも非同期処理ができるのか/Why Can Java...

task4233
September 07, 2021

JavaScriptはなぜシングルスレッドでも非同期処理ができるのか/Why Can JavaSctipt Invoke Asynchronous in Single Thread?

JavaScriptはシングルスレッドであることが知られています。そして、Promiseを用いた非同期処理ができることは周知の事実です。では、なぜシングルスレッドで非同期処理ができるのでしょうか?
その点について、非同期処理のための2種類のQueuesについて触れつつ、コードベースでの説明も行います。

task4233

September 07, 2021
Tweet

More Decks by task4233

Other Decks in Technology

Transcript

  1. 非同期処理に欠かせないPromiseオブジェクト State(状態)とValue(値)を持つ ・Stateはfulfilled✅ /rejected❌ /pending⏳ の3種類 ・Valueは結果 Promise(resolve func, reject

    func)で生成 ・fulfilled✅ => resolve funcを実行 ・rejected❌ => reject funcを実行 状態を持てるので、非同期処理に用いられる 6
  2. 2種類のQueues Micro Task Queue ・優先度の高い方のQueue ・process.nextTick, Promise callbackなど Macro Task

    Queue ・優先度が低い方のQueue ・setTimeout, setInterval, setImmediateなど 処理の優先度 ・Call Stack > Micro Task Queue > Macro Task Queue 非同期処理に 用いられる 12
  3. コードベースで考えてみる Call Stack (res) => { console.log(res); } () =>

    { console.log(‘timeout’) } Event Loop Log: Start 19
  4. コードベースで考えてみる Call Stack (res) => { console.log(res); } () =>

    { console.log(‘timeout’) } Event Loop Log: Start 20
  5. コードベースで考えてみる Call Stack (res) => { console.log(res); } () =>

    { console.log(‘timeout’) } Event Loop Log: Start    End 22
  6. コードベースで考えてみる Call Stack (res) => { console.log(res); } () =>

    { console.log(‘timeout’) } Event Loop Log: Start    End 23
  7. コードベースで考えてみる (res) => { console.log(res); } Micro Task Queue ()

    => { console.log(‘timeout’) } Event Loop Log: Start    End 24
  8. コードベースで考えてみる () => { console.log(‘timeout’) } Micro Task Queue Macro

    Task Queue Event Loop Log: Start    End    promise 26
  9. コードベースで考えてみる Call Stack Micro Task Queue Macro Task Queue Event

    Loop Log: Start    End    promise    timeout 27
  10. まとめ JavaScriptはシングルスレッド ・Event LoopとCall Stackを用いて動いている 非同期処理を実現するための2種類のQueue ・Micro Task Queue ・Macro

    Task Queue 処理の優先度 ・Call Stack > Micro Task Queue > Macro Task Queue ありがとうございました! 28
  11. 参考資料 ・✨♻ JavaScript Visualized: Event Loop - DEV Community ・⭐🎀

    JavaScript Visualized: Promises & Async/Await - DEV Community ・Understanding the node.js event loop ・voyagegroup/treasure-javascript-2020: Treasure Frontend 講義資料とか ・ そうだったのか! よくわかる process.nextTick() node.jsのイベントループを 理解する 29