Zenn
😶‍🌫️

JavaScriptのエクスポートについて

2024/08/17に公開
JavaScript
TypeScript
tech

ちょいちょい忘れるのでまとめます！

エクスポート形式の比較

1. export function (関数宣言)

  • 形式: 関数宣言をそのままエクスポートする。
  • 特徴:
    • ホイスティングが効くため、宣言前に呼び出すことが可能。
    • デフォルトエクスポートは不可。
// utils/math.js

export function add(a, b) {
  return a + b;
}
  • 使用シーン: シンプルな関数で、ホイスティングが必要な場合に適している。

2. export const 変数名 = function (関数式)Named export (import)

  • 形式: 変数に関数を代入してエクスポートする。
  • 特徴:
    • 関数式であるため、ホイスティングされない。関数が定義される前に呼び出せない。
    • 関数を匿名関数やラムダ式としてエクスポート可能。
// utils/math.js

export const add = function (a, b) {
  return a + b;
};

// または、アロー関数を使う場合
export const addArrow = (a, b) => a + b;
  • 使用シーン: ホイスティングが不要で、アロー関数を使用したい場合や、複数の関数をエクスポートしたい場合に適している。

3. export default function (デフォルトエクスポート)default export(import)

  • 形式: 関数をデフォルトでエクスポートする。
  • 特徴:
    • モジュールにつき1つだけのデフォルトエクスポート。
    • インポート時に任意の名前で取り込める。
// utils/math.js

export default function add(a, b) {
  return a + b;
}
  • 使用シーン: モジュール内の主たる関数やコンポーネントをエクスポートする場合に適している。

使い分けの基準

1. ホイスティングが必要かどうか

  • 必要な場合: export functionを使って関数宣言をエクスポートする。これにより、関数の呼び出しが定義前でも可能になる。

2. 複数の関数をエクスポートするか

  • 複数の関数をエクスポートする場合: export constを使って関数式をエクスポートする。これにより、関数を変数として扱えるため、柔軟な構成が可能。

3. 関数のスタイル

  • アロー関数や関数式を使いたい場合: export constを使って関数式をエクスポートする。アロー関数を使うことで、短い構文やthisのスコープを簡潔に管理できる。

4. モジュールの主たる機能としてエクスポートするか

  • 主たる機能としてエクスポートする場合: export defaultを使う。これにより、インポート時に任意の名前で取り込むことができ、モジュールの意図を明確にできる。

具体例

シナリオ: 数学関数のユーティリティ

例えば、いくつかの数学的操作を提供するモジュールを考えてみる。この場合、複数の関数をエクスポートする必要があるため、export constを使った方法が適している。

// utils/math.js

// 名前付きエクスポート
export const add = (a, b) => a + b;

export const subtract = (a, b) => a - b;

export const multiply = (a, b) => a * b;

export const divide = (a, b) => {
  if (b === 0) {
    throw new Error("Division by zero");
  }
  return a / b;
};

// デフォルトエクスポート
export default function square(a) {
  return a * a;
}

インポートの例

これらの関数を別のファイルで使用するには、次のようにインポートする。

// app.js

import square, { add, subtract, multiply, divide } from './utils/math';

console.log(add(2, 3)); // 5
console.log(square(4)); // 16

まとめ

  • export default function: モジュールの主たる機能として1つの関数をデフォルトエクスポート。
  • export function: 関数宣言を名前付きでエクスポート。ホイスティングが必要な場合に便利。
  • export const 変数名 = function: 関数式を名前付きでエクスポート。アロー関数や複数のエクスポートが必要な場合に適している。

状況によりけりだが、import時に名前を変更できる利点がない限りNamed export(import)を使うほうが不要な認識のズレを無くせると思う

関数宣言でのexportはホイスティングを理解していれば良いが、不要なバグを生む恐れがあるため、注意が必要である。

Discussion