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 Runtime とはなにか
Search
Yosuke Furukawa
PRO
August 21, 2024
Programming
15
3k
JavaScript Runtime とはなにか
Yosuke Furukawa
PRO
August 21, 2024
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
190
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.9k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.5k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
300
Removing Corepack
yosuke_furukawa
PRO
9
1.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
470
Module Harmony について
yosuke_furukawa
PRO
4
1.8k
LTのやり方
yosuke_furukawa
PRO
16
2.9k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
860
Other Decks in Programming
See All in Programming
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
200
CSC307 Lecture 05
javiergs
PRO
0
500
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
masahiro_nishimi
5
360
Basic Architectures
denyspoltorak
0
660
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
180
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
600
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
170
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
640
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
140
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
380
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
130
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
Featured
See All Featured
Odyssey Design
rkendrick25
PRO
1
490
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.7k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
1
98
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
3.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
60
42k
Utilizing Notion as your number one productivity tool
mfonobong
3
220
Being A Developer After 40
akosma
91
590k
SEO for Brand Visibility & Recognition
aleyda
0
4.2k
Mobile First: as difficult as doing things right
swwweet
225
10k
[SF Ruby Conf 2025] Rails X
palkan
1
740
Transcript
JavaScript Runtime ͱͳʹ͔ 2024/08/19 @ Offers Meetup
X: @yosuke_furukawa GitHub: yosuke-furukawa
CFP ืूதʂʂʂʂʂ
Node.js is a free, open-source, cross- platform JavaScript Runtime Environment
Deno is the open-source JavaScript runtime for the modern web.
Bun is a new JavaScript runtime built from scratch to
serve the modern JavaScript ecosystem
ͦͦ Runtime ͬͯͳΜͩ
ຊޠͷࣙॻతͳҙຯ: ࣮ߦதͷ ~
͑ͬܗ༰ࢺʁ
࣮ͦ͏ɻ Runtime System, Runtime library, Runtime Environment Έ͍ͨʹ͏ɻ
ݴޠ compile time ͱ run time ʹ͔Ε ͯͯɺ run time
ɺͭ·Γ࣮ߦதͷ࣌ʹඞཁ ͳΈΛࢦͯ͠ Runtime System Runtime Environment, Runtime Library ͱݴͬͨΓ͢Δɻ
JSͷ(Node.js, Deno, Bunͷྫ)Ͱ Runtime = Runtime Environment Λলུͨ͠ͷͱ͍ͯͬͯ͠Δ
ଞͷݴޠͰʁ
PHPͷ߹: Zend EngineͱݺΕΔEngine͕ίϯύΠ ϧٴͼRuntime Engineͱͯ͠ৼΔͬͯ ͍Δɻ
Javaͷ߹: Java Runtime EnvironmentͱJava VMʹ ͔ΕͯΔɻVM͕OS, CPUͷநԽΛओ ʹ୲͍ɺRuntime EnvironmentͦΕҎ֎ ͷॲཧΛ͞ΕͯΔɻ(JSʹ͍ۙ)
Rustͷ߹: Runtimeͷ͚۠Έ͍ͨͳͷͳ͍ɺಛ ʹΑ͋͘ΔRuntime࣌ͷGCॲཧଘࡏ͠ͳ ͍ɻҰ෦ͷasync IOtokioͳͲͷ3rd party library͕୲ͬͯΔ
ͬ͘͢͝ᐆດ
ͬͱ͍͏ͱ
͔͜͜Β͜͜·Ͱ࣮͢Δͷ͕ "Runtime Environment" ͩɻ ͱ͍͏໌֬ͳఆٛͳ͍ͱࢥͬͯΔɻ
ͳ͔ͥͱ͍͏ͱɺݴޠઃܭऀʹΑͬͯ ϓϩάϥϛϯάݴޠͱͦΕΛऔΓר͘पล ͷػೳΛͲ͏֊͚ͯ͠දݱ͍ͯ͠Δ͔ ͕ҧ͏͔Βɻ
ͨ·ͨ· JavaScript ݴޠͷίΞ༷ (ECMAScript)ͱपลͷػೳ༷͕͔Ε ͯɺϒϥβαʔόʹΈࠐ·ΕͯΔɻ
ݴޠͷίΞ༷ͱαʔό༻్Ͱར༻͢Δػ ೳ܈Λߏͨ͠ͷ͕ɺ Node.jsͰ͋Γ DenoͰ͋ΓBunͷΑ͏ͳ͜͜Ͱ Runtime ͱݺΕͯΔͷʹͳΔɻ
BrowserRuntimeͱ͍͏ᐆດͳఆٛͷ ଆʹೖΕͯ͠·͑RuntimeʹͳΓ͑Δ
ͳͷͰ
Runtimeͱ͍͏ᐆດͳఆٛΛཧղ͠Α͏ͱ ͢ΔͷͰͳ͘ɺ
۩ମతͳݴޠڥʹ͓͍ͯɺ Ͳ͏͍͏ػೳ͕ݴޠଆͰఏڙ͞Ε͍ͯͯɺ Ͳ͏͍͏ػೳ͕पลଆͰఏڙ͞Ε͍ͯΔ͔ ͱ͍͏۩ମతͳػೳΛཧղ͢Δ΄͏͕͔ Γ͔ͬͨ͢Γ͢Δɻ
JavaScriptͱपลΛؚΊͨͷʹ ͦͦͲΜͳػೳ͕͋Δ͔
JavaScript (+runtime) ػೳҰཡ • ࣈ۟ղੳ, ߏจղੳ (͍ΘΏΔ parser) • ߏจ࠷దԽ
(͍ΘΏΔ JIT) • ϝϞϦཧ(ΨϕʔδίϨΫγϣϯ) • ΠϕϯτϋϯυϦϯά • ඇಉظॲཧػߏ • CPUநԽ • OSநԽ • File/Storage IO, Network IO • JS API (String, Number, etc) • ଞ API (DOM, Network, etc)
JavaScript (+runtime) ػೳҰཡ • ࣈ۟ղੳ, ߏจղੳ (͍ΘΏΔ parser) • ߏจ࠷దԽ
(͍ΘΏΔ JIT) • ϝϞϦཧ(ΨϕʔδίϨΫγϣϯ) • ΠϕϯτϋϯυϦϯά • ඇಉظॲཧػߏ • CPUநԽ • OSநԽ • File/Storage IO, Network IO • JS API (String, Number, etc) • ଞ API (DOM, Network, etc) JS Engine ͷػೳ Runtime ͷػೳ ྆ํ ͷػೳ
Πϝʔδ JS Runtime JS Engine Parser JIT Memory Management CPU
JS API (String, Number etc) Async Processing File Storage IO, Network IO Event Handling OS Other API (DOM, Network etc)
͜͜·Ͱͷ·ͱΊ
Runtime ͱͳʹ͔ • Compile time / run time Ͱ͚ͨͱ͖ͷ࣮ߦதͷಈ͖ʹؔ͢ΔͷΛࢦ ͢ɻ
• ࣮ఆٛᐆດ • ʮ xxx Runtime ͳΜͰ͔͢?ʯΈ͍ͨͳ࣭͋·Γ͠ͳ͍ɻ • ݴޠͷίΞͱͳΔػೳ͕͋ΓɺͦͷपลΛͲ͏දݱ͢Δ͔Ͱܾ·Δɻ • ͔ͩΒΘ͔Γʹ͍͘ɺΘ͔ͬͨΑ͏ͰΘ͔Βͳ͍ɻ
JavaScript ʹ͓͚Δ Runtime Կ͕දݱ ͞ΕͯΔ͔ • ΠϕϯτϋϯυϦϯά • ඇಉظॲཧػߏ •
File IO • Network IO • OSநԽ • ͦΕΒΛѻ͏ͨΊͷAPI • DOM • Network (fetch etc) • fs, http, child_process • etc
ͣͬͱ͜͜·Ͱ Browser / Server Λ͋·Γ ͚ͣʹRuntimeͱͯ͠հ͖ͯͨ͠
࣮͜ͷBrowser/ServerपΓ͕࠷ۙ໘ ന͍ಈ͖Λݟ͍ͤͯΔɻ
None
WinterCG • Server ༻్Ͱར༻͞ΕͯΔ Runtime ͷ࠷খݶͷڞ௨APIηοτΛ࡞Γɺ૬ޓޓ ੑΛ্͛Α͏ͱ͍͏ࢼΈ • ͦͷதͰʮͳΔ͘ʯBrowserʹ͍ۙAPIΛ࠾༻͠Α͏ͱ͍ͯ͠Δɻ •
ྫ: • URL, Readable/Writable Stream, Request/Response, etc • https://common-min-api.proposal.wintercg.org/#api-index
# Browser API Server API JS API ͜͜ͷڞ௨߲ʹͳΓಘΔ෦ΛͳΔ͘ େ͖͘Ͱ͖ͳ͍͔ͱ͍͏ࢼΈ
ͯ͞ɺຊ
Node.js / Deno / Bun ͦΕͧΕͷҧ͍ʹ͍ͭͯ
ઓུ໘
ڞ௨ઓུ • WinterCGͷରԠΛਐΊͭͭɺ͓ޓ͍ͷྑ͍ͱ͜Ζ͕͋Εޙ͍Ͱ࠾༻͍ͯ͘͠ํ • Node.js Ͱ࠷৽Ͱ strip-types storage ͷରԠ͕ਐΜͰΔ(Deno,
Bunͷػೳͷै) • DenoNode.js Compatibility Λ্͛ͯnpmͷࢿ࢈͑ΔΑ͏ʹ͍ͯ͠Δ(Node.jsطଘ ࢿ࢈ͷै) • Bun WinterCG ࢀՃද໌͍ͯ͠ͳ͍͕ɺ Web API Interop Ͱ͖ΔൣғͰਐΊͯ Δɻ͞ΒʹNode.jsͷCompatibilityΛ্͛ͯnpmͷࢿ࢈͑ΔΑ͏ʹ͍ͯ͠Δ(Node.js طଘࢿ࢈ͷै)
ࠩผԽϙΠϯτ • Node.js • ػೳ໘ʹؔͯ͠େ͖ͳมߋͤͣʹɺখ͍͞มߋͷதͰଞ ͷruntimeͱͷࠩΛݮΒ͍ͯͬͯ͠Δɻ • ඇػೳཁ݅໘ͰͷύϑΥʔϚϯε্ɺηΩϡϦςΟରԠɺ ӡ༻࣌ͷੳํ๏ͷՃͳͲ͕ߦΘΕͯΔɻ ख़ͯ͠Δҹ
ࠩผԽϙΠϯτ • Deno • ͻͱͭηΩϡϦςΟॏࢹɺOSͷػೳΛ͏ࡍʹύʔϛογϣϯ͕ཁ ٻ͞ΕΔͨΊɺҙਤ͠ͳ͍ϑΝΠϧૢ࡞ωοτϫʔΫૢ࡞Λ͛Δ • Deno Fresh ͳͲͷ
ϑϨʔϜϫʔΫެ͕ࣜಉ͡organizationͰ։ൃ͠ ͓ͯΓɺपลͷπʔϧྨͦ͜Ͱαϙʔτ͞ΕͯΔҹɻ • Կͱݴͬͯ࠷ۙJSRɺJavaScript Registry ͱͯ͠ొɻ
ࠩผԽϙΠϯτ • Deno • JSR • TypeScript Λͦͷ··ιʔεͱͯ͠publishͯ͠ɺதͰίϯύΠϧͯ͠JavaScriptʹมͰ ͖Δ •
npm ͷ publish ઌ͔Β JSR Λܦ༝ͯ࣋ͬͯ͘͠Δ͜ͱͰ͖ΔͷͰɺطଘࢿ࢈͔ΒͷҠ ߦͰ͖Δ • ԿΑΓɺ ESM Λ࠷ॳͷλʔήοτͱ͢ΔͷͰɺ CJS ͕جຊʹͳ͍ͬͯΔ npm ͱҰઢ Λը͢ ৽͍͠ϨδετϦΛඋ͑ͯɺNode.js͔ΒϢʔβʔΛͲ͜·Ͱ࣋ͬͯ͜ΕΔ͔
ࠩผԽϙΠϯτ • Bun • ͱʹ͔͘ύϑΥʔϚϯεɺ͕ͦ͜͞ਖ਼ٛ • Node.jsޓੑॏࢹ • blog ΛݟͯຖճඞͣύϑΥʔϚϯεվળͱNode.jsޓੑ্͕ॻ͍ͯ͋Δ
• Next.js / Remix / Nuxt.js ͱ͔͕ಈ͘ΑʂΈ͍ͨͳΤϯδχΞਓؾͷߴ͍ϥΠϒ ϥϦ͕طʹಈ͘Ξϐʔϧ͞ΕͯΔ
ࠩผԽϙΠϯτ • Bun • ͔ͳʔΓಠࣗ࿏ઢɻࢥ͍͖ͭΈ͍ͨͳ͜ͱΛαοͱ࣮ͯ͠ Δ BunͷதͰCݴޠ͔͚ͨΒͲ͏͔ͳʙʁ ཌ: ࣮Ͱ͖ͨʔ
ࠩผԽϙΠϯτ • Bun • package.json Ͱউखʹ jsonc ͬͯΔ͠ɺ console
async iterationͩ͠ɺΊͪΌͪ͘Όಠࣗ࿏ઢɻ • Զͷ࠷ڧͷ runtime Λ࡞ͬͯΔͥײ͕͋Δɻ • ݏ͍͡Όͳ͍ɻ Performance is all you need!! And crazy ideas are all I need!!!
ମ੍໘
ମ੍ • Node.js: • Ϧʔμʔෆࡏ • େنOSS։ൃऀମ੍ɺ֤͝ͱʹWGΛ࡞ΓɺTSCͱݺ ΕΔҕһձͰํੑΛܾΊΔɻίϛολʔΛͤͯ͞ମ੍ Λܧଓͤ͞ΔΑ͏ʹ͍ͯ͠Δɻ Ϧʔμʔ͕ډͳ͍ͱ͜Ζͱ֤ϝϯόʔʹΑͬͯ߹ٞͰܾ·ΔॴWeb
ͷඪ४ԽҕһձͱࣅͯΔ
ମ੍ • Deno: • Ϧʔμʔ: Ryan Dahlࢯ • OSS։ൃऀͱDeno CompanyͰͷձࣾ։ൃͷϋΠϒϦου
• ։ൃϓϩηεجຊΦʔϓϯɺ(Issue, PR, RFC) • Deno Deploy ͷ༻ࢧԉͳͲ͋ΓɺίϛϡχςΟͱίΞνʔϜͱ༻ࢧԉ ͞ΕͯΔνʔϜͷࡾҐҰମ Redisͱ͔VercelͷOSS + ༻ͰͷઓུʹࣅͯΔ
ମ੍ • Bun: • Ϧʔμʔ: Jarred Summerࢯ • BunΛfull timeͰ։ൃ͠ɺ
ϗεςΟϯάڥͳͲΛ࡞ͬͯJS։ൃମݧΛ্ͤ͞ Δ໊Ͱձ্ཱࣾͪ͛ͯΔ (Oven)ɻ • OSS Contributors + ovenࣾͷϋΠϒϦουମ੍ • ༻Ϣʔεέʔεͱ͔ฉ͍ͨ͜ͱແ͍ͷͰɺϚωλΠζΛͲ͏͢Δͷ͔ෆ໌ ମ੍࡞ΒΕͯΔ͚Ͳɺ·ͩ͜Ε͔Βײ͕͋Δɻ
·ͱΊ
·ͱΊ • Node.jsख़ͯ͠Δɻ • DenoJSRͳͲͰΤίγεςϜΛ࡞Γม͑ͭͭɺطଘΤίγεςϜ͔ΒͷΓ ͑Λૂ͏ɻ • Bunಠࣗ࿏ઢɺݏ͍͡Όͳ͍ɻ • ࡾऀࡾ༷ɺࠩผԽ͞Ε͖ͯͭͭ͋Δ͠ɺ͓͠Ζ͍ɻ
• ͬͱΓ্͕ͬͯ͘Εɺͦͯ͠ JSConf.jp ͳͲͰൃදٻΉ