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
6
3.4k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
220
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
390
LTのやり方
yosuke_furukawa
PRO
16
2.5k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
790
Node.js v22 で変わること
yosuke_furukawa
PRO
13
6.1k
Other Decks in Programming
See All in Programming
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
120
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
190
エンジニア向けCursor勉強会 @ SmartHR
yukisnow1823
3
13k
LRパーサーはいいぞ
ydah
7
1.5k
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
ymbigo
14
6.6k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
algoartis
0
250
generative-ai-use-cases(GenU)の推しポイント ~2025年4月版~
hideg
1
450
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
130
AI Coding Agents Enablement in TypeScript
yukukotani
12
3.1k
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
340
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
3
1.6k
知識0からカンファレンスやってみたらこうなった!
syossan27
5
300
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Optimizing for Happiness
mojombo
378
70k
Writing Fast Ruby
sferik
628
61k
A designer walks into a library…
pauljervisheath
205
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
BBQ
matthewcrist
88
9.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How to train your dragon (web standard)
notwaldorf
91
6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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