Tweet
Tweet

Slide 1

Slide 1 text

require(ESM)とECMAScript仕様 2024-04-25 Meguro.es #27 @ oRo

Slide 2

Slide 2 text

発表者紹介 uhyo 株式会社カオナビ フロントエンドエンジニア 普段はTypeScriptとかReactをやっている。 好きな⾔語機能はジェネレータ関数。

Slide 3

Slide 3 text

JavaScriptの最近のニュース Node.jsが require(ESM) のサポートを追加。 require先がtop-level awaitを含まない ESモジュール (sync ESM) であれば、 CJSファイルからrequireできる。

Slide 4

Slide 4 text

This Talk require(ESM) って、ECMAScript仕様の視点で ⾒るとどういうことなんだっけ？ を解説します

Slide 5

Slide 5 text

CJSとかESMの復習

Slide 6

Slide 6 text

ScriptとModule ECMAScript仕様上、JavaScriptプログラムは 2種類に分類される。 •Script: 昔からあるやつ •Module: import/exportが使えるやつ 両者は構⽂レベルで異なる。 （importなどをScriptで使うのは構⽂エラー）

Slide 7

Slide 7 text

ScriptとModule ScriptかModuleかは外的要因によって決まる （ことが多い） HTML // Scriptとしてパースされる // Moduleとしてパースされる Node.js foo.cjs // Scriptとしてパースされる bar.mjs // Moduleとしてパースされる

Slide 8

Slide 8 text

ESモジュールグラフ import/exportでつながるモジュールグラフが形成 される。

Slide 9

Slide 9 text

モジュールの種類 モジュールはJavaScriptファイルとは限らない。 .js .js .mjs .js .js .js .html .json .wasm .css

Slide 10

Slide 10 text

モジュールの種類 ECMAScriptでは3種類に分類される。 （下は上の部分クラス） (Abstract) Module Record … 全てのモジュール Cyclic Module Record … 他のモジュールをimport可能 Source Text Module Record … JavaScriptで書かれた モジュール ※ 厳密に⾔えばAbstract Module Recordも他のモジュールに依存可能だが、ES仕様で扱う依存グラフには表れない

Slide 11

Slide 11 text

モジュールの種類 .js .js .mjs .js .js .js .html .json .wasm .css

Slide 12

Slide 12 text

Node.jsのCJSとESMの関係は？ CommonJSのモジュールはECMAScriptモジュー ルではない。ECMAScript側から⾒たらどういう 扱いなのか？ .mjs .cjs 特にこうやってESMからCJSをimportする場合

Slide 13

Slide 13 text

Node.jsのCJSとESMの関係は？ 多分CommonJSモジュールはESMから⾒たら Abstract Module Recordに相当する。 .mjs .cjs

Slide 14

Slide 14 text

モジュールの種類と仕様 (Abstract) Module Record … 全部ホスト依存 Cyclic Module Record … モジュールグラフの探索周り は仕様で明記 Source Text Module Record … 全部仕様で明記 この仕様により、JS以外のモジュールを扱うことができ る。JS以外のモジュールの挙動は、⼀部または全部が ホスト依存となる。 ※ ESモジュールのホストの例: Node.js、HTML仕様、webpackなど

Slide 15

Slide 15 text

Node.jsのCJS Abstract Module Recordの挙動は、仕様で 決められた制約を守ればホスト環境の⾃由。 つまり、.cjsから何がexportされるのかとか、 同期的に実⾏されるといった詳細はNode.jsが ⾃由に決められる。 .mjs .cjs

Slide 16

Slide 16 text

本題

Slide 17

Slide 17 text

require(ESM)の仕様上の解釈 require(“./module.mjs”)のようにすると、 module.mjsが同期的に実⾏される。 このことをES仕様に沿って記述できるか？ ES仕様と⽭盾する処理にはならないのか？ が気になる

Slide 18

Slide 18 text

既存の類例 ⾮モジュールからモジュールを実⾏する機能と して、import()がすでに存在する。 この構⽂であれば、ScriptからでもModuleを 実⾏できる。もちろんNode.jsのCJSからでも。 import(“module”).then(mod => …) “module”をモジュール解決して実⾏し、モジュール名前空間オ ブジェクトに解決されるPromiseを返す

Slide 19

Slide 19 text

import()の仕様レベルの挙動

Slide 20

Slide 20 text

import()の仕様レベルの挙動 import(“module”) HostLoadImportedModule … モジュール解決してModule Recordを取得 module.LoadRequestedModules() … 依存モジュール読み込み module.Link() … Environment Recordを初期化 module.Evaluate() … モジュールグラフに従って実⾏ ざっくりこの4段階でモジュールを実⾏できる。

Slide 21

Slide 21 text

HTML仕様の例 HTML仕様でも、モジュールを実⾏することはEvaluate()で表現 （LoadRequestedModulesとLinkは別のところで呼んでる）

Slide 22

Slide 22 text

ES仕様におけるモジュールの実⾏ module.Evaluate()を呼び出すことでモジュールが実 ⾏される。Evaluateには次の制約がある。 •Promiseを返す。モジュールの実⾏が完了すると fulfillする • Evaluateを呼ぶ前にLinkの呼び出しが成功して いる必要がある

Slide 23

Slide 23 text

ES仕様におけるモジュールの実⾏ module.Link()はモジュールの実⾏の準備をする。 Linkには次の制約がある。 • Linkを呼ぶ前にLoadRequestedModulesの 呼び出しが成功している必要がある

Slide 24

Slide 24 text

ES仕様におけるモジュールの実⾏ module.LoadRequestedModules()はモジュールの 依存先を全部読み込む。Promiseを返す。 LoadRequestedModulesはホスト定義の HostLoadImportedModuleを利⽤して実際の 読み込みを⾏う。 （HostLoadImportedModule⾃体は同期的にも⾮同期的にも 動作可能と定義されている）

Slide 25

Slide 25 text

ES仕様におけるモジュールの実⾏ 仕様上の制約として、この順に実⾏する必要がある。 HostLoadImportedModule ↑利⽤ module.LoadRequestedModules() ↑前提 module.Link() ↑前提 module.Evaluate()

Slide 26

Slide 26 text

ES仕様におけるモジュールの実⾏ require(ESM)の処理をES仕様で記述する場合も制約を守る必要がある。 HostLoadImportedModule ↑利⽤ module.LoadRequestedModules() ↑前提 module.Link() ↑前提 module.Evaluate()

Slide 27

Slide 27 text

ES仕様におけるモジュールの実⾏ HostLoadImportedModule 同期実⾏可能 ↑利⽤ module.LoadRequestedModules() Promiseを返す ↑前提 module.Link() 同期実⾏ ↑前提 module.Evaluate() Promiseを返す

Slide 28

Slide 28 text

ES仕様におけるモジュールの実⾏ HostLoadImportedModule 同期実⾏可能 ↑利⽤ module.LoadRequestedModules() Promiseを返す ↑前提 module.Link() 同期実⾏ ↑前提 module.Evaluate() Promiseを返す

Slide 29

Slide 29 text

Evaluate()の同期実⾏ 実はsync ESMのみをサポートする前例が Service Workerに存在する。 モジュールをService Workerとして登録する場合、 TLAを含むモジュールを登録することはできない。

Slide 30

Slide 30 text

Service Workerの仕様を⾒る 登録されたモジュールを実⾏するところの仕様

Slide 31

Slide 31 text

Service Workerの仕様を⾒る module.Evaluate()の結果のPromise 最初から解決済

Slide 32

Slide 32 text

Sync ESMのEvaluate() 実はES仕様では、TLAを持たないSource Text Module RecordのEvaluate()は、最初から 解決済みのPromiseを返すことが保証されている。 （＝TLAを含まないモジュールグラフは仕様上同期的に 実⾏できる） Evaluate()が返したPromiseをもらった瞬間に 捨てればOK。

Slide 33

Slide 33 text

ES仕様におけるモジュールの実⾏ HostLoadImportedModule 同期実⾏可能 ↑利⽤ module.LoadRequestedModules() Promiseを返す ↑前提 module.Link() 同期実⾏ ↑前提 module.Evaluate() Promiseを返す

Slide 34

Slide 34 text

LoadRequestedModules()の定義を⾒る

Slide 35

Slide 35 text

ES仕様におけるモジュールの実⾏ 詳細は省くが、HostLoadImportedModule()が同期的に動く 環境であれば、 LoadRequestedModules()が返すPromiseも 最初から解決されている。 こちらも同期的に実⾏可能。 （返ってきたPromiseはやはり捨てる）

Slide 36

Slide 36 text

補⾜: エラー処理について どちらも返ってきたPromiseを捨てることで同期的に 処理可能だが、エラーの場合の対応は必要。 そこは処理系特権でPromiseの中⾝を同期的に確認し、 エラー処理を⾏う。

Slide 37

Slide 37 text

まとめ

Slide 38

Slide 38 text

まとめ Node.jsが新たに実装したrequire(ESM)は、 実装されてもECMAScript仕様とは⽭盾しないことが 分かった。 （仕様上Promiseの中⾝を同期的に⾒るというずるが必要になるが、 多分実装でカバーできる） 安⼼して使おう！