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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Yosuke Furukawa
PRO
August 21, 2024
Programming
3.1k
15
Share
JavaScript Runtime とはなにか
Yosuke Furukawa
PRO
August 21, 2024
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
220
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
5.1k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.7k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
320
Removing Corepack
yosuke_furukawa
PRO
9
1.9k
Strip Types と Storage
yosuke_furukawa
PRO
4
490
Module Harmony について
yosuke_furukawa
PRO
4
1.9k
LTのやり方
yosuke_furukawa
PRO
16
2.9k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
890
Other Decks in Programming
See All in Programming
AIベース静的検査器の偽陽性率を抑える工夫3選
orgachem
PRO
3
350
AIと共に生きる技術選定 2026
sgash708
0
100
의존성 주입과 모듈화
fornewid
0
150
AI時代のPhpStorm最新事情 #phpcon_odawara
yusuke
0
190
[RubyKaigi 2026] Require Hooks
palkan
1
220
tRPCの概要と少しだけパフォーマンス
misoton665
2
220
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
shoheimitani
4
850
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
studio_graph
0
410
CursorとClaudeCodeとCodexとOpenCodeを実際に比較してみた
terisuke
1
480
ふりがな Deep Dive try! Swift Tokyo 2026
watura
0
230
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
seike460
PRO
0
150
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
16
5.6k
Featured
See All Featured
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
150
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.2k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.6k
The Curse of the Amulet
leimatthew05
1
11k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
190
Visualization
eitanlees
150
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
680
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
The Cult of Friendly URLs
andyhume
79
6.8k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
180
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 ͳͲͰൃදٻΉ