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
9
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Node.js v22 で変わること
yosuke_furukawa
PRO
13
6.2k
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
640
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
10
3k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
190
Porting a visionOS App to Android XR
akkeylab
0
460
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How GitHub (no longer) Works
holman
314
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Side Projects
sachag
455
42k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Balancing Empowerment & Direction
lara
1
430
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Building an army of robots
kneath
306
45k
Gamification - CAS2011
davidbonilla
81
5.4k
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