[JavaScript]名前付きexportとデフォルトexportの違い

内容

JavaScriptのモジュールエクスポートについて、名前付きexportとデフォルトexportの違い・使い分けがどっちだっけ？となることがあるためまとめます。

目次

• 名前付きexport
• デフォルトexport

名前付きexport・デフォルトexportの違いまとめ

	名前付きexport	デフォルトexport
書き方	export const 変数名 export const 関数名	export default function App() {}
エクスポート数	制限なし	モジュールごとに１つ
インポートの{}	{}が必要	{}が不要
インポートする名前	エクスポートする名前と合わせる エイリアスを設定	任意の名前

名前付き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

• デフォルトエクスポートは、モジュールごとに１つだけエクスポートできる

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!