JavaScriptのexportを徹底解説！7つの使い方とサンプルコード

はじめに
●JavaScriptのexportとは
- ○exportの基本
●exportの使い方
●応用例とサンプルコード
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのexportを使いこなすことができるようになります。

exportを用いた様々な使い方や応用例、注意点やカスタマイズ方法をサンプルコード付きでわかりやすく説明していきます。

初心者の方でも理解できるように、徹底解説していきますので、ぜひ最後までお読みください。

●JavaScriptのexportとは

○exportの基本

JavaScriptのexportは、あるモジュールから別のモジュールに機能やデータを共有するために使用されます。

exportを使うことで、モジュール間でコードの再利用が可能になり、保守性や可読性が向上します。

●exportの使い方

exportにはいくつかの使い方があります。

ここでは、代表的な4つの使い方をサンプルコード付きで紹介します。

○サンプルコード1：関数のエクスポート

関数をエクスポートする方法です。

この例では、add関数をエクスポートしています。

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

○サンプルコード2：オブジェクトのエクスポート

オブジェクトをエクスポートする方法を紹介します。

この例では、personオブジェクトをエクスポートしています。

// moduleB.js
export const person = {
  name: 'Taro',
  age: 25,
};

○サンプルコード3：名前付きエクスポート

名前付きエクスポートを使って、複数の値をエクスポートする方法を紹介します。

この例では、add関数とpersonオブジェクトをエクスポートしています。

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

export const person = {
  name: 'Taro',
  age: 25,
};

○サンプルコード4：デフォルトエクスポート

デフォルトエクスポートを使って、モジュールから一つの値をエクスポートする方法を紹介します。

この例では、greet関数をデフォルトエクスポートしています。

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

●応用例とサンプルコード

ここでは、exportを応用した3つの例をサンプルコード付きで紹介します。

○サンプルコード5：exportとimportを組み合わせたモジュール管理

exportとimportを組み合わせて、モジュール間で機能やデータを共有する方法を紹介します。

この例では、moduleC.jsからadd関数とpersonオブジェクトをインポートして利用しています。

// main.js
import { add, person } from './moduleC.js';

console.log(add(1, 2)); // 3
console.log(person.name); // Taro

○サンプルコード6：非同期ロードとexport

非同期ロードを利用して、モジュールを動的に読み込む方法を紹介します。

この例では、ボタンがクリックされた際にmoduleD.jsを読み込み、greet関数を実行しています。

<button id="loadBtn">Load Module</button>
<script>
  document.getElementById('loadBtn').addEventListener('click', async () => {
    const moduleD = await import('./moduleD.js');
    console.log(moduleD.default('Taro'));
  });
</script>

○サンプルコード7：exportを利用したライブラリ作成

exportを利用して独自のライブラリを作成する方法を紹介します。

この例では、簡単な数学ライブラリを作成し、その機能をエクスポートしています。

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

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

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  return a / b;
}

●注意点と対処法

exportされた変数や関数は、変更不可（読み取り専用）であることを覚えておいてください。
もし変更しようとすると、エラーが発生します。
名前付きエクスポートとデフォルトエクスポートを混在させることができますが、可読性や保守性の観点から、一つのモジュールにつき、どちらか一方の方法を選ぶことをおすすめします。

●カスタマイズ方法

エクスポートする関数や変数の名前を変更することができます。
名前付きエクスポートの場合は、export { 変数名 as 新しい名前 }のように記述します。
インポート時にも同様に、import { 変数名 as 新しい名前 } from 'モジュール名'のように記述することで、インポートする変数や関数の名前を変更できます。