From 695e0b18f2acd53aca0c51fa80c909160975b96a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 13 Oct 2024 11:16:49 +0900 Subject: [PATCH] =?UTF-8?q?2024/08/20=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reference/statements/export/index.md | 23 ++++-- .../reference/statements/import/index.md | 76 +++++++++++-------- 2 files changed, 61 insertions(+), 38 deletions(-) diff --git a/files/ja/web/javascript/reference/statements/export/index.md b/files/ja/web/javascript/reference/statements/export/index.md index fe8ea48eefc7ba..cea72101407865 100644 --- a/files/ja/web/javascript/reference/statements/export/index.md +++ b/files/ja/web/javascript/reference/statements/export/index.md @@ -2,7 +2,7 @@ title: export slug: Web/JavaScript/Reference/Statements/export l10n: - sourceCommit: 3bf2463d6d13f1f4b388ff2a0daaea9da5e545eb + sourceCommit: eb7cf694c19b31ee8826f22eaac6c12e808b1e50 --- {{jsSidebar("Statements")}} @@ -44,6 +44,7 @@ export * as name1 from "module-name"; export { name1, /* …, */ nameN } from "module-name"; export { import1 as name1, import2 as name2, /* …, */ nameN } from "module-name"; export { default, /* …, */ } from "module-name"; +export { default as name1 } from "module-name"; ``` - `nameN` @@ -194,7 +195,7 @@ import { a } from "./barrel.js"; 以下は、import に対応するものですが、構文的には無効です。 -```js example-bad +```js-nolint example-bad export DefaultExport from "bar.js"; // Invalid ``` @@ -210,6 +211,12 @@ export from" 構文では、`as` トークンを省略することができま export { default, function2 } from "bar.js"; ``` +`export from` は `import` が対応しているすべての機能に対応しています。例えば[インポート属性](/ja/docs/Web/JavaScript/Reference/Statements/import/with)などです。 + +```js +export { default } from "./data.json" with { type: "json" }; +``` + ## 例 ### 名前付きエクスポートの使用 @@ -247,14 +254,14 @@ graph.options = { thickness: "3px", }; -graph.draw(); +graph.draw(); // "From graph draw function" と記録 console.log(cube(3)); // 27 console.log(foo); // 4.555806215962888 ``` 以下の点に注意することが重要です。 -- このスクリプトを HTML の {{htmlelement("script")}} 要素で type="module" を指定したものに入れる必要があり、そうすれば適切にモジュールとして認識され、扱われます。 +- このスクリプトを HTML の {{HTMLElement("script")}} 要素で type="module" を指定したものに入れる必要があり、そうすれば適切にモジュールとして認識され、扱われます。 - `file://` の URL で JavaScript モジュールを実行することはできません。— [CORS](/ja/docs/Web/HTTP/CORS) エラーになります。HTTP サーバーを通して実行する必要があります。 ### デフォルトエクスポートの使用 @@ -333,7 +340,7 @@ import { myFunction, myVariable, MyClass } from "parentModule.js"; ## 関連情報 - {{jsxref("Statements/import", "import")}} -- [JavaScript モジュール](/ja/docs/Web/JavaScript/Guide/Modules) -- [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) Jason Orendorff のブログ記事 -- [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/) Lin Clark のブログ記事 -- [Axel Rauschmayer's book: "Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html) +- [JavaScript モジュール](/ja/docs/Web/JavaScript/Guide/Modules)ガイド +- [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) (hacks.mozilla.org, 2015) +- [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/) (hacks.mozilla.org, 2018) +- [Exploring JS, Ch.16: Modules](https://exploringjs.com/es6/ch_modules.html) (Dr. Axel Rauschmayer) diff --git a/files/ja/web/javascript/reference/statements/import/index.md b/files/ja/web/javascript/reference/statements/import/index.md index 01594fa0e9abc4..79fba5539f1451 100644 --- a/files/ja/web/javascript/reference/statements/import/index.md +++ b/files/ja/web/javascript/reference/statements/import/index.md @@ -2,16 +2,16 @@ title: import slug: Web/JavaScript/Reference/Statements/import l10n: - sourceCommit: 1c4869cdb1a9a9c3cafba87a2cd9469591f7aa47 + sourceCommit: eb7cf694c19b31ee8826f22eaac6c12e808b1e50 --- {{jsSidebar("Statements")}} -静的な **`import`** 宣言は、他のモジュールによって[エクスポート](/ja/docs/Web/JavaScript/Reference/Statements/export)された読み込み専用のライブ{{glossary("binding", "バインディング")}}をインポートするために使用します。インポートしたバインディングは、バインディングをエクスポートしたモジュールによって更新される一方、インポートしているモジュールによって再代入することができないために、「_ライブバインディング_」と呼ばれています。 +静的な **`import`** 宣言は、他のモジュールによって[エクスポート](/ja/docs/Web/JavaScript/Reference/Statements/export)された読み込み専用の動的{{glossary("binding", "バインド")}}をインポートするために使用します。インポートしたバインドは、バインドをエクスポートしたモジュールによって更新される一方、インポートしているモジュールによって再割り当てすることができないために、「_動的バインド_」と呼ばれています。 -ソースファイルの中で `import` 宣言を使用するためには、ランタイムがそのファイルを[モジュール](/ja/docs/Web/JavaScript/Guide/Modules)と見なす必要があります。HTML では、{{HTMLElement("script")}} タグに `type="module"` を加えることがこれに相当します。モジュールは、宣言するかどうかにかかわらず、 {{JSxRef("Strict_mode","Strict モード")}}になります。 +ソースファイルの中で `import` 宣言を使用するためには、ランタイムがそのファイルを[モジュール](/ja/docs/Web/JavaScript/Guide/Modules)と見なす必要があります。HTML では、`type="module"` を {{HTMLElement("script")}} タグに加えることがこれに相当します。モジュールは、自動的に[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)として解釈されます。 -また、`type="module"` のスクリプトを必要としない動的な [**`import()`**](/ja/docs/Web/JavaScript/Reference/Operators/import) という関数のようなものもあります。 +また、関数風の動的な [`import()`](/ja/docs/Web/JavaScript/Reference/Operators/import) もあり、こちらは `type="module"` のスクリプトを必要としません。 ## 構文 @@ -30,9 +30,9 @@ import "module-name"; ``` - `defaultExport` - - : モジュールからのデフォルトのエクスポートを参照する名前。JavaScript の識別子として有効な文字列でなければなりません。 + - : モジュールからのデフォルトエクスポートを参照する名前。JavaScript の識別子として有効な文字列でなければなりません。 - `module-name` - - : インポートするモジュール。この指定子はホストが示した方法で評価されます。こちらはしばしばモジュールを含む `.js` ファイルへの相対または絶対 URL となっています。Node では、拡張子なしのインポートは `node_modules` におけるパッケージへの参照であることが多いです。バンドラーによっては、拡張子を省略してもよいことにしています。環境を確認してください。シングルクォートやダブルクォートで囲った文字列だけが使えます。 + - : インポートするモジュール。この指定子はホストが示した方法で評価されます。こちらはしばしばモジュールを含む `.js` ファイルへの相対または絶対 URL となっています。Node では、拡張子なしのインポートは `node_modules` におけるパッケージへの参照であることが多いです。バンドラーによっては、拡張子を省略してもよいことにしています。環境を確認してください。単一引用符や二重引用符で囲った文字列だけが使えます。 - `name` - : インポートを参照するとき名前空間のように用いられるモジュールオブジェクトの名前。JavaScript の識別子として有効な文字列でなければなりません。 - `exportN` @@ -40,15 +40,19 @@ import "module-name"; - `aliasN` - : 指定されたインポートを参照する名前。JavaScript の識別子として有効な文字列でなければなりません。 -## 説明 +`"module-name"` には、[インポート属性](/ja/docs/Web/JavaScript/Reference/Statements/import/with)が `with` キーワードの後に続くことがあります。 -`import` 宣言はモジュールのトップレベル（要するにブロックや関数などの中以外）にのみ書くことができます。パーサーが `import` 宣言をモジュール以外の文脈（例えば `type="module"` のない `