JavaScript｜importの書き方が多いのでまとめてみた

# はじめに

エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
記事は約3分程度で読めるので最後まで読んでもらえると幸いです。

# さっと見たい人向け

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import#%E4%BE%8B

|| importの書き方パターン | 説明 |
|--:|:--|:--|
|ⅰ|import **defaultExport** from "module-name"|export defaultを持つモジュールをインポートしたいとき|
|ⅱ|import **\* as name** from "module-name"|モジュールの全てのexportをimportし、名前空間として管理したいとき|
|ⅲ|import **{ export1 }** from "module-name"|特定のexportだけをimportしたいとき|
|ⅳ|import **{ export1 as alias1 }** from "module-name"|exportの名前が競合する場合や、よりわかりやすい名前に変更したいとき|
|ⅴ|import **{ default as alias }** from "module-name"|export defaultをimportし、その名前を変更したいとき|
|ⅵ|import **{ export1, export2 }** from "module-name"|モジュールから複数の機能を一度にimportしたいとき|
|ⅶ|import **{ export1, export2 as alias2, /\* … \*/ }** from "module-name"|複数のexportをimportし、同時にエイリアスを設定したいとき|
|ⅷ|import **{ "string name" as alias }** from "module-name"|文字列のexportを持つとき|
|ⅸ|import **defaultExport, { export1, /\* … \*/ }** from "module-name"|export defaultと追加のexportを一度にimportしたいとき|
|ⅹ|import **defaultExport, * as name** from "module-name"|export defaultを使用しつつ、モジュールの他のexportも全て利用したいとき|
|ⅺ|import "module-name"|モジュールが副作用を持つとき|

``defaultExport``
importするモジュール
``name``
importを参照するとき名前空間のように用いられるモジュールオブジェクトの名前
``exportN``
importするエクスポートの名前
``aliasN``
指定されたimportを参照する名前

import時の``{}``の有無は``export default``か``export``で判断する。

# サンプルコード

## 1. import defaultExport from "module-name"

```javascript:サンプルコード
// math.js
export default function add(a, b) {
  return a + b;
}

// main.js
import add from "./math.js";

console.log(add(2, 3)); // 出力: 5
```

『export defaultを持つモジュールをimportする』ときの書き方になります。



## 2. import * as name from "module-name"

```javascript:サンプルコード
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import * as math from "./math.js";

console.log(math.add(2, 3));    // 出力: 5
console.log(math.subtract(5, 2)); // 出力: 3
```

『モジュールの全てのexportをimportし、名前空間として管理したい』ときの書き方になります。



## 3. import { export1 } from "module-name"

```javascript:サンプルコード
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add } from "./math.js";

console.log(add(2, 3)); // 出力: 5
```

『特定のexportだけをimportしたい』ときの書き方になります。
この状態で``console.log(subtract(5, 2));``を実行しても出力できません。



## 4. import { export1 as alias1 } from "module-name"

```javascript:サンプルコード
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add as sum } from "./math.js";

console.log(sum(2, 3)); // 出力: 5
```

特定のexportを別の名前（エイリアス）でimportします。『名前が競合する場合や、よりわかりやすい名前に変更したい』ときの書き方になります。この状態で``console.log(add(5, 2));``と ``console.log(subtract(5, 2));``
を実行しても出力できません。



## 5. import { default as alias } from "module-name"

```javascript:サンプルコード
// math.js
export default function add(a, b) {
  return a + b;
}

// main.js
import { default as sum } from "./math.js";

console.log(sum(2, 3)); // 出力: 5
```

『export defaultをimportし、別の名前（エイリアス）でimportしたい』ときの書き方になります。この状態で複数のexport defaultを準備してもまとめて出力はできません。


## 6. import { export1, export2 } from "module-name"

```javascript:サンプルコード
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract } from "./math.js";

console.log(add(2, 3));    // 出力: 5
console.log(subtract(5, 2)); // 出力: 3
```

『モジュールから複数のexportを一度にimportしたい』ときの書き方になります。



## 7. import { export1, export2 as alias2, /* … */ } from "module-name"

```javascript:サンプルコード
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract as minus } from "./math.js";

console.log(add(2, 3));    // 出力: 5
console.log(minus(5, 2));  // 出力: 3
```

『モジュールから複数のexportを一度にimportし、一部に別の名前（エイリアス）を付けたい』ときの書き方になります。この状態で``console.log(subtract(5, 2));``
を実行しても出力できません。


## 8. import { "string name" as alias } from "module-name"

```javascript:サンプルコード
// settings.js
export const userName = "John Doe";

// main.js
import { userName as user } from "./settings.js";

console.log(user); // 出力: John Doe
```

『文字列のexportを別の名前でimportしたい』ときの書き方になります。



## 9. import defaultExport, { export1, /* … */ } from "module-name"

```javascript:サンプルコード// math.js
export default function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import add, { subtract } from "./math.js";

console.log(add(2, 3));    // 出力: 5
console.log(subtract(5, 2)); // 出力: 3
```

『export defaultと、exportを同時にimportしたい』ときの書き方になります。



## 10. import defaultExport, * as name from "module-name"

```javascript:サンプルコード
// math.js
export default function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import add, * as math from "./math.js";

console.log(add(2, 3));    // 出力: 5
console.log(math.subtract(5, 2)); // 出力: 3
```

『export defaultと、モジュールのすべてのexportを一つのオブジェクトとしてimportしたい』ときの書き方になります。



## 11. import "module-name"

```javascript:サンプルコード
// side-effects.js
console.log("This module has side effects!");

// main.js
import './side-effects.js';

// 実行時に "This module has side effects!" と表示されます
```

『モジュールのコードを実行しますが、何もimportしない』ときの書き方になります。

以上、importの書き方についてまとめてみました！

# さいごに

唐突ですが、弊社のご紹介もさせてください。

▼ コーポレートサイト

https://prum.jp/

▼ Wantedly求人

https://www.wantedly.com/projects/626662

弊社メンバーは学習した内容を日々Qiitaの記事にアウトプットしております。
弊社にご興味のある方、まずは求人を見てみてください！
ご応募お待ちしておりますー！

### 最後までご覧いただき、ありがとうございました！