From 184781d82565698cb55fbae2db949484d956a204 Mon Sep 17 00:00:00 2001 From: kahei Date: Wed, 22 Jan 2020 15:31:49 +0900 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E3=83=A2=E3=82=B8=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E3=83=AB=E3=80=91=E7=94=A8=E5=AD=97=E7=94=A8=E8=AA=9E=E3=81=AE?= =?UTF-8?q?=E7=B5=B1=E4=B8=80=E3=83=BB=E7=B7=A8=E9=9B=86=E6=B8=88=E3=81=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/basic/module/README.md | 58 +++++++++---------- .../module/src/default-import-with-named.js | 2 +- source/basic/module/src/named-export-alias.js | 2 +- .../basic/module/src/named-export-declare.js | 2 +- source/basic/module/src/named-export.js | 2 +- source/basic/module/src/named-import-alias.js | 2 +- source/basic/module/src/named-import.js | 2 +- source/basic/module/src/namespace-import.js | 4 +- source/basic/module/src/re-export-invalid.js | 10 ++-- 9 files changed, 42 insertions(+), 42 deletions(-) diff --git a/source/basic/module/README.md b/source/basic/module/README.md index 1c023530c6..45553b5d2d 100644 --- a/source/basic/module/README.md +++ b/source/basic/module/README.md @@ -5,17 +5,17 @@ description: "JavaScriptのモジュール（ECMAScriptモジュール）につ # [ES2015] ECMAScriptモジュール {#module} -ECMAScriptモジュールは[Todoアプリのユースケース][]で実際に動かしながら学ぶため、ここでは構文の説明とモジュールのイメージを掴むのが目的です。 +ECMAScriptモジュールは[Todoアプリのユースケース][]で実際に動かしながら学ぶため、ここでは構文の説明とモジュールのイメージをつかむのが目的です。 この章のサンプルコードを実際に動かすためにはローカルサーバーなどの準備が必要です。 そのため、ユースケースの章を先に読んでから戻ってきてもかまいません。 モジュールは、保守性・名前空間・再利用性のために使われます。 - * 保守性: 依存性の高いコードの集合を一箇所にまとめ、それ以外のモジュールへの依存性を減らすことができます + * 保守性: 依存性の高いコードの集合を一箇所にまとめ、それ以外のモジュールへの依存性を減らせます * 名前空間: モジュールごとに分かれたスコープがあり、グローバルの名前空間を汚染しません * 再利用性: 便利な変数や関数を複数の場所にコピーアンドペーストせず、モジュールとして再利用できます -ひとつのJavaScriptモジュールはひとつのJavaScriptファイルに対応します。 +1つのJavaScriptモジュールは1つのJavaScriptファイルに対応します。 モジュールは変数や関数などを外部にエクスポートできます。また、別のモジュールで宣言された変数や関数などをインポートできます。 この章では **ECMAScriptモジュール（ESモジュール、JSモジュールとも呼ばれる）** について見ていきます。 ECMAScriptモジュールは、ES2015で導入されたJavaScriptファイルをモジュール化する言語標準の機能です。 @@ -24,39 +24,39 @@ ECMAScriptモジュールは、ES2015で導入されたJavaScriptファイルを ECMAScriptモジュールは、[export文][]によって変数や関数などをエクスポートできます。 また、[import文][]を使って別のモジュールからエクスポートされたものをインポートできます。 -インポートとエクスポートはそれぞれに **名前付き** と **デフォルト** という2種類の方法があります。 +インポートとエクスポートはそれぞれに **名前つき** と **デフォルト** という2種類の方法があります。 -まずは名前付きエクスポート／インポート文について見ていきましょう。 +まずは名前つきエクスポート／インポート文について見ていきましょう。 -### 名前付きエクスポート／インポート {#named-export-import} +### 名前つきエクスポート／インポート {#named-export-import} -**名前付きエクスポート**は、モジュールごとに複数の変数や関数などをエクスポートできます。 -次の例では、`foo`変数と`bar`関数をそれぞれ名前付きエクスポートしています。 -`export`文のあとに続けて`{}`を書き、その中にエクスポートする変数を入れることで、宣言済みの変数を名前付きエクスポートできます。 +**名前つきエクスポート**は、モジュールごとに複数の変数や関数などをエクスポートできます。 +次の例では、`foo`変数と`bar`関数をそれぞれ名前つきエクスポートしています。 +`export`文のあとに続けて`{}`を書き、その中にエクスポートする変数を入れることで、宣言済みの変数を名前つきエクスポートできます。 [import, title="named-export.js"](src/named-export.js) -また、名前付きエクスポートでは`export`文を宣言の前につけると、宣言と同時に名前付きエクスポートできます。 +また、名前つきエクスポートでは`export`文を宣言の前につけると、宣言と同時に名前つきエクスポートできます。 [import, title="named-export-declare.js"](src/named-export-declare.js) -**名前付きインポート**は、指定したモジュールから名前を指定して選択的にインポートできます。 -次の例では `my-module.js`から名前付きエクスポートされたオブジェクトの名前を指定して名前付きインポートしています。 -`import`文のあとに続けて`{}`を書き、その中にインポートしたい名前付きエクスポートの名前を入れます。 +**名前つきインポート**は、指定したモジュールから名前を指定して選択的にインポートできます。 +次の例では `my-module.js`から名前つきエクスポートされたオブジェクトの名前を指定して名前つきインポートしています。 +`import`文のあとに続けて`{}`を書き、その中にインポートしたい名前つきエクスポートの名前を入れます。 複数の値をインポートしたい場合は、それぞれの名前をカンマで区切ります。 [import, title="my-module.js"](src/my-module-1.js) [import, title="named-import.js"](src/named-import.js) -#### 名前付きエクスポート／インポートのエイリアス {#named-export-import-alias} +#### 名前つきエクスポート／インポートのエイリアス {#named-export-import-alias} -名前付きエクスポート／インポートには**エイリアス**の仕組みがあります。 -エイリアスを使うと、宣言済みの変数を違う名前で名前付きエクスポートできます。 +名前つきエクスポート／インポートには**エイリアス**の仕組みがあります。 +エイリアスを使うと、宣言済みの変数を違う名前で名前つきエクスポートできます。 エイリアスをつけるには、次のように`as`のあとにエクスポートしたい名前を記述します。 [import, title="named-export-alias.js"](src/named-export-alias.js) -また、名前付きインポートしたオブジェクトにも別名をつけることができます。 +また、名前つきインポートしたオブジェクトにも別名をつけることができます。 インポートでも同様に、`as`のあとに別名を記述します。 [import, title="named-import-alias.js"](src/named-import-alias.js) @@ -64,14 +64,14 @@ ECMAScriptモジュールは、[export文][]によって変数や関数などを ### デフォルトエクスポート／インポート {#default-export-import} 次に、デフォルトエクスポート／インポートについて見ていきましょう。 -**デフォルトエクスポート**は、モジュールごとにひとつしかエクスポートできない特殊なエクスポートです。 +**デフォルトエクスポート**は、モジュールごとに1つしかエクスポートできない特殊なエクスポートです。 次の例は、すでに宣言されている変数をデフォルトエクスポートしています。 `export default`文で、後に続く式の評価結果をデフォルトエクスポートします。 [import, title="default-export.js"](src/default-export.js) また、`export`文を宣言の前につけると、宣言と同時にデフォルトエクスポートできます。 -このとき関数やクラスは名前を省略できます。 +このとき関数やクラスの名前を省略できます。 @@ -88,25 +88,25 @@ export default function() {} [import, default-export-variables-invalid.js](src/default-export-variables-invalid.js) **デフォルトインポート**は、指定したモジュールのデフォルトエクスポートに名前をつけてインポートします。 -次の例では `my-module.js`のデフォルトエクスポートに`myModule`というという名前をつけてインポートしています。 +次の例では `my-module.js`のデフォルトエクスポートに`myModule`という名前をつけてインポートしています。 `import`文のあとに任意の名前をつけることで、デフォルトエクスポートをインポートできます。 [import, title="my-module.js"](src/my-module-2.js) [import, title="default-import.js"](src/default-import.js) -実はデフォルトエクスポートは、`default`という固有の名前による名前付きエクスポートと同じものです。 -そのため、名前付きエクスポートで`as default`とエイリアスをつけることでデフォルトエクスポートすることもできます。 +実はデフォルトエクスポートは、`default`という固有の名前による名前つきエクスポートと同じものです。 +そのため、名前つきエクスポートで`as default`とエイリアスをつけることでデフォルトエクスポートすることもできます。 [import, title="default-export-alias.js"](src/default-export-alias.js) -同様に、名前付きインポートにおいても`default`という名前がデフォルトインポートに対応しています。 -次のように、名前付きインポートで`default`を指定するとデフォルトインポートできます。 +同様に、名前つきインポートにおいても`default`という名前がデフォルトインポートに対応しています。 +次のように、名前つきインポートで`default`を指定するとデフォルトインポートできます。 ただし、`default`は予約語なので、この方法では必ず`as`構文を使ってエイリアスをつける必要があります。 [import, title="default-import-alias.js"](src/default-import-alias.js) -また、名前付きインポートとデフォルトインポートの構文は同時に記述できます。 +また、名前つきインポートとデフォルトインポートの構文は同時に記述できます。 次のように2つの構文をカンマでつなげます。 [import, title="default-import-with-named.js"](src/default-import-with-named.js) @@ -114,15 +114,15 @@ export default function() {} ECMAScriptモジュールでは、エクスポートされていないものはインポートできません。 なぜならECMAScriptモジュールはJavaScriptのパース段階で依存関係が解決され、インポートする対象が存在しない場合はパースエラーとなるためです。 デフォルトインポートは、インポート先のモジュールがデフォルトエクスポートをしている必要があります。 -同様に名前付きインポートは、インポート先のモジュールが指定した名前付きエクスポートをしている必要があります。 +同様に名前つきインポートは、インポート先のモジュールが指定した名前つきエクスポートをしている必要があります。 ### その他の構文 {#other-syntax} -ECMAScriptモジュールには名前付きとデフォルト以外にもいくつかの構文があります。 +ECMAScriptモジュールには名前つきとデフォルト以外にもいくつかの構文があります。 #### 再エクスポート {#re-export} -再エクスポートとは、別のモジュールからインポートしたものを、改めて自分自身からエクスポートしなおすことです。 +再エクスポートとは、別のモジュールからインポートしたものを、改めて自分自身からエクスポートし直すことです。 複数のモジュールからエクスポートされたものをまとめたモジュールを作るときなどに使われます。 再エクスポートは次のように`export`文のあとに`from`を続けて、別のモジュール名を指定します。 @@ -131,7 +131,7 @@ ECMAScriptモジュールには名前付きとデフォルト以外にもいく #### すべてをインポート {#namespace-import} -`import * as`構文は、すべての名前付きエクスポートをまとめてインポートします。 +`import * as`構文は、すべての名前つきエクスポートをまとめてインポートします。 この方法では、モジュールごとの **名前空間** となるオブジェクトを宣言します。 エクスポートされた変数や関数などにアクセスするには、その名前空間オブジェクトのプロパティを使います。 また、先ほどのとおり、`default` という固有名を使うとデフォルトエクスポートにもアクセスできます。 diff --git a/source/basic/module/src/default-import-with-named.js b/source/basic/module/src/default-import-with-named.js index 87a820405a..f7315deca3 100644 --- a/source/basic/module/src/default-import-with-named.js +++ b/source/basic/module/src/default-import-with-named.js @@ -1,5 +1,5 @@ // myModuleとしてデフォルトインポートし、 -// fooを名前付きインポートする +// fooを名前つきインポートする import myModule, { foo } from "./my-module.js"; console.log(foo); // => "foo" console.log(myModule); // => { baz: "baz" } diff --git a/source/basic/module/src/named-export-alias.js b/source/basic/module/src/named-export-alias.js index 26f4345b70..ca952dda8b 100644 --- a/source/basic/module/src/named-export-alias.js +++ b/source/basic/module/src/named-export-alias.js @@ -1,4 +1,4 @@ const internalFoo = "foo"; -// internalFoo変数をfooとして名前付きエクスポートする +// internalFoo変数をfooとして名前つきエクスポートする export { internalFoo as foo }; diff --git a/source/basic/module/src/named-export-declare.js b/source/basic/module/src/named-export-declare.js index ae134dd121..5337d4802e 100644 --- a/source/basic/module/src/named-export-declare.js +++ b/source/basic/module/src/named-export-declare.js @@ -1,2 +1,2 @@ -// 宣言と同時に名前付きエクスポートする +// 宣言と同時に名前つきエクスポートする export function bar() { }; diff --git a/source/basic/module/src/named-export.js b/source/basic/module/src/named-export.js index 51d3bcdeeb..1f7557b174 100644 --- a/source/basic/module/src/named-export.js +++ b/source/basic/module/src/named-export.js @@ -1,3 +1,3 @@ const foo = "foo"; -// 宣言済みのオブジェクトを名前付きエクスポートする +// 宣言済みのオブジェクトを名前つきエクスポートする export { foo }; diff --git a/source/basic/module/src/named-import-alias.js b/source/basic/module/src/named-import-alias.js index 3a157bfd1c..c4ad46db08 100644 --- a/source/basic/module/src/named-import-alias.js +++ b/source/basic/module/src/named-import-alias.js @@ -1,3 +1,3 @@ -// fooとして名前付きエクスポートされた変数をmyFooとしてインポートする +// fooとして名前つきエクスポートされた変数をmyFooとしてインポートする import { foo as myFoo } from "./named-export-alias.js"; console.log(myFoo); // => "foo" diff --git a/source/basic/module/src/named-import.js b/source/basic/module/src/named-import.js index 37a9625f3e..a5b7a2acd1 100644 --- a/source/basic/module/src/named-import.js +++ b/source/basic/module/src/named-import.js @@ -1,4 +1,4 @@ -// 名前付きエクスポートされたfooとbarをインポートする +// 名前つきエクスポートされたfooとbarをインポートする import { foo, bar } from "./my-module.js"; console.log(foo); // => "foo" console.log(bar); // => "bar" diff --git a/source/basic/module/src/namespace-import.js b/source/basic/module/src/namespace-import.js index c2417fa3ad..4dd052971e 100644 --- a/source/basic/module/src/namespace-import.js +++ b/source/basic/module/src/namespace-import.js @@ -1,6 +1,6 @@ -// すべての名前付きエクスポートをmyModuleオブジェクトとしてまとめてインポートする +// すべての名前つきエクスポートをmyModuleオブジェクトとしてまとめてインポートする import * as myModule from "./my-module.js"; -// fooとして名前付きエクスポートされた値にアクセスする +// fooとして名前つきエクスポートされた値にアクセスする console.log(myModule.foo); // => "foo" // defaultとしてデフォルトエクスポートされた値にアクセスする console.log(myModule.default); // => { baz: "baz" } diff --git a/source/basic/module/src/re-export-invalid.js b/source/basic/module/src/re-export-invalid.js index f7fe2e21e7..2e68f173e6 100644 --- a/source/basic/module/src/re-export-invalid.js +++ b/source/basic/module/src/re-export-invalid.js @@ -1,12 +1,12 @@ -// ./my-module.jsのすべての名前付きエクスポートを再エクスポートする +// ./my-module.jsのすべての名前つきエクスポートを再エクスポートする export * from "./my-module.js"; -// ./my-module.jsの名前付きエクスポートを選んで再エクスポートする +// ./my-module.jsの名前つきエクスポートを選んで再エクスポートする export { foo, bar } from "./my-module.js"; -// ./my-module.jsの名前付きエクスポートにエイリアスをつけて再エクスポートする +// ./my-module.jsの名前つきエクスポートにエイリアスをつけて再エクスポートする export { foo as myModuleFoo, bar as myModuleBar } from "./my-module.js"; // ./my-module.jsのデフォルトエクスポートをデフォルトエクスポートとして再エクスポートする export { default } from "./my-module.js"; -// ./my-module.jsのデフォルトエクスポートを名前付きエクスポートとして再エクスポートする +// ./my-module.jsのデフォルトエクスポートを名前つきエクスポートとして再エクスポートする export { default as myModuleDefault } from "./my-module.js"; -// ./my-module.jsの名前付きエクスポートをデフォルトエクスポートとして再エクスポートする +// ./my-module.jsの名前つきエクスポートをデフォルトエクスポートとして再エクスポートする export { foo as default } from "./my-module.js";