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
430
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
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
430
roppongirb_20250911
igaiga
0
190
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
620
AI開発ツールCreateがAnythingになったよ
tendasato
0
120
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
860
Agile PBL at New Grads Trainings
kawaguti
PRO
1
370
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.5k
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
110
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Typedesign – Prime Four
hannesfritz
42
2.8k
Become a Pro
speakerdeck
PRO
29
5.5k
Documentation Writing (for coders)
carmenintech
74
5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A better future with KSS
kneath
239
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Practical Orchestrator
shlominoach
190
11k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Statistics for Hackers
jakevdp
799
220k
A designer walks into a library…
pauljervisheath
207
24k
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