JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptにおけるデフォルトエクスポートと名前付きエクスポートの違い

JavaScriptのモジュールシステムでは、デフォルトエクスポート（default export）と名前付きエクスポート（named export）という2種類のエクスポート方法があります。

デフォルトエクスポートは1つのファイルにつき1つしか定義できず、別のファイルへインポートする際には任意の名前を付けて受け取ることができます。一方、名前付きエクスポートは1つのファイル内に複数定義することが可能で、インポートする際にはエクスポート時に使用した名前をそのまま指定する必要があります。

両者の主な違い

  • デフォルトエクスポート： ファイルごとに1つのみ定義可能。インポート時の名前は自由に決められる。
  • 名前付きエクスポート： ファイル内に複数定義可能。インポート時はエクスポート時と同じ名前を波括弧 { } で囲んで指定する。

以下は、JavaScriptにおけるデフォルトエクスポートと名前付きエクスポートの違いを示すサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Default export vs Named Export</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above export function as named and default export</h3>
<script src="script.js" type="module">
</script>
</body>
</html>

sample.js

このファイルでは、testImport関数をデフォルトエクスポートとして、tellTime関数を名前付きエクスポートとして定義しています。

export default function testImport(){
    return 'Module testImport has been imported'+'';
}
export function tellTime(){
    return new Date();
}

script.js

デフォルトエクスポートはdefaultExportという好きな名前でインポートできる一方、名前付きエクスポートのtellTimeは波括弧 { } を使って元の名前のままインポートしている点に注目してください。

import defaultExport from "./sample.js";
import {tellTime} from "./sample.js";
let resultEle = document.querySelector('.result');
document.querySelector('.Btn').addEventListener('click',()=>{
    resultEle.innerHTML+=defaultExport();
    resultEle.innerHTML+=tellTime();
})

実行結果

上記のコードを実行すると、以下のような出力が得られます。

JavaScriptにおけるデフォルトエクスポートと名前付きエクスポートの違い

「CLICK HERE」ボタンをクリックすると、デフォルトエクスポートでインポートした関数と名前付きエクスポートでインポートした関数の両方が実行され、結果が表示されます。

JavaScriptにおけるデフォルトエクスポートと名前付きエクスポートの違い

  1. JavaScriptの名前付き関数式とは？実装方法と動作をわかりやすく解説

    名前付き関数式（Named Function Expression）とはJavaScriptでは、関数式に対して名前を付けることができます。これを「名前付き関数式」と呼びます。通常の無名関数式と異なり、付けた名前はその関数の内部でのみ参照可能という特徴があります。この仕組みを活用すると、以下のようなメリットがあります。関数内部から自分自身を呼び出す再帰処理が書きやすくなるデバッグ時のスタックトレースに関数名が表示され、エラー箇所の特定が容易になるサンプルコード以下は、オブジェクトのプロパティとして名前付き関数式「factorial」を定義し、階乗を計算する例です。<!DOCTYPE ht

  2. 【初心者向け】JavaScriptでインポートとエクスポートの名前を変更する方法

    JavaScriptにおけるインポートとエクスポートの名前変更とはJavaScriptのESモジュールでは、asキーワードを使うことで、エクスポートやインポートの際に関数や変数に別名を付けることができます。モジュール側の元の名前はそのまま維持しながら、利用する側では分かりやすい名前で扱えるため、コードの可読性と保守性が向上します。注意：このサンプルを実行するには、ローカルホストサーバー環境が必要です。HTMLファイルを直接ブラウザで開くと、CORSポリシーの制限によりモジュールの読み込みが失敗する場合があるためご注意ください。コード例index.html<!DOCTYPE html>