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

JavaScriptのexportを徹底解説するイメージJS
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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;
}

●注意点と対処法

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

●カスタマイズ方法

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

まとめ

この記事では、JavaScriptのexportを使った方法を初心者目線で詳しく解説しました。

サンプルコードを通じて、基本的な使い方や応用例を学び、注意点やカスタマイズ方法についても理解しました。

これで、あなたもJavaScriptでモジュールを効果的に管理することができるようになります。