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
Module Harmony について
Search
Yosuke Furukawa
PRO
May 31, 2024
Programming
3
1.7k
Module Harmony について
2024/05/31 にCTO協会LTで発表した Module Harmony についてです。
Yosuke Furukawa
PRO
May 31, 2024
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
240
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
820
Node.js v22 で変わること
yosuke_furukawa
PRO
13
6.3k
Other Decks in Programming
See All in Programming
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.3k
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
3
380
AI Ramen Fight
yusukebe
0
120
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
370
リッチエディターを安全に開発・運用するために
unachang113
1
350
実践 Dev Containers × Claude Code
touyu
1
120
Flutterと Vibe Coding で個人開発!
hyshu
1
220
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
A designer walks into a library…
pauljervisheath
207
24k
Writing Fast Ruby
sferik
628
62k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Typedesign – Prime Four
hannesfritz
42
2.7k
Designing Experiences People Love
moore
142
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Why Our Code Smells
bkeepers
PRO
337
57k
GitHub's CSS Performance
jonrohan
1031
460k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Transcript
Module Harmony Yosuke Furukawa 2024-05-31 @ CTO ڠձ LT ஈԼ
એ
WebϑϩϯτΤϯυ൛ DX Criteria ࡞Γ·ͨ͠ Ξηεϝϯτγʔτग़ͨͷͰੋඇͬͯΈͯԼ͍͞
X: @yosuke_furukawa GitHub: yosuke-furukawa
Module Harmony ͱ͍͏ఏҊ͕ߦΘΕ͍ͯΔ
JavaScript (ECMAScript) ߹੍ٞ Proposal ͱ͍͏ఏҊΛग़ͯ͠͠߹ͬͯ ࣮ͯ͠ΈͯҙݟΛग़͠߹͍ͳ͕Β৽͍༷͕ܾ͠·Δ
ͦΜͳதɺ Module ༷ʑͳఏҊ͕ߦΘΕͯ͠·͍ͬͯΔ
৽͍͠ఏҊͱ͍͏Θ͚Ͱͳ͍ɻ ͲͪΒ͔ͱ͍͏ͱ "ཧ" ͱ͍͏ͷʹ͍ۙɻ
Module Harmony ͷత • ϓϩϙʔβϧΛԣஅͨٞ͠ • ൚༻తͳϞδϡʔϧۭؒʹؔ͢Δٞ • ԣஅͨ͠ݒ೦͘͠ݸผͷϓϩϙʔβϧʹؔ͢Δٙͷ໌֬Խ •
ͭ·Γɺ৭ʑ͋ΔϓϩϙʔβϧΛΫϦΞʹͯ͠ɺٞ͠·͠ΐ͏ͱ ͍͏
͡Ό͋ࠓͲΜ͚ͩͷ Proposal ͕ Module ʹ͋Δͷ͔ʁ
͜Μ͚ͩ͋Δ • Import attributes • Module Expressions • Module Declarations
• Module local imports • Module Source imports • Module Instance imports • Deferred import evaluation • Module loader hooks • Module source static analysis • Virtual Module sources
͜Μͳʹ͋ͬͨΒ༁Θ͔ΒΜ͘ͳΒͳ͍ʁ
Θ͚Θ͔ΒΜ͘ͳͬͯΔ Module Source Module Instance Module loader hooks Source import
instance import Module Expressions Module Declarations imports from local bindings Module Source Static Analysis Virtual module sources Deferred import Import attributes ґଘؔҹͷઌ͕ґଘઌ
Θ͚Θ͔ΒΜ͘ͳͬͯΔ Module Source Module Instance Module loader hooks Source import
instance import Module Expressions Module Declarations imports from local bindings Module Source Static Analysis Virtual module sources Deferred import Import attributes ґଘؔҹͷઌ͕ґଘઌ ґଘͳ͠ɺಠཱͯ͠ਐΊΒΕΔ ඃґଘڧ͠ɻ ૣ͘ίϯηϓτΛܾΊͳ͍ͱ ଞͷͭਐΊΒΕͳ͍ɻ
Θ͚Θ͔ΒΜ͘ͳͬͯΔ Module Source Module Instance Module loader hooks Source import
instance import Module Expressions Module Declarations imports from local bindings Module Source Static Analysis Virtual module sources Deferred import Import attributes ґଘؔҹͷઌ͕ґଘઌ ༷ͱܾͯ͠·Δ·Ͱԕͦ͏ɻ ૬ޓґଘͯ͠Δɾɾɾ
͔ͩΒɺ "ཧ" ͠Α͏Ͷ͍ͬͯ͏
ࠓճͦΕͧΕΛհͯ͠ɺ ʮʔʯͬͯͳͬͨΒऴྃ
ͱΓ͋͑ͣɺҰ൪ґଘ͕ͳ͍ͱ͜Ζ͔Β
import attributes • ੲ import assertions ͬͯݴΘΕͯͨͭ • import ͢ΔࡍʹͲΜͳܗࣜͷͷΛimport͢Δͷ͔એݴͰ͖Δ
• JSONΛimport͢Δ࣌ʹ͏ͷ͕ݱࡏͷओͳϢʔεέʔε • ͦͷ͏ͪଞͷͷࢦఆͰ͖ΔΑ͏ʹ͢Δ͔ɻ import foo from "./bar.json" with { type: "json" }; import ("./baz.json", { with: { type: "json" } })
Deferred import evaluation • import ࣌ʹԆධՁͰ͖Δ syntax ΛՃ͢Δ༷ • await
import() ͰԆͰ͖Δ͕ɺasync function͕ڧ੍͞Εͯ͠ ·͏ɻ import defer * as ns from "./mod.mjs"; function later() { ns.anExport; // ࣮ߦ࣌ʹ mod.mjs ΛධՁ͢Δ }
ܹ͘͠ґଘ͞ΕͯΔͭ
Import Phase ͷ͓͞Β͍
Import Phase ͷ͓͞Β͍ ͦΕͧΕ͝ͱʹम০ࢠΛ༻ҙ͍ͯ͠Δ
Module Source ͱ͍͏֓೦ • ϑΝΠϧΛιʔε͔Βimportͨ͠ΒίϯύΠϧ͢Δɻ • WebAssembly.instatiateStreamingΛΘͣʹϩʔυͰ͖Δ import source x
from "<speci f ier>"; // wasm ͰϞδϡʔϧΛϩʔυ͢Δͱ͔͕۩ମྫ import source foo from "./foo.wasm";
Module Source Phase Import • JS Ͱ source Λͬͯ import
͢Δɻ import source foo from "./foo.mjs"; // ͜ͷ࣌Ͱ foo ϑΝΠϧͱಉ͡Α͏ͳ֓೦ // worker ͱͯ͠ಡΈࠐ·ͤΔͱ͔Ͱ͖ΔΑ͏ʹ͍ͨ͠ɻ const fooWorker = new Worker(fooModule, { type: "module" });
Module Instance ͱ͍͏֓೦ • Module ͷΠϯελϯεΛϩʔυͯ͘͠Δ • ͦͦ module Λ୯ମͰࣜͱͯ͠ධՁ͠ɺఆٛ͠ɺinstanceΛimportͰ͖ΔΑ͏ʹ͢Δɻͱ
͍͏͍ಓͷΓɻ •
Module Declaration • module Λ import / export ͠ͳͯ͘ϑΝΠϧ෦ͰఆٛͰ͖ΔΑ ͏ʹͨ͠ͷɻ
• bundlerͱ͔Ͱͦͷ··moduleΛ࣋ͬͯ͜ΕΔΑ͏ʹɻ module Foo { let i = 0; export function foo() { console.log("foo"); return i++; } }
Module Expression • declareͨ͠moduleΛࣜͱͯ͠ධՁͰ͖Δɻ const fooModule = module { self.addEventListener("message",
(e) => {}); }; const fooWorker = new Worker(fooModule, { type: "module" });
Module Expression • import จॻ͚Δɻ let mod = module {
import { count } from "./db.js"; export let x = 2 * count(); };
Module Instance Imports • ͦ͏ͬͯఆٛͨ͠ Module ͷ Instance ͚ͩ Import
͢ΔͨΊͷ import จ import module foo from "./foo.js";
Module Instance Imports (local bindings) • ࣗͷϑΝΠϧͰఆٛͨ͠ͷ local Ͱ import
Ͱ͖ΔΑ͏ʹ͢ Δɻ module foo {}; module bar { import foo from foo; // ͜ͷ࣌ʹࣝผࢠจࣈྻ͡Όͳ͍ͯ͘ ͍ɺมͷΑ͏ʹbinding͞Εͨͷ͕͑Δ
Module loader hooks • source level ͰಡΜͩ module Λϩʔυ͢Δ࣌ʹݕͯ͠ͻͱखؒ Ճ͑ͯ͘ΕΔͭɻ
• Moduleͱͯ͠ context ΛՃ͑ΔࡍʹͳΜ͔৽͍ؔ͠Ճͨ͠Γͱ ϝλϓϩάϥϛϯάͰ͏ import source foo from "foo.js"; new Module(source, { importHook(speci f ier) { // ... }, });
࣮·Ͱԕͦ͏ͳͭ
Module Static Analysis • Module ͷ source Λղੳͨ͠ஈ֊Ͱ import /
export ͷґଘάϥϑ Λ࡞ΔͨΊͷใΛఏڙ͢ΔϓϩύςΟ { import : "a", from: "a.js"} { import : "b", as: "c" from: "b.js"} ...
Virtual Module Source • Ծͷ Module Source Λ࡞ΕΔ༷ • new
Module Ͱ৽͍͠ModuleΛ࡞ΔࡍʹݩͱͳΔίʔυ͕ͳͯ͘object ͔ΒԾϞδϡʔϧΛ࡞ΕΔ class FooModuleSource { bindings = { // ͜͜ʹ static analysis ͞ΕΔbindingsͷใ͕དྷΔ }; constructor(text) { this.#object = JSON.parse(text); }; execute(imports) { imports.default = clone(this.#object); }; } const source = new FooModuleSource(); const module = new Module(source);
ͳͲɺ৭ʑ͋Δɻɹ
Module Harmonyʹ͍ͭͯ • ͨ͘͞Μग़ͯ͠·ͬͨ module ͷ༷ΛҰ୴ཧ͠Α͏ͥͱ͍͏ࢼ Έ • ࣮ੲಉ͡Α͏ͳ͜ͱ͕͋ͬͨɻ •
ͦΕ͕ ES4 ͷ൵ܶͱ harmony ͱ͍͏ࢪࡦ
Module Harmonyʹ͍ͭͯ • ༷ΛܾΊΔதͰ৭ʑ͋Δɻ • OSS৭ʑΩϥΩϥ͍ͯ͠Δ͔ΒɺಌΕΔͷΘ͔Δ͕ɺ࣮த ͜͏͍͏࣮ࣾձͰ͋Γͦ͏ͳ͔Γɻ • ͔ͩΒͦ͜ɺීஈ͔Β৺͕͚Δඞཁ͕͋Δɻ •
ҰൠͷΞϓϦέʔγϣϯͷ։ൃ׆ಈͰ harmony Λॏࢹ͍͖ͯ͠ ͍ͨɻ
ࢀߟจݙ • https://docs.google.com/presentation/d/ 1mZrAHHimtM_z_8fM9L3DUXFz5bjlJPxx8VrwsC68hmk/ edit#slide=id.g1918a5fc7ef_1_97 • https://github.com/tc39/proposal-compartments/blob/master/2- virtual-module-source.md • https://github.com/tc39/proposal-module-declarations/
• https://zenn.dev/pixiv/articles/c7071eb29927fe