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.5k
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
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
79
Removing Corepack
yosuke_furukawa
PRO
9
1.2k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.4k
Strip Types と Storage
yosuke_furukawa
PRO
4
320
LTのやり方
yosuke_furukawa
PRO
16
2.1k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
680
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.1k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
9.4k
JavaScript Server Runtime History
yosuke_furukawa
PRO
9
3.8k
Other Decks in Programming
See All in Programming
Jakarta EE as Seen Trough the Lens of the ASF
ivargrimstad
0
760
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
410
Going Staff - Keynote edition
pragtob
0
340
Новый уровень ML-персонализации Lamoda: Как мы усилили ее в каталоге и перенесли на другие продукты
lamodatech
0
380
2024-10-02 dev2next - Application Observability like you've never heard before
jonatan_ivanov
0
200
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
7
1.9k
文化が生産性を作る
jimpei
3
610
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.1k
本編では話さない Zig の話
andpad
2
120
ポケモンで考えるコミュニケーション / Communication Lessons from Pokémon
mackey0225
5
220
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
650
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.5k
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Why Our Code Smells
bkeepers
PRO
334
57k
It's Worth the Effort
3n
183
27k
Practical Orchestrator
shlominoach
186
10k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A better future with KSS
kneath
237
17k
Agile that works and the tools we love
rasmusluckow
327
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
630
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
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