【JavaScript・初学者】コンポーネントの基礎となるNamed import/exportの基本的な使い方

# はじめに
前回の記事で、`モジュール化`するこによって**名前空間を狭くすることができ衝突を防ぐ**という話をしました。
今回は、その`モジュール`をファイル分割によって読み込む`import/export`について考えていきます。

https://qiita.com/ke_sukesakuma/items/29efb9beeaa4ab38e142


# import/exportの種類
`import/export`の方法にはいくつか種類があります。
大きく、`default import/export`と`named import/export`の2種類です。
今回は`named import/export`について見ていきます。

# named import / export

まず、事前準備として`scriptタグ`に`type="module"`を設定して、モジュールとして扱えるように設定します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>app</title>
  </head>
  <body>
    <script src="index.js" type="module"></script>
  </body>
</html>
```
次に同じ階層に`index.js`と`default.js`を作成します。`default.js`にまず`export`できるようにコードを書いていきます。

`greet変数`を定義して、それを別ファイルで使えるように`export(出力/書き出し)`をしています。

```javascript:default.js
// named export
const greet = "hello";
export { greet };
```
そして、`index.js`で`dafault.js`で`export`された変数を`import(輸入する/取り込む)`します。
そうすると`default.js`で定義された`greet変数`を使うことができます。

```javascript:index.js
// named import
import { greet } from './default.js';
console.log(greet);
```

![スクリーンショット 2023-11-12 6.49.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/127025af-4b10-5f99-6553-abf3480df057.png)




変数以外にも**関数**も渡すことができます。

```javascript:default.js
// named export
const greet = () => {
  return "これは関数です";
}
export { greet };
```

```javascript:index.js
// named import
import { greet } from './default.js';
console.log(greet());
```
![スクリーンショット 2023-11-12 6.53.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/0cac1d0c-b1ac-e333-ba35-fa4b626ecf9b.png)


# named import / exportの特徴
### 複数まとめてimport
`export`時に複数まとめて渡すことができます。

```javascript:default.js
// named export
const greet = "hello";
const hoge = "hoge";
export { greet, hoge };
```

```javascript:index.js
// named import
import { greet, hoge } from './default.js';
console.log(greet, hoge);
```
![スクリーンショット 2023-11-12 6.59.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/241422cb-9e0a-50bb-57ba-181ff58406bc.png)

### 宣言と同時にexport

宣言と同時に`export`することもできます。
`import`時には変わらずまとめて受け取ることができます。

```javascript:default.js
// named export
export const greet = "hello";
const hoge = "hoge";
export { hoge };
```

```javascript:index.js
// named import
import { greet, hoge } from './default.js';
console.log(greet, hoge);
```
![スクリーンショット 2023-11-12 7.01.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/497a656f-4e99-a51f-89bf-bd182a8c2d4b.png)

```javascript:default.js
// named export
export const greet = () => {
  return "これは関数です";
}
```

```javascript:index.js
// named import
import { greet } from './default.js';
console.log(greet());
```

![スクリーンショット 2023-11-12 7.04.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/99bb9465-f78e-86e1-dcf8-d2dd195629a8.png)

### エイリアスの設定
`as`を指定して別名を設定することができます。

```javascript:default.js
// named export
const greet = "hello"
export { greet as hello };
```

```javascript:index.js
// named import
import { hello } from './default.js';
console.log(hello);
```
![スクリーンショット 2023-11-12 7.14.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/52f6f3cf-e69e-2c9b-7be6-49faa8469705.png)

### export/import両方でエイリアスの設定

`export`時に`as`で別名を指定し、さらに`import`時にも`as`で別名を指定することができます。

```javascript:default.js
// named export
const greet = "hello"
export { greet as hello };
```

```javascript:index.js
// named import
import { hello as h } from './default.js';
console.log(h);
```
![スクリーンショット 2023-11-12 7.16.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/faa2fac1-0c0e-d70f-dfa0-bc6fdd24936e.png)