JavaScript Runtime とはなにか

by Yosuke Furukawa

Slide 1

Slide 1 text

JavaScript Runtime ͱ͸ͳʹ͔ 2024/08/19 @ Offers Meetup

Slide 2

Slide 2 text

X: @yosuke_furukawa GitHub: yosuke-furukawa

Slide 3

Slide 3 text

CFP ืूதʂʂʂʂʂ

Slide 4

Slide 4 text

Node.js is a free, open-source, cross- platform JavaScript Runtime Environment

Slide 5

Slide 5 text

Deno is the open-source JavaScript runtime for the modern web.

Slide 6

Slide 6 text

Bun is a new JavaScript runtime built from scratch to serve the modern JavaScript ecosystem

Slide 7

Slide 7 text

ͦ΋ͦ΋ Runtime ͬͯͳΜͩ

Slide 8

Slide 8 text

೔ຊޠͷࣙॻతͳҙຯ: ࣮ߦதͷ ~

Slide 9

Slide 9 text

͑ͬܗ༰ࢺʁ

Slide 10

Slide 10 text

࣮͸ͦ͏ɻ Runtime System, Runtime library, Runtime Environment Έ͍ͨʹ࢖͏ɻ

Slide 11

Slide 11 text

ݴޠ͸ compile time ͱ run time ʹ෼͔Ε ͯͯɺ run time ɺͭ·Γ࣮ߦதͷ࣌ʹඞཁ ͳ࢓૊ΈΛࢦͯ͠ Runtime System ΍ Runtime Environment, Runtime Library ͱݴͬͨΓ͢Δɻ

Slide 12

Slide 12 text

JSͷ෼໺(Node.js, Deno, Bunͷྫ)Ͱ͸ Runtime = Runtime Environment Λলུͨ͠΋ͷͱͯ͠࢖͍ͬͯΔ

Slide 13

Slide 13 text

ଞͷݴޠͰ͸ʁ

Slide 14

Slide 14 text

PHPͷ৔߹: Zend Engineͱݺ͹ΕΔEngine͕ίϯύΠ ϧٴͼRuntime Engineͱͯ͠ৼΔ෣ͬͯ ͍Δɻ

Slide 15

Slide 15 text

Javaͷ৔߹: Java Runtime EnvironmentͱJava VMʹ ෼͔ΕͯΔɻVM͕OS, CPUͷந৅ԽΛओ ʹ୲͍ɺRuntime Environment͸ͦΕҎ֎ ͷॲཧΛ೚͞ΕͯΔɻ(JSʹ͍ۙ)

Slide 16

Slide 16 text

Rustͷ৔߹: Runtimeͷ۠෼͚Έ͍ͨͳ΋ͷ͸ͳ͍ɺಛ ʹΑ͋͘ΔRuntime࣌ͷGCॲཧ͸ଘࡏ͠ͳ ͍ɻҰ෦ͷasync IO͸tokioͳͲͷ3rd party library͕୲ͬͯΔ

Slide 17

Slide 17 text

ͬ͘͢͝ᐆດ

Slide 18

Slide 18 text

΋ͬͱ͍͏ͱ

Slide 19

Slide 19 text

͔͜͜Β͜͜·Ͱ࣮૷͢Δ΋ͷ͕ "Runtime Environment" ͩɻ ͱ͍͏໌֬ͳఆٛ͸ͳ͍ͱࢥͬͯΔɻ

Slide 20

Slide 20 text

ͳ͔ͥͱ͍͏ͱɺݴޠઃܭऀʹΑͬͯ ϓϩάϥϛϯάݴޠͱͦΕΛऔΓר͘पล ͷػೳΛͲ͏֊૚෼͚ͯ͠දݱ͍ͯ͠Δ͔ ͕ҧ͏͔Βɻ

Slide 21

Slide 21 text

ͨ·ͨ· JavaScript ͸ݴޠͷίΞ࢓༷ (ECMAScript)ͱपลͷػೳ࢓༷͕෼͔Ε ͯɺϒϥ΢β΍αʔόʹ૊Έࠐ·ΕͯΔɻ

Slide 22

Slide 22 text

ݴޠͷίΞ࢓༷ͱαʔό༻్Ͱར༻͢Δػ ೳ܈Λߏ੒ͨ͠΋ͷ͕ɺ Node.jsͰ͋Γ DenoͰ͋ΓBunͷΑ͏ͳ͜͜Ͱ Runtime ͱݺ͹ΕͯΔ΋ͷʹͳΔɻ

Slide 23

Slide 23 text

Browser΋Runtimeͱ͍͏ᐆດͳఆٛͷ಺ ଆʹೖΕͯ͠·͑͹RuntimeʹͳΓ͑Δ

Slide 24

Slide 24 text

ͳͷͰ

Slide 25

Slide 25 text

Runtimeͱ͍͏ᐆດͳఆٛΛཧղ͠Α͏ͱ ͢ΔͷͰ͸ͳ͘ɺ

Slide 26

Slide 26 text

۩ମతͳݴޠ؀ڥʹ͓͍ͯɺ Ͳ͏͍͏ػೳ͕ݴޠଆͰఏڙ͞Ε͍ͯͯɺ Ͳ͏͍͏ػೳ͕पลଆͰఏڙ͞Ε͍ͯΔ͔ ͱ͍͏۩ମతͳػೳΛཧղ͢Δ΄͏͕෼͔ Γ΍͔ͬͨ͢Γ͢Δɻ

Slide 27

Slide 27 text

JavaScriptͱपลΛؚΊͨ΋ͷʹ͸ ͦ΋ͦ΋ͲΜͳػೳ͕͋Δ͔

Slide 28

Slide 28 text

JavaScript (+runtime) ػೳҰཡ • ࣈ۟ղੳ, ߏจղੳ (͍ΘΏΔ parser) • ߏจ࠷దԽ (͍ΘΏΔ JIT) • ϝϞϦ؅ཧ(ΨϕʔδίϨΫγϣϯ) • ΠϕϯτϋϯυϦϯά • ඇಉظॲཧػߏ • CPUந৅Խ • OSந৅Խ • File/Storage IO, Network IO • JS API (String, Number, etc) • ଞ API (DOM, Network, etc)

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Πϝʔδ 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)

Slide 31

Slide 31 text

͜͜·Ͱͷ·ͱΊ

Slide 32

Slide 32 text

Runtime ͱ͸ͳʹ͔ • Compile time / run time Ͱ෼͚ͨͱ͖ͷ࣮ߦதͷಈ͖ʹؔ͢Δ΋ͷΛࢦ ͢ɻ • ࣮͸ఆٛ͸ᐆດ • ʮ xxx ͸ Runtime ͳΜͰ͔͢?ʯΈ͍ͨͳ࣭໰͸͋·Γ͠ͳ͍ɻ • ݴޠͷίΞͱͳΔػೳ͕͋ΓɺͦͷपลΛͲ͏දݱ͢Δ͔Ͱܾ·Δɻ • ͔ͩΒΘ͔Γʹ͍͘ɺΘ͔ͬͨΑ͏ͰΘ͔Βͳ͍ɻ

Slide 33

Slide 33 text

JavaScript ʹ͓͚Δ Runtime ͸Կ͕දݱ ͞ΕͯΔ͔ • ΠϕϯτϋϯυϦϯά • ඇಉظॲཧػߏ • File IO • Network IO • OSந৅Խ • ͦΕΒΛѻ͏ͨΊͷAPI • DOM • Network (fetch etc) • fs, http, child_process • etc

Slide 34

Slide 34 text

ͣͬͱ͜͜·Ͱ Browser / Server Λ͋·Γ ෼͚ͣʹRuntimeͱͯ͠঺հ͖ͯͨ͠

Slide 35

Slide 35 text

࣮͸͜ͷBrowser/ServerपΓ͕࠷ۙ͸໘ ന͍ಈ͖Λݟ͍ͤͯΔɻ

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

WinterCG • Server ༻్Ͱར༻͞ΕͯΔ Runtime ͷ࠷খݶͷڞ௨APIηοτΛ࡞Γɺ૬ޓޓ ׵ੑΛ্͛Α͏ͱ͍͏ࢼΈ • ͦͷதͰʮͳΔ΂͘ʯBrowserʹ͍ۙAPIΛ࠾༻͠Α͏ͱ͍ͯ͠Δɻ • ྫ: • URL, Readable/Writable Stream, Request/Response, etc • https://common-min-api.proposal.wintercg.org/#api-index

Slide 38

Slide 38 text

# Browser API Server API JS API ͜͜ͷڞ௨߲ʹͳΓಘΔ෦෼ΛͳΔ΂͘ େ͖͘Ͱ͖ͳ͍͔ͱ͍͏ࢼΈ

Slide 39

Slide 39 text

ͯ͞ɺຊ୊

Slide 40

Slide 40 text

Node.js / Deno / Bun ͦΕͧΕͷҧ͍ʹ͍ͭͯ

Slide 41

Slide 41 text

ઓུ໘

Slide 42

Slide 42 text

ڞ௨ઓུ • WinterCG΁ͷରԠΛਐΊͭͭɺ͓ޓ͍ͷྑ͍ͱ͜Ζ͕͋Ε͹ޙ௥͍Ͱ࠾༻͍ͯ͘͠ํ਑ • Node.js Ͱ͸࠷৽Ͱ strip-types ΍ storage ͷରԠ͕ਐΜͰΔ(Deno, Bunͷػೳ΁ͷ௥ै) • Deno͸Node.js Compatibility Λ্͛ͯnpmͷࢿ࢈΋࢖͑ΔΑ͏ʹ͍ͯ͠Δ(Node.jsطଘ ࢿ࢈΁ͷ௥ै) • Bun͸ WinterCG ΁͸ࢀՃද໌͍ͯ͠ͳ͍͕ɺ Web API Interop ͸Ͱ͖ΔൣғͰਐΊͯ Δɻ͞ΒʹNode.jsͷCompatibilityΛ্͛ͯnpmͷࢿ࢈΋࢖͑ΔΑ͏ʹ͍ͯ͠Δ(Node.js طଘࢿ࢈΁ͷ௥ै)

Slide 43

Slide 43 text

ࠩผԽϙΠϯτ • Node.js • ػೳ໘ʹؔͯ͠͸େ͖ͳมߋ͸ͤͣʹɺখ͍͞มߋͷதͰଞ ͷruntimeͱͷࠩΛݮΒ͍ͯͬͯ͠Δɻ • ඇػೳཁ݅໘ͰͷύϑΥʔϚϯε޲্ɺηΩϡϦςΟରԠɺ ӡ༻࣌ͷ෼ੳํ๏ͷ௥ՃͳͲ͕ߦΘΕͯΔɻ ੒ख़ͯ͠Δҹ৅

Slide 44

Slide 44 text

ࠩผԽϙΠϯτ • Deno • ͻͱͭ͸ηΩϡϦςΟॏࢹɺOSͷػೳΛ࢖͏ࡍʹύʔϛογϣϯ͕ཁ ٻ͞ΕΔͨΊɺҙਤ͠ͳ͍ϑΝΠϧૢ࡞΍ωοτϫʔΫૢ࡞Λ๷͛Δ • Deno Fresh ͳͲͷ ϑϨʔϜϫʔΫ΋ެ͕ࣜಉ͡organizationͰ։ൃ͠ ͓ͯΓɺपลͷπʔϧྨ͸ͦ͜Ͱαϙʔτ͞ΕͯΔҹ৅ɻ • Կͱݴͬͯ΋࠷ۙ͸JSRɺJavaScript Registry ͱͯ͠ొ৔ɻ

Slide 45

Slide 45 text

ࠩผԽϙΠϯτ • Deno • JSR • TypeScript Λͦͷ··ιʔεͱͯ͠publishͯ͠ɺதͰίϯύΠϧͯ͠JavaScriptʹม׵Ͱ ͖Δ • npm ͷ publish ઌ͔Β JSR Λܦ༝ͯ࣋ͬͯ͘͠Δ͜ͱ΋Ͱ͖ΔͷͰɺطଘࢿ࢈͔ΒͷҠ ߦ΋Ͱ͖Δ • ԿΑΓɺ ESM Λ࠷ॳͷλʔήοτͱ͢ΔͷͰɺ CJS ͕جຊʹͳ͍ͬͯΔ npm ͱ͸Ұઢ Λը͢ ৽͍͠ϨδετϦΛඋ͑ͯɺNode.js͔ΒϢʔβʔΛͲ͜·Ͱ࣋ͬͯ͜ΕΔ͔

Slide 46

Slide 46 text

ࠩผԽϙΠϯτ • Bun • ͱʹ͔͘ύϑΥʔϚϯεɺ଎͕ͦ͜͞ਖ਼ٛ • Node.jsޓ׵ੑॏࢹ • blog Λݟͯ΋ຖճඞͣύϑΥʔϚϯεվળͱNode.jsޓ׵ੑ޲্͕ॻ͍ͯ͋Δ • Next.js / Remix / Nuxt.js ͱ͔͕ಈ͘ΑʂΈ͍ͨͳΤϯδχΞਓؾͷߴ͍ϥΠϒ ϥϦ͕طʹಈ͘Ξϐʔϧ͞ΕͯΔ

Slide 47

Slide 47 text

ࠩผԽϙΠϯτ • Bun • ͔ͳʔΓಠࣗ࿏ઢɻࢥ͍͖ͭΈ͍ͨͳ͜ͱΛαοͱ࣮૷ͯ͠ Δ BunͷதͰCݴޠ͔͚ͨΒͲ͏͔ͳʙʁ ཌ೔: ࣮૷Ͱ͖ͨʔ

Slide 48

Slide 48 text

ࠩผԽϙΠϯτ • Bun • package.json Ͱ͸উखʹ jsonc ࢖ͬͯΔ͠ɺ console ͸ async iterationͩ͠ɺΊͪΌͪ͘Όಠࣗ࿏ઢɻ • Զͷ࠷ڧͷ runtime Λ࡞ͬͯ΍Δͥײ͕͋Δɻ • ݏ͍͡Όͳ͍ɻ Performance is all you need!! And crazy ideas are all I need!!!

Slide 49

Slide 49 text

ମ੍໘

Slide 50

Slide 50 text

ମ੍ • Node.js: • Ϧʔμʔෆࡏ • େن໛OSS։ൃऀମ੍ɺ֤෼໺͝ͱʹWGΛ࡞ΓɺTSCͱݺ͹ ΕΔҕһձͰํ޲ੑΛܾΊΔɻίϛολʔΛ੒௕ͤͯ͞ମ੍ Λܧଓͤ͞ΔΑ͏ʹ͍ͯ͠Δɻ Ϧʔμʔ͕ډͳ͍ͱ͜Ζͱ֤ϝϯόʔʹΑͬͯ߹ٞͰܾ·Δॴ͸Web ͷඪ४ԽҕһձͱࣅͯΔ

Slide 51

Slide 51 text

ମ੍ • Deno: • Ϧʔμʔ: Ryan Dahlࢯ • OSS։ൃऀͱDeno CompanyͰͷձࣾ։ൃͷϋΠϒϦου • ։ൃϓϩηε͸جຊΦʔϓϯɺ(Issue, PR, RFC) • Deno Deploy ͷ঎༻ࢧԉͳͲ΋͋ΓɺίϛϡχςΟͱίΞνʔϜͱ঎༻ࢧԉ ͞ΕͯΔνʔϜͷࡾҐҰମ Redisͱ͔VercelͷOSS + ঎༻ͰͷઓུʹࣅͯΔ

Slide 52

Slide 52 text

ମ੍ • Bun: • Ϧʔμʔ: Jarred Summerࢯ • BunΛfull timeͰ։ൃ͠ɺ ϗεςΟϯά؀ڥͳͲΛ࡞ͬͯJS։ൃମݧΛ޲্ͤ͞ Δ໊໨Ͱձࣾ΋্ཱͪ͛ͯΔ (Oven)ɻ • OSS Contributors + ovenࣾͷϋΠϒϦουମ੍ • ঎༻Ϣʔεέʔεͱ͔͸ฉ͍ͨ͜ͱແ͍ͷͰɺϚωλΠζΛͲ͏͢Δͷ͔͸ෆ໌ ମ੍͸࡞ΒΕͯΔ͚Ͳɺ·ͩ͜Ε͔Βײ͕͋Δɻ

Slide 53

Slide 53 text

·ͱΊ

Slide 54

Slide 54 text

·ͱΊ • Node.js͸੒ख़ͯ͠Δɻ • Deno͸JSRͳͲͰΤίγεςϜΛ࡞Γม͑ͭͭɺطଘΤίγεςϜ͔Βͷ৐Γ ׵͑Λૂ͏ɻ • Bun͸ಠࣗ࿏ઢɺݏ͍͡Όͳ͍ɻ • ࡾऀࡾ༷ɺࠩผԽ͞Ε͖ͯͭͭ͋Δ͠ɺ͓΋͠Ζ͍ɻ • ΋ͬͱ੝Γ্͕ͬͯ͘Εɺͦͯ͠ JSConf.jp ͳͲͰൃදٻΉ