Zenn
🟨

importとrequireにおけるデフォルトエクスポートの違い

に公開
JavaScript
tech

デフォルトエクスポートは、モジュールから1つだけ値をエクスポートする仕組みです。importとrequireでは、デフォルトエクスポートの扱い方に違いがあります。

importの場合

importでは、デフォルトエクスポートされた値は、モジュール名の省略記号で直接参照できます。

// モジュールA.js
export default function add(x, y) {
  return x + y;
}

// モジュールB.js
import add from "./A";

const result = add(1, 2);

console.log(result); // 3

上記のコード例では、モジュールAからデフォルトエクスポートされた add 関数は、モジュールBで add という名前で直接参照できます。

requireの場合

requireでは、デフォルトエクスポートされた値は、exports オブジェクトのプロパティとして参照できます。

// モジュールA.js
exports.add = function(x, y) {
  return x + y;
};

// モジュールB.js
const A = require("./A");

const result = A.add(1, 2);

console.log(result); // 3

上記のコード例では、モジュールAからデフォルトエクスポートされた add 関数は、モジュールBで A.add という名前で参照できます。

まとめ

importとrequireにおけるデフォルトエクスポートの主な違いは以下の通りです。

項目 import require
参照方法 モジュール名の省略記号 exports オブジェクトのプロパティ
構文 シンプル やや冗長

デフォルトエクスポートを使用する際の注意点

  • デフォルトエクスポートはモジュールごとに1つしか使用できない
  • 名前付きエクスポートと混在して使用できる

関連記事

import と require の違い

https://zenn.dev/btc/articles/240403_js_import_require

Discussion