はじめに
エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
記事は約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"
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の記事にアウトプットしております。
弊社にご興味のある方、まずは求人を見てみてください！
ご応募お待ちしておりますー！