内容
JavaScriptのモジュールエクスポートについて、名前付きexportとデフォルトexportの違い・使い分けがどっちだっけ?となることがあるためまとめます。
目次
名前付きexport・デフォルトexportの違いまとめ
名前付きexport | デフォルトexport | |
---|---|---|
書き方 | export const 変数名 export const 関数名 |
export default function App() {} |
エクスポート数 | 制限なし | モジュールごとに1つ |
インポートの{} | {}が必要 | {}が不要 |
インポートする名前 | エクスポートする名前と合わせる エイリアスを設定 |
任意の名前 |
名前付きexport
名前を付けて作成した変数や関数をエクスポート
namedExport.js
const sampleVar = 'Variable'
const sampleFunc = () => console.log('Function')
// 作成した変数や関数をexport
export {sampleVar, sampleFunc}
// 変数や関数の宣言と同時にエクスポートすることも可能
export const sampleVar = 'Variable'
export const sampleFunc = () => console.log('Function')
namedExport.js
からエクスポートされた変数や関数をインポートする
namedImport.js
import { sampleVar, sampleFunc } from "./namedExport.js"
console.log(sampleVar) // Variable
console.log(sampleFunc) // sampleFunc() {}
console.log(sampleFunc()) // Function
名前付きexportとimportのエイリアス
as
を使うことで、エイリアスを使用することが可能
namedImport.js
import {
sampleVar as myVar,
sampleFunc as myFunc
} from "./namedExport.js"
名前付きエクスポートをオブジェクトとしてまとめてインポートすることも可能
namedImport.js
import * as myModule from "./namedExport.js"
// 呼び出し
console.log(myModule.sampleVar) // Variable
console.log(myModule.sampleFunc) // sampleFunc() {}
console.log(myModule.sampleFunc()) // Function
デフォルトexport
- デフォルトエクスポートは、モジュールごとに1つだけエクスポートできる
defaultExport.js
export default function App() {
console.log('Hello!')
}
- デフォルトインポートの場合、
{}
は不要 - 名前付きエクスポートの場合、指定したモジュールから同じ変数名や関数名でインポートが必要だが、デフォルトエクスポートは任意の名前を付けられる
defaultImport.js
// Appは任意の名前でOK
import App from "./namedExport.js"
console.log(App) // App() {}
console.log(App()) // Hello!