【JavaScript】ECMAScriptモジュール②

# 概要
...[【JavaScript】ECMAScriptモジュール①](https://qiita.com/andota05/items/d91086102326b2bd3dbb)の続きです。
...[【JavaScript】ECMAScriptモジュール③](https://qiita.com/andota05/items/3226966ab77877450853)もあります。

JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

# デフォルトエクスポート/インポート
デフォルトエクスポート/インポートについてそれぞれ記載していく。
※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

<details><summary>動作環境情報はコチラ</summary><div>

**【環境】**
PC：Mac
エディタ：Visual Studio Code
プラグイン：`Live Server`というVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール：GoogleChrome

**【登場ファイル】**
export.js：エクスポートに関するコードを記述した`エクスポート側`のファイル
import.js：インポートに関するコードを記述した`インポート側`のファイル
index.html：「import.js」を使用、および開発者コンソールで確認する際に開くファイル

**【★ポイント】**
index.htmlの`headタグ`内に`<script src="import.js" type="module"></script>`のように記述する

```index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript入門</title>
    <script src="import.js" type="module"></script>
</head>

<body>
</body>

</html>
```

※最終的に以下のような構成になる。
(任意の場所に「js」フォルダを作成および、フォルダに上記3ファイルを作成・配置する)
![スクリーンショット 2021-09-13 17.47.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640274/92a261d4-1f95-d668-e72b-ab5da7211eb8.png)

</div></details>

## デフォルトエクスポート
* モジュールごとに1つしかエクスポートができない。(名前つきエクスポートは複数可能)
* エクスポート方法は、` export default エクスポート対象;`と記載する。

```export.js
// wordという変数を定義
const word = 'word';

// helloという関数を定義
function hello() {
    console.log('Hello JavaScript');
};

// export default エクスポート対象; でエクスポート
export default word; 
```

## ★Tips①
* `export`文を宣言の前に付けると、宣言とデフォルトエクスポートが同時に可能となる。
* このTipsは`関数`や`クラス`のみに有効。(変数はカンマ区切りで複数定義可能なため)
* また、この時関数名やクラス名を省略可能。

```js
export default function hello() {　 "...処理" };
// 関数名を省略した場合
export default function () { "...処理" };

// 変数は使用できない
export default const tmp_var; // =>エラーとなる
```

## デフォルトインポート
* 指定したモジュールのデフォルトエクスポートに名前をつけてインポートする。
* インポート方法は`import インポート名 from モジュールパス`と記載する。

```export.js
// wordという変数を定義
const word = 'word';

// helloという関数を定義
function hello() {
    console.log('Hello JavaScript');
};

// export default エクスポート対象; でエクスポート
export default word;
```

```import.js
// import インポート名 from モジュールパスでインポート
import word from './export.js';

console.log(word); // => word
```

## ★Tips②
* デフォルトエクスポートは、`default`という`固有の名前による名前つきエクスポート`と同じものである。
* そのため、名前つきエクスポートで`as default`とエイリアスをつけることでデフォルトエクスポートすることが可能。
* また、名前つきインポートでは`default`という名前を指定することで、デフォルトインポートすることが可能。

```export.js
// wordという変数を定義
const word = 'word';

// 名前つきエクスポートでas defaultとすることでデフォルトエクスポートとなった
export { word as default };
```

```import.js
// defaultは予約語のため、名前つきインポートでas構文を使用しエイリアスを付けることでインポート可能
import { default as defaultWord }  from './export.js';

console.log(defaultWord); // => word
```

## ★Tips③
* 名前つきインポートとデフォルトインポートの構文は同時に記述することも可能。

```export.js
// wordという名前つきエクスポート用変数を定義
const word = 'word';

// 関数defaultFuncをデフォルトエクスポート用に定義
export default  defaultFunc () {
  console.log('defaultFunc!');
}

// 「word」を名前つきエクスポート
export { word };
```

```import.js
// デフォルトエクスポートを行った「defaultFunc」、名前つきエクスポートを行った「word」をインポート
import defaultFunc, { word } from './export.js';

console.log(word);  // => word
defaultFunc();      // => defaultFunc!
```