Edit

Page

Page title:

Page body:

[53] [[JavaScript]] の[DFN[モジュールスクリプト]]は、
[[スクリプト]]の[[コンポーネント]]の単位の一つです。

* 仕様書

[REFS[
- [21] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-01-21 11:56:00 +09:00]] 版) <https://html.spec.whatwg.org/#concept-module-script-module-record>
- [29] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-02-14 16:33:19 +09:00]] 版) <https://html.spec.whatwg.org/#concept-workerglobalscope-type>
- [31] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-02-14 16:33:19 +09:00]] 版) <https://html.spec.whatwg.org/#workertype>
]REFS]

* 呼称

[32] [[JavaScript]] は[[モジュール]]、 [[HTML]] は[[モジュールスクリプト]]と呼んでいます。

;; [[スクリプト]]参照。

[40] [[HTML]] は明確化のために[[仕様書]]の用語としてそう呼んでいるだけで、
[[API]] では [CODE[module]] という語で表しています。

* 文脈

[41] [CODE(HTMLe)@en[script]] [[要素]]により指定できます。

[EG[
[45]
[PRE(HTML code)[
<script type=module src=path/to/module.js></script>
]PRE]
]EG]

[42] [[ワーカー]]の作成時にも指定できます。

[EG[
[46] 
[PRE(JS code)[
var worker = [[new Worker]] ("path/to/module.js", {type: "module"});
]PRE]
]EG]

[44] [[要素]]や[[ワーカー]]からの指定では、[[ワーカースクリプト]]の [[URL]]
を使って指定します。従来の[[古典スクリプト]]と区別するため、
[CODE(HTMLa)@en[type][<script type>]] を [CODE[module][モジュールスクリプト]] 
と明記する必要があります。

[43] [[JavaScript]] 内からも指定できます。[[モジュール指定子]]を使います。

* 状態

[20] [[モジュールスクリプト]]の持つ状態については、
[[スクリプト]]を参照。

[22] [[モジュールスクリプト]]の[DFN[[F[[RUBYB[[[モジュール記録]]]@en[module record]]]]]]は、
構文解析され、[[評価]]できる状態の[[モジュール]]を表す [[Source Text Module Record]]
(またはエラー時の [CODE[null]]) [SRC[>>21]] です。

[30] [CODE(DOMi)@en[[[WorkerGlobalScope]]]] の[F[型][スクリプトの型]]の値
[DFN[[CODE[[[module]]]]]] [SRC[>>29]] や [CODE[[[WorkerType]]]] の値
[DFN[[CODE[[[module]]]]]] [SRC[>>31]] は、[[モジュールスクリプト]]を表します。

* 作成

[26] [[モジュールスクリプトの作成]]を参照。

* 実行

[27] [[モジュールスクリプトの実行]]を参照。

* 古典スクリプトとの違い

[33] [[スクリプト]]を参照。

* 歴史

[2] [CITE@en[Bug 25715 – ''''''[''''''imports'''''']'''''': Unify loading and dependency resolution model with ES6 modules]]
( ([TIME[2014-05-24 03:38:23 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=25715>

[1] 
[CITE@en[HTML Modules · Issue #645 · WICG/webcomponents · GitHub]], [TIME[2024-09-14T01:54:33.000Z]] <https://github.com/WICG/webcomponents/issues/645>

[3] [CITE@en[Bug 25868 – <script module>]]
( ([TIME[2014-05-24 03:40:10 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=25868>

-[4] [CITE[dherman/web-modules]]
( ([TIME[2014-05-24 03:40:42 +09:00]] 版))
<https://github.com/dherman/web-modules>
-[75] [CITE@en[Status Report: ES6 Modules - Speaker Deck]], [TIME[2024-09-14T02:00:45.000Z]] <https://speakerdeck.com/dherman/status-report-es6-modules?slide=37>
- [76] [CITE@en[Complete ES6 Loader API · GitHub]], [TIME[2024-09-14T02:01:46.000Z]] <https://gist.github.com/dherman/7568080>
-- [77] c.f. [CITE[[[Loader Standard]]]]

;; [74] 他の [CODE[<module>]] は [CODE[postMessage]] 参照。

[FIG(data)[ [216] [[HTML要素概説]]

:[F[要素名]]:[CODE[module]]
:日付:[TIME[2014]]
:説明:
[TIME[2014]]、
[[モジュールスクリプト]]の記述のため
[CODE[module]]
が提案された。
現在の [CODE[script]] ([CODE(HTML)[type=module]]) に当たる。
:出典:
[REFS[

- 
[DFN[ModuleTagDave]]:
[CITE@en[GitHub - dherman/module-tag: Specs for the module tag]], 
[TIME(.published)[2014-09-29]],
[TIME[2024-09-14T01:57:59.000Z]] <https://github.com/dherman/module-tag>

]REFS]
:注釈:
- [DFN[[RUBYB@ja[モジュールスクリプト]@en[module script]]]]
[[古典スクリプト]]に対して、 [[JavaScriptモジュール]]。
- [DFN[[RUBYB@ja[古典スクリプト]@en[classic script]]]]
[[モジュールスクリプト]]に対して、従来の [[JavaScript]] プログラムコード。

]FIG]

[5] [CITE[IRC logs: freenode / #whatwg / 20140522]]
( ([TIME[2014-05-25 15:51:32 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140522>

[6] [CITE[Integrating the Webs' dependency systems]]
( ([TIME[2014-05-26 02:52:02 +09:00]] 版))
<https://mail.mozilla.org/pipermail/es-discuss/2014-May/037265.html>

[7] [CITE[IRC logs: freenode / #whatwg / 20140612]]
( ([TIME[2014-06-13 18:14:57 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140612>

[8] [CITE[Adding out-of-band dependencies for a module]]
( ([TIME[2014-08-16 00:25:20 +09:00]] 版))
<https://mail.mozilla.org/pipermail/es-discuss/2014-August/038743.html>

[9] [CITE[Modules and dependencies known before the load]]
( ([TIME[2014-08-16 00:25:20 +09:00]] 版))
<https://mail.mozilla.org/pipermail/es-discuss/2014-August/038802.html>

[10] [CITE[Dependencies for non-ES modules]]
( ([TIME[2014-08-16 00:25:20 +09:00]] 版))
<https://mail.mozilla.org/pipermail/es-discuss/2014-August/038806.html>

[11] [CITE[Normalize hook default Web behaviour]]
( ([TIME[2014-08-16 00:25:20 +09:00]] 版))
<https://mail.mozilla.org/pipermail/es-discuss/2014-August/038821.html>

[12] [CITE[Importing modules inside HTML imports]]
( ([TIME[2014-08-16 00:47:03 +09:00]] 版))
<https://mail.mozilla.org/pipermail/es-discuss/2014-August/038824.html>

[13] [CITE[Changing dependencies]]
( ([TIME[2014-08-16 17:22:42 +09:00]] 版))
<https://mail.mozilla.org/pipermail/es-discuss/2014-August/038826.html>

[14] [CITE@en[''''''[''''''whatwg'''''']'''''' Preloading and deferred loading of scripts and other 	resources]]
( ([[Ian Hickson]] 著, [TIME[2014-08-23 09:44:23 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-whatwg-archive/2014Aug/0177.html>

[15] [CITE[dherman/web-modules]]
( ([TIME[2014-03-20 08:09:50 +09:00]] 版))
<https://github.com/dherman/web-modules/>

[16] [CITE[IRC logs: freenode / #whatwg / 20140328]]
( ([TIME[2014-03-30 01:03:25 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140328>

[17] [CITE@en[25868 – <script module>]]
([TIME[2015-12-29 15:22:30 +09:00]] 版)
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=25868>

[18] [CITE@en[Add <script type="module"> and module resolution/fetching/evaluation by domenic · Pull Request #443 · whatwg/html]]
([TIME[2015-12-29 15:22:36 +09:00]] 版)
<https://github.com/whatwg/html/pull/443>

[117] [CITE@en[Add <script type="module"> and module resolution/fetching/evaluation · whatwg/html@cd1a9fb]]
([TIME[2016-01-21 22:53:08 +09:00]] 版)
<https://github.com/whatwg/html/commit/cd1a9fb1e83f7d0bc30be8b34ecdaf444a0b19a4>

[19] [CITE@en[Merge pull request #360 from dglazkov/html-modules · w3c/webcomponents@07485f2]]
([TIME[2016-01-07 11:54:02 +09:00]] 版)
<https://github.com/w3c/webcomponents/commit/07485f25730284e1a4e1ece9b93a23d0e91a1d1b>

[23] [CITE@ja[ECMA-262 6th (ES 2015) のモジュールについて (入門編) - ひだまりソケットは壊れない]]
([TIME[2016-01-30 11:19:14 +09:00]] 版)
<http://vividcode.hatenablog.com/entry/ecmascript/module-introduction>

[24] [CITE@en[webcomponents/HTML-Imports-and-ES-Modules.md at html-modules · dglazkov/webcomponents]]
([TIME[2016-02-01 20:54:47 +09:00]] 版)
<https://github.com/dglazkov/webcomponents/blob/html-modules/proposals/HTML-Imports-and-ES-Modules.md>

[25] [CITE@en[Use "credentials mode" instead of "CORS setting" for modules · whatwg/html@7a0ce07]]
([TIME[2016-02-04 17:39:11 +09:00]] 版)
<https://github.com/whatwg/html/commit/7a0ce073a8fbade8f44d0e2d4c709ad7cf3ee312>

[28] [CITE@en[Add module workers · whatwg/html@e3a5bb7]]
([TIME[2016-02-15 22:48:28 +09:00]] 版)
<https://github.com/whatwg/html/commit/e3a5bb757f64374c37d8c4528c01298463ef0b2a>

[34] [CITE@en[Support module service workers, and update for ES6 · Issue #831 · slightlyoff/ServiceWorker]]
([TIME[2016-03-01 11:32:12 +09:00]] 版)
<https://github.com/slightlyoff/ServiceWorker/issues/831>

[35] [CITE@en[Pass parser metadata to Fetch · whatwg/html@e6500b9]]
([TIME[2016-04-16 22:39:22 +09:00]] 版)
<https://github.com/whatwg/html/commit/e6500b90244376c023e7b78642dbc7b86829233f>

[36] [CITE[The WHATWG Blog — Adding JavaScript modules to the web platform]]
([TIME[2016-04-17 13:31:54 +09:00]] 版)
<https://blog.whatwg.org/js-modules>

[37] [CITE@en-US[Previewing ES6 Modules and more from ES2015, ES2016 and beyond | Microsoft Edge Dev Blog]]
( ([TIME[2016-05-19 10:16:47 +09:00]]))
<https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/>

[38] [CITE@en[Add `application/javascript+module` mime to remove ambiguity · Issue #322 · tc39/ecma262]]
([TIME[2016-06-27 13:52:19 +09:00]])
<https://github.com/tc39/ecma262/issues/322>

[39] [CITE@en[Handle error cases during module script tree fetching/running better]]
([[domenic]]著, [TIME[2016-08-09 12:06:32 +09:00]])
<https://github.com/whatwg/html/commit/e1af86747f591e33fd0f3f21f301dc866868c9d4>

[47] [CITE@en[Import module function (assuming <script type="module"> is implemented)]]
([TIME[2017-01-04 22:44:59 +09:00]])
<https://gist.github.com/domenic/fd84ee5f4e2dc0278ab1>

[48] [CITE@en[design/JS.md at master · WebAssembly/design]]
([TIME[2017-01-18 15:46:49 +09:00]])
<https://github.com/WebAssembly/design/blob/master/JS.md>

[49] [CITE@en[design/Modules.md at master · WebAssembly/design]]
([TIME[2017-01-18 15:47:48 +09:00]])
<https://github.com/WebAssembly/design/blob/master/Modules.md>

[50] [CITE@en[Fix error cases of <script type=module>]]
([[domenic]]著, [TIME[2017-05-13 01:50:49 +09:00]])
<https://github.com/whatwg/html/commit/115763124a641e8814665c5014d28155f95ff441>

[51] [CITE@en[Simpler path for adoption of modules in workers · Issue #2888 · whatwg/html]]
([TIME[2017-08-06 21:37:01 +09:00]])
<https://github.com/whatwg/html/issues/2888>

[52] [CITE@en[Improve module instantiation/evaluation, especially around errors]]
([[domenic]]著, [TIME[2017-08-04 05:13:45 +09:00]])
<https://github.com/whatwg/html/commit/2b408b65a11fe76b6588b744e0ae74d30ff29b43>

[54] [CITE@en[Circular module graphs instantiate too early · Issue #2629 · whatwg/html]]
([TIME[2017-09-03 16:22:41 +09:00]])
<https://github.com/whatwg/html/issues/2629>

[55] [CITE@en[Module script errors maybe shouldn't propagate to descendant scripts so much · Issue #2630 · whatwg/html]]
([TIME[2017-09-03 16:23:10 +09:00]])
<https://github.com/whatwg/html/issues/2630>

[56] [CITE@en[Rely on the JavaScript spec to handle more module errors by domenic · Pull Request #2674 · whatwg/html]]
([TIME[2017-09-03 16:23:38 +09:00]])
<https://github.com/whatwg/html/pull/2674>

[57] [CITE@en[Resolving modules via definition · Issue #3056 · whatwg/html]]
([TIME[2017-09-21 12:28:36 +09:00]])
<https://github.com/whatwg/html/issues/3056>

[58] [CITE@en[Fix module script error handling, again by domenic · Pull Request #2991 · whatwg/html]]
([TIME[2017-12-19 00:44:22 +09:00]])
<https://github.com/whatwg/html/pull/2991>

[59] [CITE@en[Do not remember module instantiation errors. by GeorgNeis · Pull Request #1006 · tc39/ecma262]]
([TIME[2017-12-19 00:51:31 +09:00]])
<https://github.com/tc39/ecma262/pull/1006>

[60] [CITE@en[Fix authoring guidance to allow async="" on inline module scripts]]
([[domenic]]著, [TIME[2018-01-06 03:37:30 +09:00]])
<https://github.com/whatwg/html/commit/271f19c34786db04a17c16c24807a33113894a68>

[61] [CITE@en[async="" should be allowed on inline module scripts · Issue #3319 · whatwg/html]]
([TIME[2018-02-26 00:11:14 +09:00]])
<https://github.com/whatwg/html/issues/3319>

[62] [CITE@en[Fix authoring guidance to allow async="" on inline module scripts by domenic · Pull Request #3324 · whatwg/html]]
([TIME[2018-02-26 00:11:33 +09:00]])
<https://github.com/whatwg/html/pull/3324>

[63] [CITE@en[Add <link> rel="modulepreload"]]
([[domenic]]著, [TIME[2017-12-15 05:04:40 +09:00]])
<https://github.com/whatwg/html/commit/7c28027b80208aa6b126fa7b086c44877f584178>

[64] [CITE@en[preload, destinations, and module scripts · Issue #486 · whatwg/fetch]]
([TIME[2018-03-20 15:15:50 +09:00]])
<https://github.com/whatwg/fetch/issues/486>

[65] [CITE@en[Add <link> rel="modulepreload" by domenic · Pull Request #2383 · whatwg/html]]
([TIME[2018-03-20 15:20:54 +09:00]])
<https://github.com/whatwg/html/pull/2383>

[66] [CITE@en[Script modules and credentials · Issue #2557 · whatwg/html]]
([TIME[2018-04-21 15:32:03 +09:00]])
<https://github.com/whatwg/html/issues/2557>

[67] [CITE@en[Editorial: use .mjs for modules more consistently in examples]]
([[mathiasbynens]]著, [TIME[2018-07-12 05:47:34 +09:00]])
<https://github.com/whatwg/html/commit/51ac91fd500bcfcb090bafa59ac4d63b92066fd6>

[68] [CITE@en[Use .mjs for modules more consistently by mathiasbynens · Pull Request #3810 · whatwg/html]]
([TIME[2018-07-13 16:08:05 +09:00]])
<https://github.com/whatwg/html/pull/3810>

[69] [CITE@en[Editorial: change "resolve a module specifier" to take a URL]]
([[domfarolino]]著, [TIME[2018-07-10 05:10:41 +09:00]])
<https://github.com/whatwg/html/commit/8176d055eaef62cad03327a7cc47c5c7926ffb0c>

[70] [CITE@en[Resolve a module specifier now takes a base URL by domfarolino · Pull Request #3807 · whatwg/html]]
([TIME[2018-07-26 21:39:23 +09:00]])
<https://github.com/whatwg/html/pull/3807>

[71] [CITE@en[Rename Module.Instantiate to Module.Link]]
([[Ms2ger]]著, [TIME[2019-06-26 00:09:55 +09:00]])
<https://github.com/heycam/webidl/commit/c0d927a430aa0c18f5cb28b6a8dafb835e4295b1>

[72] [CITE@en[Layering: Rename Module.Instantiate to Module.Link by linclark · Pull Request #1312 · tc39/ecma262]]
([TIME[2020-01-12 14:52:10 +09:00]])
<https://github.com/tc39/ecma262/pull/1312>

[73] [CITE@en[Rename Module.Instantiate to Module.Link by Ms2ger · Pull Request #741 · heycam/webidl]]
([TIME[2020-01-12 14:52:40 +09:00]])
<https://github.com/heycam/webidl/pull/741>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)