JavaScript エクスポート

概要: このチュートリアルでは、JavaScript の `export` キーワードを使用して、モジュールから値をエクスポートする方法を学びます。

JavaScript の export キーワード入門

ES6 モジュールを使用すると、JavaScript コードをモジュール形式で構造化できます。モジュールは、JavaScript アプリケーション内で再利用可能なコードを定義およびインポート/エクスポートするための標準化された方法を提供します。

デフォルトでは、ES6 モジュールはコードをカプセル化します。つまり、モジュール内で定義された値（変数、関数、クラスなど）は、デフォルトではモジュールの外部からアクセスできません。これにより、名前の競合が防止され、より優れたコード構造が促進されます。

モジュールは、`export` キーワードを使用して値（変数、関数、クラスなど）をエクスポートできます。

`export` キーワードは、モジュールから値をエクスポートして、他のモジュールで使用できるようにします。エクスポートには2つのタイプがあります。

• 名前付きエクスポート
• デフォルトエクスポート

モジュールには複数の名前付きエクスポートを含めることができますが、デフォルトエクスポートは1つのみです。

名前付きエクスポート

モジュールには複数の名前付きエクスポートを含めることができます。実際には、モジュールから複数の値をエクスポートする必要がある場合に、名前付きエクスポートを使用します。

変数のエクスポート

次の例は、変数 `count` をモジュールからエクスポートする方法を示しています。

let count = 1;
export { count };Code language: JavaScript (javascript)

この例では

• 最初に、変数 `count` を宣言し、その値を `100` に初期化します。
• 次に、`export` キーワードの後に続く中括弧内に配置することで、`count` 変数をエクスポートします。

次のように、変数の宣言とエクスポートを1つのステートメントに組み合わせることができます。

export let count = 1;Code language: JavaScript (javascript)

同様に、`const` キーワードを使用して宣言された変数をエクスポートできます。

export const MIN = 0;Code language: JavaScript (javascript)

複数の変数をエクスポートするには、カンマ（`,`）で区切ります。

let count = 1;
const MIN = 0, MAX = 10;

export { MIN, MAX, count };Code language: JavaScript (javascript)

関数のエクスポート

関数のエクスポートは、変数のエクスポートと同じ構文を共有します。

function increase() {
  // ..
}
export { increase };Code language: JavaScript (javascript)

そして

export function increase() {
  // ...
}Code language: JavaScript (javascript)

クラスのエクスポート

変数や関数のように、`export` キーワードを使用してクラスをエクスポートできます。たとえば

class Counter {
  constructor() {
    this.count = 1;
  }
  increase() {
    this.count++;
  }
  get current() {
    return this.count;
  }
}

export { Counter };Code language: JavaScript (javascript)

この例では、`Counter` クラスを定義してエクスポートします。次のように、1つのステートメントを使用してクラスを定義してエクスポートできます。

export class Counter {
  constructor() {
    this.count = 1;
  }
  increase() {
    this.count++;
  }
  get current() {
    return this.count;
  }
}Code language: JavaScript (javascript)

名前付きエクスポートをインポートする場合、正確な名前を使用し、中括弧内に指定する必要があります。たとえば、次のコードは `Counter` クラスをインポートします。

import { Counter } from 'module.js';Code language: JavaScript (javascript)

デフォルトエクスポート

モジュールには、1つのデフォルトエクスポートを含めることができます。デフォルトエクスポートを使用して値をエクスポートするには、`default export` キーワードを使用します。例:

let message = 'Hi';
export { default as message };Code language: JavaScript (javascript)

次のコードと同じです。

export default let message = 'Hi';Code language: JavaScript (javascript)

デフォルトエクスポートをインポートする場合、変数を中括弧で囲む必要はありません。

import message from 'module.js';Code language: JavaScript (javascript)

メッセージが名前付きエクスポートを使用してエクスポートされた場合、中括弧で囲むことに注意してください。

import { message} from 'module.js';Code language: JavaScript (javascript)

これが、名前付きエクスポートとデフォルトエクスポートをインポートする際の主な違いです。

同様に、デフォルトエクスポートを使用してモジュールから関数またはクラスをエクスポートできます。

export default function increase() {
   // ..
}Code language: JavaScript (javascript)

そして

export default class Counter {
   // ...
}Code language: JavaScript (javascript)

名前付きエクスポートの名前変更

名前付きエクスポートを使用して値をエクスポートするときに、次のように名前を変更できます。

class Counter {
  // ..
}

export { Counter as MyCounter };Code language: JavaScript (javascript)

エクスポート時に値を名前変更すると、名前の競合を回避するのに役立ちます。クラスをインポートするモジュールも、インポート時に名前を変更できることに注意してください。

import { Counter as MyCounter } from 'module.js';Code language: JavaScript (javascript)

再エクスポート

モジュールは、別のモジュールから値をインポートし、次のようにすぐにエクスポートできます。

import { Counter } from 'module.js';
export { Counter };Code language: JavaScript (javascript)

JavaScript では、`export from` 構文を使用してこれを短縮できます。

export { Counter } from 'module.js';Code language: JavaScript (javascript)

概要

• JavaScript の `export` キーワードを使用して、モジュールから変数、関数、およびクラスをエクスポートします。
• エクスポートは、名前付きエクスポートとデフォルトエクスポートにすることができます。モジュールには複数の名前付きエクスポートを含めることができますが、デフォルトエクスポートは1つのみです。