Slide 1
Slide 1 text
JavaScriptは
なぜシングルスレッドでも
非同期処理ができるのか
お昼のLT
2021/09/07
Takashi Mima(@task4233)
Slide 2
Slide 2 text
本LTの目標
・JavaScript(ECMAScript)がシングルスレッドで非同期処理を
実現している方法をざっくり理解すること
本LTの想定対象者
・JavaScriptの基本的な文法を理解している人
・シングルスレッドの概念を理解している人
本LTの非想定対象者
・内部実装にあまり興味がない人
・JavaScriptを全く触れたことがない人
2
Slide 3
Slide 3 text
TL;DR(ECMAScript)
JavaScriptはシングルスレッド
・Event LoopとCall Stackを用いて動いている
非同期処理を実現するための2種類のQueue
・Micro Task Queue
・Macro Task Queue
処理の優先度
・Call Stack > Micro Task Queue > Macro Task Queue
3
Slide 4
Slide 4 text
自己紹介
・Takashi Mima(@task4233)
・芝浦工業大学 M1
・サーバサイドとセキュリティ
・散歩とGoが好き
4
Slide 5
Slide 5 text
JavaScript(以下JS)の変遷
1995 LiveScriptの誕生(後のJS)
1995 JScriptの登場(当時のJSと互換性ナシ)
1997 ECMAに標準化を依頼(いわゆるECMAScript)
2000~ 第3版派と第4版派の軋轢(低迷)
2005~ Ajax, prototype.js, jQuery等の登場(持ち直し)
2008 V8エンジンの登場(JITコンパイルによる高速化)
2009 Node.jsの登場(モジュール管理が可能に)
……
5
Slide 6
Slide 6 text
非同期処理に欠かせないPromiseオブジェクト
State(状態)とValue(値)を持つ
・Stateはfulfilled✅ /rejected❌ /pending⏳ の3種類
・Valueは結果
Promise(resolve func, reject func)で生成
・fulfilled✅ => resolve funcを実行
・rejected❌ => reject funcを実行
状態を持てるので、非同期処理に用いられる
6
Slide 7
Slide 7 text
JavaScriptはシングルスレッド
シングルスレッド
・1度に1つのタスクしか実行できない
・メモリ空間での競合が起きない
Event Loopに従ってタスクを処理する
・タスクを処理する無限ループ
・DOMの更新もタスクの1つ
処理はCall Stackで実行される
・処理のためのStack
・処理を実行するWEB APIにデータを流す
・Pushed -> Invoke -> Pop(& return Value)の順に
7
Slide 8
Slide 8 text
シングルスレッド？
8
Slide 9
Slide 9 text
あるタスクの実行中には
非同期処理を動かせないはず
(シングルスレッドなので)
9
Slide 10
Slide 10 text
Q. どうやって非同期処理してるの？
🤔
10
Slide 11
Slide 11 text
A. Queueを別に持つことで
非同期っぽく逐次処理している
11
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
コードベースで考えてみる
Call Stack
Micro Task
Queue
Macro Task
Queue
Event Loop
Log:
13
Slide 14
Slide 14 text
Log:
コードベースで考えてみる
Call Stack
Micro Task
Queue
Macro Task
Queue
Event Loop
14
Slide 15
Slide 15 text
Log:
コードベースで考えてみる
console.log(‘Start’);
Micro Task
Queue
Macro Task
Queue
Event Loop
15
Slide 16
Slide 16 text
コードベースで考えてみる
Call Stack
Micro Task
Queue
Macro Task
Queue
Event Loop
Log: Start
16
Slide 17
Slide 17 text
コードベースで考えてみる
Call Stack
Micro Task
Queue
() => {
console.log(‘timeout’)
}
Event Loop
Log: Start
17
Slide 18
Slide 18 text
コードベースで考えてみる
Call Stack
Micro Task
Queue
() => {
console.log(‘timeout’)
}
Event Loop
Log: Start
18
Slide 19
Slide 19 text
コードベースで考えてみる
Call Stack
(res) => {
console.log(res);
}
() => {
console.log(‘timeout’)
}
Event Loop
Log: Start
19
Slide 20
Slide 20 text
コードベースで考えてみる
Call Stack
(res) => {
console.log(res);
}
() => {
console.log(‘timeout’)
}
Event Loop
Log: Start
20
Slide 21
Slide 21 text
コードベースで考えてみる
console.log(‘End’);
(res) => {
console.log(res);
}
() => {
console.log(‘timeout’)
}
Event Loop
Log: Start
21
Slide 22
Slide 22 text
コードベースで考えてみる
Call Stack
(res) => {
console.log(res);
}
() => {
console.log(‘timeout’)
}
Event Loop
Log: Start
End
22
Slide 23
Slide 23 text
コードベースで考えてみる
Call Stack
(res) => {
console.log(res);
}
() => {
console.log(‘timeout’)
}
Event Loop
Log: Start
End
23
Slide 24
Slide 24 text
コードベースで考えてみる (res) => {
console.log(res);
}
Micro Task
Queue
() => {
console.log(‘timeout’)
}
Event Loop
Log: Start
End
24
Slide 25
Slide 25 text
コードベースで考えてみる
Call Stack
Micro Task
Queue
() => {
console.log(‘timeout’)
}
Event Loop
Log: Start
End
promise
25
Slide 26
Slide 26 text
コードベースで考えてみる () => {
console.log(‘timeout’)
}
Micro Task
Queue
Macro Task
Queue
Event Loop
Log: Start
End
promise
26
Slide 27
Slide 27 text
コードベースで考えてみる
Call Stack
Micro Task
Queue
Macro Task
Queue
Event Loop
Log: Start
End
promise
timeout
27
Slide 28
Slide 28 text
まとめ
JavaScriptはシングルスレッド
・Event LoopとCall Stackを用いて動いている
非同期処理を実現するための2種類のQueue
・Micro Task Queue
・Macro Task Queue
処理の優先度
・Call Stack > Micro Task Queue > Macro Task Queue
ありがとうございました！ 28
Slide 29
Slide 29 text
参考資料
・✨♻ 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