[JavaScript] export default / import について知ろう

2023年4月14日2023年11月24日

JavaScriptのモジュールシステムでは、モジュール内で定義された関数や変数を他のファイルでも使用できるようにするために、エクスポートする必要があります。その中で、export defaultは、特に便利な機能の1つです。

export defaultの基本的な使い方

例えば、以下のようなモジュールがあったとします。

// myModule.js

function myFunction() {
  // 関数の内容
}

const myVariable = 123;

export { myFunction, myVariable };

このモジュールから、myFunction関数をエクスポートする場合、以下のようにexport文を使います。

// myFunction.js

import { myFunction } from './myModule.js';

myFunction();

一方、同じモジュールからexport defaultを使ってmyFunction関数をエクスポートする場合、以下のように記述します。

// myModule.js

export default function myFunction() {
  // 関数の内容
}

このようにすることで、myFunction関数をエクスポートするために、import文を少し簡略化できます。

// myFunction.js

import myFunction from './myModule.js';

myFunction();

また、export defaultは、オブジェクトをエクスポートする場合にも使うことができます。例えば、以下のようなモジュールがあったとします。

// myModule.js

function myFunction1() {
  // 関数の内容
}

function myFunction2() {
  // 関数の内容
}

export { myFunction1, myFunction2 };

このモジュールから、myFunction1とmyFunction2の両方をエクスポートする場合、以下のように記述します。

// myFunction.js

import { myFunction1, myFunction2 } from './myModule.js';

myFunction1();
myFunction2();

一方、同じモジュールからexport defaultを使ってオブジェクトをエクスポートする場合、以下のように記述します。

// myModule.js

export default {
  myFunction1: function() {
    // 関数の内容
  },
  myFunction2: function() {
    // 関数の内容
  }
}

このようにすることで、myFunction1とmyFunction2を1つのオブジェクトとしてエクスポートすることができます。また、import文も少し簡略化できます。

// myFunction.js

import myModule from './myModule.js';

myModule.myFunction1();
myModule.myFunction2();

以上が、export defaultの基本的な使い方についての解説です。適切に使い分けることで、モジュールの使いやすさと保守性を向上めることができます。ただし、export defaultを多用すると、コードの可読性が低下する可能性があるため、適切な使い分けが必要です。

export / import については別の記事にまとめました。よかったら見てください。