理解しているつもりでしたが、いざ質問されるとスラスラと回答出来ませんでした。これはうろ覚えというやつです。
二度とこういうことが無いように、今まとめておいて「この記事見て」で説明終わりにしようと思います。
デフォルト export
export default という記述が、モジュールファイルに1回だけ記述出来る。
サンプルコード1 - 関数編
helloWorld.js
export default function HelloWorld() {
return 'Hello World!';
}
index.js
// helloWorld.js に記述されているメソッド名は HelloWorld() だが、好きな名前を付けられる。
import TekitouFunctionName from "./helloWorld.js";
console.log(TekitouFunctionName);
// コンソール出力
// Hello World!
サンプルコード2 - 定数編
HelloWorld.js
export default const helloWorld = 'Hello World!';
index.js
// 好きな名前を付けられる
import TekitouConstName from "./helloWorld.js";
console.log(TekitouConstName);
// コンソール出力
// Hello World!
エラーの example
ちなみに複数あるとエラーが発生します。
export default function HelloWorld() {
return 'Hello World!';
}
// 2つ目の export default のためエラー！！！！！！
export default function OhayouWorld() {
return 'Ohayou World!';
}
デフォルト export の利点
- import の際に好きな名前を付けられる。名前付き export は出来ません。
- 該当モジュール内で一番重要な export を明確にできる。まさか一番重要という訳ではない export に default は付けませんよね？
名前付き export
名前付き export は複数指定可能です
モジュール名の関数名、定数名などをそのまま指定する必要があります。
サンプルコード
helloWorld.js
export function HelloWorld() {
return 'Hello World!';
}
export function OhayouWorld() {
return 'Ohayou World!';
}
export const OyasumiWorld = 'Oyasumi World!';
index.js
// 指定されたメソッド名、定数を記述する。
import {
HellowWorld,
OhayouWorld,
OyasumiWorld
} from "./helloWorld.js";
console.log(HellowWorld);
// コンソール出力
// Hello World!
console.log(OhayouWorld);
// コンソール出力
// Ohayou World!
console.log(OyasumiWorld);
// コンソール出力
// Oyasumi World!
名前付き export のエイリアス
名前付き exportはインポートの際にエイリアスを付与することが可能です。
これがあるとデフォルト export の利点がないのでは？
import {
HellowWorld as ohiru,
OhayouWorld as asa,
OyasumiWorld as yoru
} from "./helloWorld.js"
名前付き export を一括 import
該当するモジュール内の名前付き export を一括で import します。
これがあるとデフォルト export の（略
import * as helloWorld from "./helloWorld.js"
名前付き export の利点
- 上で書いてきた通り、細かい import の指定が可能
デフォルト export と名前付き export は混在できる
デフォルト export の利点に「一番重要な export を明確に出来る」とは書きましたが、フロントエンド弱者な僕は混在させる利点が全く分かっていません。なんでだろ。
HelloWorld.js
// デフォルト export
export default function HelloWorld() {
return 'Hello World!';
}
// 名前付き export
export function OhayouWorld() {
return 'Ohayou World!';
}
index.js
// デフォルト export を import。好きな名前付けられる。
import TekitouFunctionName from "./helloWorld.js";
// 名前付き export を import。名前は指定される。
import {
OhayouWorld
} from "./helloWorld.js";
console.log(TekitouFunctionName);
// コンソール出力
// Hello World!
console.log(OhayouWorld);
// コンソール出力
// Ohayou World!
まとめ
僕も 「JavaScript 何も分からん」 状態のとき、「 import する際の中括弧有り無しは何が違うんだよ！？」と憤った記憶があるので何となく懐かしい気持ちになりました。