exportを使ったモジュールのエクスポートとその活用方法をわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

exportの概要

モジュールのエクスポート JavaScript予約語

export

概要 exportは、JavaScriptモジュールシステム（ES Modules）で、モジュール内の関数、オブジェクト、クラスなどを他のモジュールにエクスポート（公開）するために使用されます。

わかりやすく説明 exportは「この部分は外部で使えるようにする」と指定する仕組みです。
  • モジュール単位でコードを分割して、再利用性を向上させます。
  • 名前付きエクスポートとデフォルトエクスポートの2種類があります。
  • 他のモジュールからインポートすることで、効率的なコード管理が可能になります。

exportの基本的な使い方

以下は、exportを使用した基本的な例です。

// mathUtils.js
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// main.js
import { add, subtract } from './mathUtils.js';

console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
  • exportで公開した関数や変数を、importで他のモジュールから使用できます。
  • 名前付きエクスポートでは、モジュール内で複数のエクスポートを行えます。

デフォルトエクスポート

モジュール全体の主要なエクスポートに対して、export defaultを使用します。

// greet.js
export default function greet(name) {
    return `Hello, ${name}!`;
}

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Hello, Alice!
  • export defaultは1つのモジュールにつき1回のみ使用できます。
  • デフォルトエクスポートは任意の名前でインポート可能です。

再エクスポート

他のモジュールからエクスポートされた内容を再エクスポートすることができます。

// shapes.js
export * from './circle.js'; // circle.jsのすべてを再エクスポート
export { squareArea } from './square.js'; // 特定のエクスポートのみ再エクスポート
  • export *を使用して、他のモジュールのすべてを再エクスポートします。
  • 特定のエクスポートを選んで再エクスポートすることも可能です。

注意点

  • ファイル拡張子: モジュールをインポートするときは、.jsや.mjsなどの拡張子を明示する必要があります。
  • デフォルトエクスポートの混乱: 複数のデフォルトエクスポートは許可されていません。
  • 再エクスポートの管理: 再エクスポートが多くなると、依存関係が複雑になる可能性があります。

よくある質問

Q: exportとexport defaultの違いは何ですか？
A: exportは名前付きエクスポートで複数可能です。一方、export defaultはモジュールにつき1つだけで、任意の名前でインポート可能です。
Q: 再エクスポートはどのような場面で役立ちますか？
A: 複数のモジュールを1つのエントリーポイントにまとめたい場合に便利です。
Q: exportを使用しないとどうなりますか？
A: モジュール内で定義した変数や関数は他のモジュールからアクセスできなくなります。

まとめ

exportは、JavaScriptでモジュールをエクスポートし、再利用可能なコードを作成するための基本的な仕組みです。

  • 名前付きエクスポートとデフォルトエクスポートを適切に使い分けましょう。
  • モジュールを分割することで、コードの保守性が向上します。
  • 再エクスポートを活用して、モジュールの依存関係を整理することが可能です。
スポンサーリンク