👩‍💻

「export default, import」の注意点

2021/02/06に公開

JSにおいてexport defaultしたときは変数名を変更することができる。

ex.

export.js
const testName1 = "yamada";
const testName2 = "sato";

export default testName1; //export defaultを使った書き方
export { testName2 };     //Named importを使った書き方

import.js
import name1 from "./export.js";         //testName1じゃなくてよい!!
import { testName2 } from "./export.js"; //testName2でなければならない!!(変数名を変えると、undefinedになる)

console.log(name1);
console.log(testName2);

出力結果

yamada
sato

importするときに変数名がかぶったなどのことがなければ、
わざわざ変数名を変える意味もないと思います。
なので、必要がなければexport defaultは使わずに
Named importの方を使った方がバグを生まなくていいなと思います。

Discussion