JavaScriptのexportについて

JavaScriptのexportは、他のファイルやモジュールでコードを再利用できるようにするために、関数や変数、クラスを外部に公開する仕組みです。exportを使うことで、モジュール間の依存関係を作りながら、コードを分割して管理しやすくすることができます。

exportには主に以下の2種類の方法があります。

1. Named Export (名前付きエクスポート)

名前付きエクスポートでは、複数の関数、変数、クラスを一つのファイルからエクスポートできます。名前を指定してエクスポートするため、インポート時にはその名前を使って指定する必要があります。

使用方法
宣言と同時にエクスポート：

export const greeting = "Hello, World!";

export function sayHello(name) {
  return `Hello, ${name}!`;
}

export class Greeter {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}

まとめてエクスポート：最後にまとめてエクスポートする方法もあります。

const greeting = "Hello, World!";

function sayHello(name) {
  return `Hello, ${name}!`;
}

class Greeter {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}

export { greeting, sayHello, Greeter };

インポート方法
名前付きエクスポートをインポートする際は、エクスポートした名前と同じ名前を使います。また、複数のエクスポートをまとめてインポートすることも可能です。

import { greeting, sayHello, Greeter } from './moduleName';

エイリアスを使ったインポート
名前を変えてインポートする場合は、as キーワードを使います。

import { sayHello as helloFunction } from './moduleName';

2. Default Export (デフォルトエクスポート)

デフォルトエクスポートでは、1つのファイルにつき1つだけエクスポートが可能です。インポートする側は、名前を自由に決めてインポートできます。

使用方法
デフォルトエクスポートは export default を使って行います。例えば、以下のように1つの関数をデフォルトエクスポートすることができます。

// モジュールファイル moduleName.js
export default function sayHello(name) {
  return `Hello, ${name}!`;
}

インポート方法
デフォルトエクスポートをインポートする際は、名前を自由に決めることができます。

import sayHello from './moduleName';
sayHello('Alice'); // "Hello, Alice!"

また、デフォルトエクスポートと名前付きエクスポートを組み合わせることも可能です。

// moduleName.js
export const greeting = "Hello, World!";
export default function sayHello(name) {
  return `Hello, ${name}!`;
}

// 他のファイルでのインポート
import sayHello, { greeting } from './moduleName';

まとめ

特徴 Named Export Default Export
複数エクスポート 可能 不可（一つだけ）
インポート名 エクスポート時の名前が必要 インポート名は自由に指定可能
用途 複数の機能をエクスポートする メイン機能を1つエクスポートする
どちらのエクスポートも、モジュールごとに機能を分割して管理しやすくするために便利な方法です。

最後までよんでいただきありがとうございます。
@y-t0910をフォロー,いいねしていただけると嬉しいです！