initial commit

1 files changed, 268 insertions, 0 deletions

diff --git a/files/ja/web/javascript/reference/statements/export/index.html b/files/ja/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..0f8478f74c
--- /dev/null
+++ b/files/ja/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,268 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Language feature
+  - Modules
+  - Reference
+  - Statement
+  - export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>export</code></strong> 文は JavaScript モジュールを作成するときに使用され、モジュールから関数、オブジェクト、またはプリミティブ値へのライブバインディングのエクスポートを行い、{{jsxref("Statements/import", "import")}} 文を使用した他のプログラムが使用できるようにします。インポートされたモジュールは読み取り専用で、エクスポートされたモジュールが変更されるたびに値が更新されます。</p>
+
+<p>エクスポートされたモジュールは、宣言のあるなしにかかわらず {{jsxref("Strict_mode","Strict モード", "", 1)}}で動作します。export 文は、埋め込みスクリプトでは使えません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>2種類のエクスポート方法があります。</p>
+
+<ol>
+ <li>名前付きエクスポート (モジュールごとに 0 以上のエクスポート)</li>
+ <li>デフォルトエクスポート (モジュールごとに 1 つのエクスポート)</li>
+</ol>
+
+<pre class="syntaxbox notranslate">// 個々の機能をエクスポート
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // var, const も
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // var, const も
+export function functionName(){...}
+export class ClassName {...}
+
+// リストでエクスポート
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
+
+// 名前を変更してエクスポート
+export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
+
+// 分割代入してエクスポート
+export const { <var>name1</var>, <var>name2: bar</var> } = o;
+
+// デフォルトエクスポート
+export default <em>expression</em>;
+export default function (…) { … } // class, function* も使用可
+export default function name1(…) { … } // class, function* も使用可
+export { <var>name1</var> as default, … };
+
+// モジュールの集約
+export * from …; // デフォルトエクスポートを設定しません
+export * as name1 from …; // ECMAScript® 2O21 の草案
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
+export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;
+export { default } from …;</pre>
+
+<dl>
+ <dt><code><var>nameN</var></code></dt>
+ <dd>エクスポートする識別子です。(別のスクリプトが {{jsxref("Statements/import", "import")}} を使用してインポート可能になります。) </dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>エクスポート方法は、<strong>名前付き</strong>と<strong>デフォルト</strong>の 2 種類あります。名前付きエクスポートはモジュールごとに複数持てますが、デフォルトエクスポートは 1 つに限ります。それぞれのエクスポート方法は、上記の構文のひとつに対応します。</p>
+
+<p>名前付きエクスポート:</p>
+
+<pre class="brush: js notranslate">// 事前に宣言された機能のエクスポート
+export { myFunction, myVariable };
+
+// 個別の機能のエクスポート
+// (var, let, const, function, class がエクスポート可能)
+export let myVariable = Math.sqrt(2);
+export function myFunction() { ... };
+</pre>
+
+<p>デフォルトエクスポート:</p>
+
+<pre class="brush: js notranslate">// デフォルトとして事前に定義された機能のエクスポート
+export { myFunction as default };
+
+// 個別の機能をデフォルトとしてエクスポート
+export default function () { ... }
+export default class { .. }
+
+// 各エクスポートは前のエクスポートを上書きします
+</pre>
+
+<p>名前付きエクスポートは、さまざまな値をエクスポートするのに役立ちます。インポートするときは、対応するオブジェクトと同じ名前を使用しなければなりません。</p>
+
+<p>一方、デフォルトエクスポートは以下のように任意の名前を使用できます。</p>
+
+<pre class="brush: js notranslate">// ファイル test.js
+let k; export default k = 12;
+</pre>
+
+<pre class="brush: js notranslate">// 他のファイル
+import m from './test'; // k がデフォルトエクスポートなので、インポートする k の代わりに m を使用することができる点に注意してください
+console.log(m);        // log 12 になる
+</pre>
+
+<p>名前の競合を防ぐために、名前付きエクスポートの名前を変更することもできます。</p>
+
+<pre class="brush: js notranslate">export { <var>myFunction</var> as <var>function1</var>,<var>
+         myVariable</var> as variable };</pre>
+
+<h3 id="Re-exporting_Aggregating" name="Re-exporting_Aggregating">再エクスポート / 集約</h3>
+
+<p>また、親モジュール内の異なるモジュールから「インポート/エクスポート」して、そのモジュールからインポートできるようにすることも可能です。言い換えれば、様々なモジュールからの様々なエクスポートを集約した 1 つのモジュールを作成することができます。</p>
+
+<p>これは "export from" 構文で実現できます。</p>
+
+<pre class="brush: js notranslate">export { default as function1,
+         function2 } from 'bar.js';
+</pre>
+
+<p>これは、インポートとエクスポートの組み合わせに相当します。</p>
+
+<pre class="brush: js notranslate">import { default as function1,
+         function2 } from 'bar.js';
+export { function1, function2 };
+</pre>
+
+<p>現在のモジュール内で <code>function1</code> と <code>function2</code> が利用できない場合。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> 以下は、インポートに相当するにもかかわらず、構文的に無効です。</p>
+</div>
+
+<pre class="brush: js notranslate">import DefaultExport from 'bar.js'; // 有効
+</pre>
+
+<pre class="brush: js notranslate">export DefaultExport from 'bar.js'; // 無効</pre>
+
+<p>これを行う正しい方法は、エクスポートの名前を変更することです。</p>
+
+<pre class="brush: js notranslate">export { default as DefaultExport } from 'bar.js';
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_named_exports" name="Using_named_exports">名前付きエクスポートの使用</h3>
+
+<p><code>my-module.js</code> モジュールの中で、以下のコードを含めることができます。</p>
+
+<pre class="brush: js notranslate">// "my-module.js" モジュール
+function cube(x) {
+  return x * x * x;
+}
+
+const foo = Math.PI + Math.SQRT2;
+
+var graph = {
+  options: {
+      color:'white',
+      thickness:'2px'
+  },
+  draw: function() {
+      console.log('From graph draw function');
+  }
+}
+
+export { cube, foo, graph };
+</pre>
+
+<p>HTML ページの中に含まれる最上位モジュールの中では、次のようにすることができます。</p>
+
+<pre class="brush: js notranslate">import { cube, foo, graph } from './my-module.js';
+
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888</pre>
+
+<p>以下の点に注意することが重要です。</p>
+
+<ul>
+ <li>このスクリプトを HTML の {{htmlelement("script")}} 要素で type="module" を指定したものに入れる必要があり、そうすれば適切にモジュールとして認識され、扱われます。</li>
+ <li><code>file://</code> の URL で JavaScript モジュールを実行することはできません。— <a href="/ja/docs/Web/HTTP/CORS">CORS</a> エラーになります。HTTP サーバーを通して実行する必要があります。</li>
+</ul>
+
+<h3 id="Using_the_default_export" name="Using_the_default_export">デフォルトエクスポートの使用</h3>
+
+<p>値をひとつエクスポートしたい、あるいはモジュールでフォールバック先の値を持ちたい場合は、デフォルトエクスポートを使用するとよいでしょう。</p>
+
+<pre class="brush: js notranslate">// module "my-module.js"
+
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>別のスクリプトからの、デフォルトエクスポートのインポートは簡単です。</p>
+
+<pre class="brush: js notranslate">import cube from './my-module.js';
+console.log(cube(3)); // 27
+</pre>
+
+<h3 id="Using_export_from" name="Using_export_from">export from の使用</h3>
+
+<p>以下のような階層がある場合を例に考えてみましょう。</p>
+
+<ul>
+ <li><code>childModule1.js</code>: <code>myFunction</code> および <code>myVariable</code> をエクスポート</li>
+ <li><code>childModule2.js</code>: <code>myClass</code> をエクスポート</li>
+ <li><code>parentModule.js</code>: 集約元として動作する (他には何もしない)</li>
+ <li>最上位モジュール: <code>parentModule.js</code> のエクスポートを利用する</li>
+</ul>
+
+<p>コードスニペットを使うとこのような感じになります。</p>
+
+<pre class="brush: js notranslate">// childModule1.js
+let myFunction = ...; // myFunction に役立つものを割り当てる
+let myVariable = ...; // myVariablemy に役立つものを割り当てる
+export {myFunction, myVariable};
+</pre>
+
+<pre class="brush: js notranslate">// childModule2.js
+let myClass = ...; // myClass に役立つものを代入する
+export myClass;
+</pre>
+
+<pre class="brush: js notranslate">// parentModule.js
+// childModule1 と childModule2 からのエクスポートを
+// 集約して再エクスポートする
+export { myFunction, myVariable } from 'childModule1.js';
+export { myClass } from 'childModule2.js';
+</pre>
+
+<pre class="brush: js notranslate">// 最上位モジュール
+// parentModule にモジュールが集約しているので、
+// 単一のモジュールからエクスポートを利用できます。
+import { myFunction, myVariable, myClass } from 'parentModule.js'</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li><a href="/ja/docs/Web/JavaScript/Guide/Modules">JavaScript モジュール</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a> Jason Orendorff のブログ記事</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a> Lin Clark のブログ記事</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>