はじめに

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

さっと見たい人向け

	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"

サンプルコード

// 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"

サンプルコード

// 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"

サンプルコード

// 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"

サンプルコード

// 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"

サンプルコード

// 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"

サンプルコード

// 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"

サンプルコード

// 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"

サンプルコード

// 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"

サンプルコード// 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"

サンプルコード

// 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"

サンプルコード

// side-effects.js
console.log("This module has side effects!");

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

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

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

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

さいごに

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

▼ コーポレートサイト

▼ Wantedly求人

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

はじめに

さっと見たい人向け

サンプルコード

1. import defaultExport from "module-name"

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

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

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

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

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

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

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

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

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

11. import "module-name"

さいごに

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