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 Server Runtime History
Search
Yosuke Furukawa
PRO
October 20, 2023
Programming
9
5.1k
JavaScript Server Runtime History
2023/10/20 虎の穴ラボで発表した JavaScript Server Runtime の歴史です。
Yosuke Furukawa
PRO
October 20, 2023
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.2k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
260
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
速いWebフレームワークを作る
yusukebe
5
1.7k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.4k
アセットのコンパイルについて
ojun9
0
130
Design Foundational Data Engineering Observability
sucitw
3
200
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
Swift Updates - Learn Languages 2025
koher
2
490
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
470
Improving my own Ruby thereafter
sisshiki1969
1
160
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Site-Speed That Sticks
csswizardry
10
820
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
For a Future-Friendly Web
brad_frost
180
9.9k
Rails Girls Zürich Keynote
gr2m
95
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Context Engineering - Making Every Token Count
addyosmani
3
55
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making Projects Easy
brettharned
117
6.4k
Transcript
JavaScript Server Runtime History 2023/10/20 @ toranoana
X(Twitter): @yosuke_furukawa GitHub: yosuke-furukawa
+4$POGKQ͡·Γ·͢ʔʂ
߽՚εϐʔΧʔਞ
NodeֶԂࡇ 2011 Ryan Dahl changed my life.
JavaScript Server Runtime ͷ ྺ࢙ʹ͍ͭͯ • 90͔Βݱ·ͰৼΓฦΔ • ࠓޙͲ͏͍͏ྲྀΕ͕͋Δ͔ɺͲ͏ͳΔ͔Λ༧ଌ ͢Δ
• ྺ࢙ͬͯ໘ന͍ͷͰݟͯཉ͍͠ • ͍ͨ͜͠ͱΛ͢ɺͳΜ͔ͨΊʹͳΔ͕ฉ͚ Δͱࢥ͍͚ͬͯͳ͍
1995: JavaScript was born
1995 • JavaScript ੜ • Netscape Navigator 2.0 Beta ൛ʹಉࠝ
• ޙʹ 1996ʹਖ਼ࣜϦϦʔε൛͕ൃද
#SFBOEBO&JDIࢯͷϗʔϜϖʔδ ྺ࢙Λײ͡ΔσβΠϯ
1995 • ͔͜͜Β࠷ॳͷ Browser War ͕ى͖Δ • ͍ΘΏΔ Internet Explorer
ਞӦ vs Netscape ਞӦ • ྺ࢙Ͱݴ͏ͱؔέݪͷઓ͍นͷઓ͍ • ·͊ͳΜͱ͍͏͔өըͰݴ͏ͱݟͲ͜Ζͷ෦
1996: Netscape Livewire was born
1996 • ϒϥβઓ૪ͷཪͰͻͬͦΓͱग़͖ͯͨ Netscape Livewire ͱ͍͏αʔόαΠυ JavaScript ٕज़ • ͳΜͱ
HTML λάͷதʹ <server> λάΛॻ͍ͯͦ͜ ʹεΫϦϓτΛॻ͘ͱ࣮ߦ͞ΕΔͱ͍͏༷ • ॻ͍ͨhtmlΛίϯύΠϧ͢ΔͱόΠτίʔυ͕͍ͭͨ ࣮ߦՄೳͳܗࣜʹม͞ΕɺWebαʔόΛىಈͰ͖Δ
Netscape Livewire • HTMLͱಉ͡ॴʹॲཧΛॻ͍ͯɺίϯύΠϧ ͢Δ # jsac ͱ͍͏ίϯύΠϥͰίϯύΠϧ͢Δ $ jsac
-i app.html -o app.web
1996 • ͳΜͱ͜ͷଞʹ Java ͷΫϥεΛݺͼग़ٕ͢ ज़ʢࠓͰݴ͏C++ native codeݺͼग़͢Α͏ͳ ײ͡ʣ͋ͬͨΓ •
Database ଓ͢Δٕज़͋ͬͨ • ͨͩ·͊ΈΜͳͬͯͷ௨Γɺ͜Ε͕ϝΠϯ ετϦʔϜʹͳΔ͜ͱͳ͔ͬͨ
1996 • ཪͰߦΘΕͯΔϒϥβઓ૪։ൃڥͷઓ૪Ͱ͋Δ • Microsoft ASP ͱਅ͔ͬΒରཱ͕ͨ͠ɺ ASP ίϯύ Πϧεςοϓ͕ͳͯ͘ಈ͘ͷʹରͯ͋͠·Γʹݪ࢝
త • ࠓͰͦ͜ JavaScript ϓϩάϥϛϯάݴޠͱͯ͠ͷҐ Λཱ֬Ͱ͖͍ͯΔ͕͜ͷ࣌Ͱ·ͩए͗ͨ͢ • ݁ہྲྀߦΒͳ͔ͬͨɻɹ
2009: Node.js was born
2009 • αʔόαΠυ JavaScript ݩ • Node.js ͕ੜ • ಉळʹ
JSConf.EU Ͱ Ryan ͕ൃද
2009 • ͜ͷ࣌ͷ Node.js ͷಛ • Event-driven / Non-blocking IO
• Built on Google V8 • CommonJS • ·ͩ͜ͷͱ͖ npm Windows αϙʔτͳ͍
2009 • Apache HTTP Server ͕ C10K ͱ͍͏൷ΛཋͼͤΒΕ͍ͯͨ ࣌ •
Non blocking IO / Event driven ͳΞʔΩςΫνϟ nginx / event machine ͱ͔Ͱطʹྲྀߦͬͯͨɻ • ͡Ό͋ͦΕΛ JavaScript ͰͬͯΈͨΒͲ͏͔ʁͱ͍͏ΞΠσΞ ޭΛͨ͠ • JavaScript ʹ File IO ॲཧ͕ͳ͘ɺαʔόαΠυͷAPIະ։ ͩͬͨ
2010: npm was born
2010 • 3rd party ͷϥΠϒϥϦΛެ։͠ɺಡΈࠐΉ͜ ͱ͕Ͱ͖ΔΈΛ npm ͱ࣮ͯ͠ • ͦΕΛಉࠝ͢Δ͜ͱͰϥΠϒϥϦ։ൃΛ͠
͘͢ɺ·ͨίΞʹΓ͍ͯͳ͍ػೳΛՃ͠ ͨ͘͢͠ • ΤίγεςϜ͕ੜ·Ε͍ͯͬͨ࣌
2010 • Express ͕ొ • socket.io v0.1ޙʹొ • ͔͜͜ΒϒʔϜʹՐ͕͍͍ͭͯ͘ •
Yeoman/grunt/gulp ͱ͔ 2013ʹొ
2011-2014 • 2011: Windows αϙʔτ • 2011: Joyent ͕ग़ࢿ •
2012: Node.js Ϧʔμʔަ Ryan => isaacs • 2014: Node.js Ϧʔμʔަ isaacs => TJ Fontaine
2014: Node.js were forked as io.js
2014 • มԽ͕ى͖ͣɺӢߦ͖͕ո͘͠ͳΔ • ৽͍͠ػೳ͕Ճ͞Εͳ͍ɺόʔδϣϯ͕Ϧ Ϧʔε͞Εͳ͍ • ΤϯλʔϓϥΠζͳ҆ఆੑ͔Γٻ͞Εɺ ৽͍͠ػೳ͕ग़ͯ͜ͳ͍
2014͔ΒίΞͷ։ ൃ͕ఀ͢Δɻ
2015 • io.js ͕ Node.js ΛϑΥʔΫͯ͠ϦϦʔε • ҰؾʹίΞίϛολʔͷେ͕ io.js ଆҠಈ
• io.js ͱ Node.js ͕༥߹͠ɺγϯ Node.js ͱͯ͠։ൃऀ ίϛϡχςΟ͕ओಋ͢Δํ Node.js Foundation ൃ • Node.js v4.0 ͕ϦϦʔε
2015 • ES2015 ͳͲͷ׆ಈ༗Γɺ class, let, const, ESM, ͜͏͍ͬ ͨػೳΛਖ਼ਐԽ͍ͤͯͨ͘͞Ίʹඞཁͳվֵͩͬͨ
• ͔͜͜Β React ͳͲͷՐ͚ੜ·ΕɺϑϩϯτΤϯυ ϒʔϜ͕ى͖Δ • Browserify ͱ͔͕ྲྀߦΓɺ server ͱ client ͷ͕֞ࠜಥഁ͞ Ε͍ͯ͘ • Isomorphic / universal ͱ͔ͷݴ༿͜͜Ͱੜ·ΕΔ
Ұ୴͜͜·ͰͰৼΓฦΓ
The rise of Node.js (2009-2015) • ϦϦʔε͔Βౖ౭ͷ6ؒ • ৽ػೳ͕୯ҐͰՃ͞ΕΔΘ •
ΤίγεςϜ͕Ͱ͖ͯେྔͷ3rd party libੜ·Ε ΔΘ • ϦʔμʔมΘͬͯɺ։ൃओମίϛϡχςΟओಋ ʹมΘΔΘ
The rise of Node.js (2009-2015) • ES2015ͱbabel, React/Vue.js ͳͲͷίϯϙʔωϯτ ࢦϥΠϒϥϦͷຄڵ,
ਐԽͨ͠ Node.js ͦΕͧΕ͕ ҰݸͷʹͳͬͯϒʔϜ͕ੜ·ΕΔ • ͜Ε͕୭͔ʹࢦ͞Ε͔ͨͷΑ͏ͳಈ͖ͰৼΓฦΔͱ ͳΜ͔ࢥ͏ͷ͕͋Δɻ • 2015ʹෳͷϒϨΠΫεϧʔ͕ى͖ͨΑ͏ʹࢥ͑ Δɻ
2016-2018
2016-2018 • ͜ͷ͋ͨΓ͔ΒաڈʹऔΓೖΕ͖ͯͨϥΠϒϥϦ ͷதͰ ES Web Standard ͱҧ͏ΈΛͲ ͏౷߹͢Δ͔͕ٞʹͳ͍ͬͯ͘
• ESModule ͱ CommonJS • Stream / Event Emitter ͱ Promise / WHATWG Stream
2016-2018 • 2016: Leftpad ࣄ͕݅ൃੜ • Npm ͕উखʹϥΠϒϥϦΛফ͢ • ౖͬͨ࡞ऀ͕શͯͷϥΠϒϥϦΛফ͢
• Leftpad ͱ͍͏ϥΠϒϥϦ͕ webpack ͕͍ͬͯͨΓɺ babel ͷҰ෦ͰΘΕ͍ͯͨΓͱ৭ΜͳॴͰϥΠϒϥϦ͕յΕΔ • ͔͜͜ΒɺʮࢲୡɺϥΠϒϥϦґଘ͗͢͠͡ΌͶʁʯ͍ͬͯ͏งғ ؾ͕ྲྀΕΔɻ
2016-2018 • 2018: npm ࢿۚͰ৭ʑͱ͕͠ग़ͯ͘Δ • ϨΠΦϑ͕͋ͬͨΓͱք۾͕͟Θͭ͘ • Ұ୴ github
ͱ౷߹͞Εͯམͪண͘ (2020)
2016-2018 • 2017: Node.js ͕ CommonJS ͱ ESM ͷํΛ૬ ޓޓੑΛอͬͨ··ղܾ͢Δͱ͍͏ํ๏Λ࣮
ɺ֦ுࢠʹΑΔΓํ͕ΛݺͿ • 2017: React Vue.js Ͱ SSR ͢Δͱ͍͏ํ๏͕Ұ ఆͷྲྀߦͷஹ͠ΛݟͤΔɺ͜ͷࠒ Next.js ͕ϦϦʔ ε͞ΕΔɺΫΤϦʔύϥϝʔλͰ͔͠ routing Ͱ͖ͳ͔ͬͨͷͰ͋Μ·Γྲྀߦͬͯͳ͔ͬͨ
2016-2018 • 2016: TypeScript ͕ @types ͳͲͷΈΛ Ҿͬఏ͛ͯܕͷࢀরΛղܾ͢ΔखஈΛఏڙ͠ɺ VS Code
ͳͲͷΤσΟλͱͱʹਐԽ • 2018: Deno ͕ jsconf.eu Ͱൃද͞ΕΔɻ10 Λܦͯ Ryan ͔Β࠶ͼͷൃදɻಛʹ TypeScript native αϙʔτͳͲͷηϯεྲྀੴɻ
ݱ(2019-2023)
ݱ • 2019: Node.js 10पɺࠓޙͷϩʔυϚοϓͱͯ͠ ESM ڧԽɺ fetchɺ single executable
appsɺ TS ͱͷੑ্ͳͲͷ deno Λҙࣝͨ͠ײ͡ʹͳΔɻ • 2020: deno v1.0 ϦϦʔε • 2021: Node.js ʹ web standard ͱͷੑΛڧԽ͢Δ͕૿͑ Δɺ atob / btoa ͱ͔URLͱ͔ͷػೳ͕૿͍͑ͯ͘ • 2021: Node.js Promise Λओମʹͨ͠APIʹมΘΔ
ݱ • 2022: WINTER CG ൃɺ Node.js, Deno, Bun ͳͲͷϒϥβҎ֎ͷϥϯλΠϜͷͨΊ
ͷ༷Խஂମ • Fetch ͷ minimum spec ͱ͔ ৭ʑܾ·ͬͨ
Ұ୴͜͜·ͰͰৼΓฦΓ
ྲྀߦͱڝ૪ • npmҰ࣌ظࢿ͕͕ۚ͋ͬͨɺ GitHub ʹΑΔ ౷߹ͰҰ୴ղܾ͞Εͨ • TypeScript VS
CodeͳͲͷπʔϧपΓ͕ਐԽ ͯ͠ɺେྲྀߦ • Next.js ͕େྲྀߦɺ Vercel ͳͲͷେ͖ͳελʔ τΞοϓ͕ੜ·Εͨ
ྲྀߦͱڝ૪ • ྲྀߦʹΑΓɺ݈શͳڝ૪͕૿͖͑ͯͨΑ͏ʹ ײ͡Δ • Node.js vs Deno vs Bun
Έ͍ͨͳ • ݈શͳڝ૪ͱޓੑͱ༷Խͱ͍͏ਐԽΤ ϯυϢʔβʔʹҰ൪རΛͨΒͯ͘͠ΕΔ ͱࢥ͑Δ
ྲྀߦͱڝ૪ • Node.jsίϛϡχςΟͷ͕ओಋ͞ΕΔɺྲྀߦͬͨͭΛޙ͔ΒऔΓೖΕ͍ͯ͘ํ • Test ͷΈ͕ೖͬͨ • Permission ͕αϙʔτ͞Εͨ •
Experimental Ͱ͋Δ͕ɺ module ղܾͷ default ͕ มߋͰ͖ΔΑ͏ʹͳͬͨ ʢdefault Λ esm ʹม͍͑ͯ͜͏ͱͯ͠Δʣ • Single executable fi le ͕࡞ΕΔΑ͏ʹͳͬͨ • Web Standard ͱͷੑΛ্͍͛ͯ͜͏ͱͯ͠Δʢnavigator͕ೖͬͨΓʣ • ࠓϚείοτΩϟϥΫλʔืूͯ͠Δͱͷ͜ͱ
ྲྀߦͱڝ૪ • Deno Node.js ͱͷ compat Λ্͍͖͍͛ͯͨํ • npm
support • ͦͷ্ͰπʔϧνΣΠϯɺಈ࡞ڥΛݩʹ։ൃશମΛ Γ্͍͛ͯ͘ • Deno Deploy • Deno fresh
ࠓޙͷ༧
ࠓޙ • Node.jsޓੑ্͕͕Γɺ Deno Bun ͳͲͱͷ ڝ૪͕ͬͱ૿͑Δ • ΤίγεςϜΛͲ͜·ͰࣗͷਞӦʹ࣋ͬͯ͜Ε
Δ͔উෛʹͳΓͦ͏ɻ • ޓੑ্͕͕ΕޙੑೳηΩϡϦςΟ։ൃ ऀମݧӡ༻҆ఆੑͳͲͷඇػೳཁ݅Ͱͷউෛʹ ͳΔ
ࠓޙ • Denoଆ͔ΒݟΔͱɺNode.jsΤίγεςϜͱͷੑ Λ্͛ͯɺԿʹૣ͘ Node.js ͷγΣΞΛୣ͑Δ͔ • Node.js ଆ͔ΒݟΔͱɺଞͷϥϯλΠϜͱͷػೳࠩΛ ແͯ͘͠ɺطଘγΣΞΛҡ࣋Ͱ͖Δ͔
• Bun ଆ͔ΒݟΔͱɺΤίγεςϜͷੑΛ্͛Δͱ ͱʹѹతͳύϑΥʔϚϯεͰੑೳࠩͰѹ͍ͨ͠
ࠓޙ • ࡾऀࡾ༷ • ͜͏͍͏݈શͳڝ૪͕͠Β͘ଓ͖ɺڝ૪ঢ় ଶͷ··ۉߧͦ͠͏ͳؾ͍ͯ͠Δɻ
ࠓޙ • ͜ͷଞͷํੑͱͯ͠: • ΤοδίϯϐϡʔςΟϯάํͰCDNͰಈ͘αʔ όαΠυܰྔJSͷྲྀߦ • ϑϧελοΫͳ JS ϑϨʔϜϫʔΫͷོͱਐԽ
• Σϒ։ൃͷਐԽͱͱʹԼճΓΛࢧ͑Δπʔϧͱ ͯ͠ਐԽ͠ଓ͚ͦ͏
·ͱΊ
·ͱΊ • JavaScript Server Runtime ͷྺ࢙ΛৼΓฦͬͨɻ • ίϛϡχςΟͱྗΛ࣋ͬͨاۀ͕࿈ಈ͠ͳ͕Βൃల͖ͯͨ͠ ྺ࢙ͩͬͨΑ͏ʹײ͡Δɻ •
݈શͳڝ૪ʹΑΔػೳͱඇػೳͷࠩผԽ͕ܹԽͯ͠Δ • ҰํͰڞ௨ԽΛWinterCGΛத৺ʹߦΘΕ͍ͯΔ • ·ͩ·ͩൃల͍͖ͯͦ͠͏ɺ։ൃऀʹ༏͍͠ൃల͕ࠓޙ ·ΕΔ
12લʹͷਓੜΛม͑ͨΑ ͏ʹࠓͷ Ryan ͷൃදͰ୭ ͔ͷਓੜ͕มΘΔͱ͍͍ͳͱ ࢥ͍·͢ɻ
Thanks!!
ࢀߟࢿྉ • https://webdevelopmenthistory.com/1995-the-birth-of-javascript/ • https://webdevelopmenthistory.com/1996-javascript-annoyances-and- meeting-the-dom/ • https://dev.to/macargnelutti/server-side-javascript-a-decade-before-node-js- with-netscape-livewire-l72 •
https://philip.greenspun.com/wtr/livewire.html • http://sunsite.uakom.sk/sunworldonline/swol-08-1999/swol-08- webmaster.html • https://en.wikipedia.org/wiki/Node.js • https://yosuke-furukawa.hatenablog.com/entry/2022/04/08/111651