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
Removing Corepack
yosuke_furukawa
PRO
5
400
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.3k
Strip Types と Storage
yosuke_furukawa
PRO
4
310
LTのやり方
yosuke_furukawa
PRO
16
2k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
660
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
9.3k
JavaScript Server Runtime History
yosuke_furukawa
PRO
9
3.7k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.7k
Other Decks in Programming
See All in Programming
NANIMACHI
naokiito
0
820
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
1.4k
ビット演算の話 / Let's play with bit operations
kaityo256
PRO
1
110
The Shape of a Service Object
inem
0
590
AWS Lambda Web Adapterを活用する新しいサーバーレスの実装パターン
tmokmss
6
4.7k
#TROCCOUG dbt Cloud+TROCCO
troccoug
0
140
利用者視点で考える、イテレータとの上手な付き合い方
syumai
3
170
為醫療加裝Python的引擎
cclai999
0
240
Infrastructure as Code でセキュリティを楽にしよう!
konokenj
3
1.1k
標準ライブラリの動向とイテレータのパフォーマンス
makki_d
2
130
Shinjuku.rb#95:心の技術書紹介
free_world21
1
120
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
13
3.2k
Featured
See All Featured
Bash Introduction
62gerente
608
210k
Debugging Ruby Performance
tmm1
72
12k
Designing Experiences People Love
moore
138
23k
Practical Orchestrator
shlominoach
185
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
A Philosophy of Restraint
colly
202
16k
Ruby is Unlike a Banana
tanoku
96
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
Speed Design
sergeychernyshev
22
450
The Invisible Customer
myddelton
119
13k
Become a Pro
speakerdeck
PRO
22
4.9k
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