Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
Search
Kotaro Chiba
June 27, 2020
Technology
1
440
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
JavaScript の実行を制御している `イベントループ` の仕組みに迫ってみます
Kotaro Chiba
June 27, 2020
Tweet
Share
More Decks by Kotaro Chiba
See All by Kotaro Chiba
JavaScript を書き始める前に知っておきたい JavaScript のこと #05
uruha
1
500
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
uruha
1
550
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.5k
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
uruha
1
1.4k
JavaScript を書き始める前に知っておきたい JavaScript のこと
uruha
1
720
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
uruha
1
1.1k
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
480
Other Decks in Technology
See All in Technology
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
240
ガチな登山用デバイスからこんにちは
halka
1
240
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
Android Audio: Beyond Winning On It
atsushieno
0
110
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
110
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
830
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
460
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
480
Featured
See All Featured
Embracing the Ebb and Flow
colly
87
4.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Why Our Code Smells
bkeepers
PRO
339
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Balancing Empowerment & Direction
lara
3
620
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Faster Mobile Websites
deanohume
309
31k
Documentation Writing (for coders)
carmenintech
74
5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Transcript
JavaScript を書き始める前に知 っておきたい JavaScript のこと #03 Kanazawa.js Remote Meetup #04
千葉 弘太郎 1 1
千葉 弘太郎(ちば こうたろう) Kotaro Chiba Twitter: @ur_uha Github: uruha Work:
DMM.com LLC 2 2
前回 JavaScript を書き始める前に知っておきたい JavaScript のこと #02 「ざっくり知る」JavaScript の prototype について
3 3
今回 JavaScript の実⾏順に迫る イベントループ の仕組み 4 4
JavaScript が実⾏される環境 シングルスレッド で⼀度に実⾏できるタスクは1つのみ 5 5
´・ω・` 。o0(じゃあどうやってあんなにたくさんの⾮同期 の処理を実⾏できてるの???) 6 6
´・ω・` 。o0(処理に30秒かかる実⾏があったら30秒間⽌ まっちゃうんですか...???ツライ...) 7 7
実際は... . イベントループ . Web API を駆使して⾮同期的な処理をしているように⾒せている。 8 8
JavaScript は以下のような関係性で処理を⾏っています。 Call Stack ───────→ Web API │ │ │
│ │ │ Event Loop ←──────→ ⏯ Queue 9 9
/** 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
なんとなく 1. start :) -> 3. end ;) -> 2.
exec ! の順で結果が出⼒されるのは予想できる。 11 11
なんでかな? 12 12
/** 1 */ function start() { return 'start :)'; }
Call Stack ───────→ Web API [start()] │ │ │ │ │ │ Event Loop ←──────→ ⏯ Queue start() は call stack で呼び出されて、 start :) が出⼒されて終わる(ポップされる) 13 13
/** 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
Call Stack ───────→ Web API [end()] [after 1000sec] │ │
│ │ │ │ Event Loop ←──────→ ⏯ Queue [() => 'exec !'] 1秒後に callback 内の () => 'exec !' が queue へ。 call stack 側にはまだ end() がいるので、先に end() が 実⾏されます。 15 15
Call Stack ───────→ Web API [() => 'exec !'] │
│ │ │ │ │ Event Loop ←──────→ ⏯ Queue Event loop が call stack に何も無いことを確認して、 queue の callback関数を実⾏します。 16 16
まとめ . 関数の実⾏は call stack で . 関数の処理によっては Web API
を介して callback など queue に待機させる . Event loop は call stack と queue を監視している . Call stack に実⾏する関数が無くなった時 event loop が queue に溜まっている関数を call stack へ移して実⾏ 17 17
ちょっと詳しく Queue にはいくつか種類がある Macrotask setTimeout | setInterval | setImmediate Microtask
process.nextTick | Promise callback ...etc Event loop が実⾏する queue の順序は Microtask > Macrotask の順 18 18
次回 どうしようかな... ´・ω・` OOPとかをプロトタイプで説明してもちょっと過去の産物 になりそうなので、違うネタにする予定 なにか要望ありますか? 19 19