JavaScript アドバンス

JS モジュール名前空間

1. モジュール名前空間オブジェクト

以下の構文を使用すると：

import * as name from "module";

JavaScriptはモジュール名前空間オブジェクト（Module Namespace Object）を作成します。 これは、そのモジュールからエクスポートされたすべてのバインディングを含むイミュータブル（不変）なオブジェクトです。

1.1 実装例

math_module.js の名前空間オブジェクトは、すべてのエクスポート（PI、add、multiply）をバンドルします。

math_module.js

// math_module.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

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

math_module.js を名前空間オブジェクトとしてインポートします：

import * as math from "./math_module.js";

// math名前空間オブジェクトを使用可能：
let myPi = math.PI;
let result1 = math.add(2, 3);
let result2 = math.multiply(2, 3);

2. モジュール名前空間のサポート

モジュール名前空間のサポートとは、モジュールからのすべてのエクスポートを単一の名前空間オブジェクトにインポートできるメカニズムを指します。

この機能は、一貫した方法でモジュールを整理・アクセスしやすくするために、ECMAScript 2015 (ES6) で導入された ES Modules の一部です。

3. モジュール名前空間の機能

機能説明
名前空間 (Namespace)モジュールからのすべてのエクスポートを含む特別なオブジェクト
構文 (Syntax)import * as name from module
目的 (Purpose)モジュールのエクスポートを安全に整理、アクセス、参照するため
読み取り専用 (Read Only)エクスポートにアクセスはできるが、再代入は不可（イミュータブル）
ライブバインディング (Live Binding)モジュール内でエクスポートされた値が変更されると、名前空間にも自動で反映される
列挙可能 (Enumerable)プロパティは列挙可能で、名前付きエクスポートに対応する
プロトタイプ (Prototype)名前空間はプロトタイプを持たないプレーンなオブジェクト (Object.getPrototypeOf(math) === null)

4. 関連する構文

モジュールのインポートには、用途に応じて以下のバリエーションがあります：

// 特定の要素のみをインポート
import { add } from "./math_module.js";

// デフォルトエクスポートをインポート
import math from "./math_module.js";

// すべてを名前空間オブジェクトとしてインポート
import * as math from "./math_module.js";

5. モジュール名前空間のエクスポート

モジュール名前空間のエクスポートとは、別のモジュールからインポートしたモジュールの名前空間オブジェクト全体を、そのままエクスポートすることを指します。

6. 名前空間のエクスポート

通常、モジュールのエクスポートを名前空間オブジェクトにインポートするには次のように記述します。

import * as math from "./math_module.js";

let myPi = math.PI;
let result = math.add(2, 3);

math_module.js (再掲)

export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export function multiply(a, b) {
  return a * b;
}

モジュール名前空間エクスポートを使用すると、まずインポートすることなく、その名前空間全体を自分のモジュールから再エクスポート（Re-export）できます。

新しく作成したモジュールで、この名前空間全体を再エクスポートする例：

utilities.js

export * from "./math_module.js";

その後、別のファイルで利用します：

import * as math from "./utilities.js";

       Note:export * as name from "module" という構文は、ECMAScript 2020 で追加されました。

7. 構文のオーバービュー

構文結果
export * from "module"すべての名前付きエクスポートを（名前空間としてではなく）個別に再エクスポートする
export * as name from "module"すべてのエクスポートを単一の名前空間の下にグループ化して再エクスポートする
export { name } from "module"特定のエクスポートのみを再エクスポートする

8. アグリゲータースクリプト (Aggregator Scripts)

アグリゲータースクリプト（Aggregator Scripts）とは、他のモジュールからのアイテムをインポートし、再エクスポートするためだけに専門で使用されるスクリプトのことです。

トップレベルのモジュールを大量の import 文で埋め尽くす代わりに、単一のアグリゲータースクリプトを使用することで、コードの可読性と管理効率を大幅に向上させることができます。