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

JavaScript を書き始める前に知っておきたい JavaScript のこと #03

JavaScript を書き始める前に知っておきたい JavaScript のこと #03

JavaScript の実行を制御している `イベントループ` の仕組みに迫ってみます

A85bfbcb7db07e936c0125487e7799fa?s=128

Kotaro Chiba

June 27, 2020
Tweet

Transcript

  1. JavaScript を書き始める前に知 っておきたい JavaScript のこと #03 Kanazawa.js Remote Meetup #04

    千葉 弘太郎 1 1
  2. 千葉 弘太郎(ちば こうたろう) Kotaro Chiba Twitter: @ur_uha Github: uruha Work:

    DMM.com LLC 2 2
  3. 前回 JavaScript を書き始める前に知っておきたい JavaScript のこと #02 「ざっくり知る」JavaScript の prototype について

    3 3
  4. 今回 JavaScript の実⾏順に迫る イベントループ の仕組み 4 4

  5. JavaScript が実⾏される環境 シングルスレッド で⼀度に実⾏できるタスクは1つのみ 5 5

  6. ´・ω・` 。o0(じゃあどうやってあんなにたくさんの⾮同期 の処理を実⾏できてるの???) 6 6

  7. ´・ω・` 。o0(処理に30秒かかる実⾏があったら30秒間⽌ まっちゃうんですか...???ツライ...) 7 7

  8. 実際は... . イベントループ . Web API を駆使して⾮同期的な処理をしているように⾒せている。 8 8

  9. JavaScript は以下のような関係性で処理を⾏っています。 Call Stack ───────→ Web API │ │ │

    │ │ │ Event Loop ←──────→ ⏯ Queue 9 9
  10. /** 1 */ function start() { return 'start :)'; }

    /** 2 */ function asyncFunc() { return setIimeout(() => 'exec !', 1000); } /** 3 */ function end() { return 'end ;)'; } start(); // start :) asyncFunc(); // exec ! end(); // end ;) 10 10
  11. なんとなく 1. start :) -> 3. end ;) -> 2.

    exec ! の順で結果が出⼒されるのは予想できる。 11 11
  12. なんでかな? 12 12

  13. /** 1 */ function start() { return 'start :)'; }

    Call Stack ───────→ Web API [start()] │ │ │ │ │ │ Event Loop ←──────→ ⏯ Queue start() は call stack で呼び出されて、 start :) が出⼒されて終わる(ポップされる) 13 13
  14. /** 2 */ function asyncFunc() { return setIimeout(() => 'exec

    !', 1000); } Call Stack ───────→ Web API [asyncFunc()] [() => 'exec !', 1000sec] [setTimeout()] │ │ │ │ │ │ │ Event Loop ←──────→ ⏯ Queue asyncFunc() が実⾏されて setTimeout が callback を WebAPI に追加します。 asyncFunc, setTimeout はこれでポップ。 14 14
  15. Call Stack ───────→ Web API [end()] [after 1000sec] │ │

    │ │ │ │ Event Loop ←──────→ ⏯ Queue [() => 'exec !'] 1秒後に callback 内の () => 'exec !' が queue へ。 call stack 側にはまだ end() がいるので、先に end() が 実⾏されます。 15 15
  16. Call Stack ───────→ Web API [() => 'exec !'] │

    │ │ │ │ │ Event Loop ←──────→ ⏯ Queue Event loop が call stack に何も無いことを確認して、 queue の callback関数を実⾏します。 16 16
  17. まとめ . 関数の実⾏は call stack で . 関数の処理によっては Web API

    を介して callback など queue に待機させる . Event loop は call stack と queue を監視している . Call stack に実⾏する関数が無くなった時 event loop が queue に溜まっている関数を call stack へ移して実⾏ 17 17
  18. ちょっと詳しく Queue にはいくつか種類がある Macrotask setTimeout | setInterval | setImmediate Microtask

    process.nextTick | Promise callback ...etc Event loop が実⾏する queue の順序は Microtask > Macrotask の順 18 18
  19. 次回 どうしようかな... ´・ω・` OOPとかをプロトタイプで説明してもちょっと過去の産物 になりそうなので、違うネタにする予定 なにか要望ありますか? 19 19