JavaScript/モジュール

JavaScriptのモジュールとは、コードを再利用可能な単位に分割し、それらを管理・活用する仕組みのことです。モジュールを使うことで、コードの可読性、保守性、再利用性が向上します。本記事では、JavaScriptのモジュールに関する基本的な概念と使用方法について解説します。

モジュールの必要性

モジュールがないと、プロジェクトが大きくなるにつれて以下のような問題が発生します：

• グローバル名前空間の汚染：異なるスクリプト間で変数や関数が上書きされる可能性が高まります。
• 依存関係の管理が困難：複数のスクリプト間で依存関係を追跡するのが難しくなります。
• 再利用性の欠如：コードを分割しない場合、他のプロジェクトで再利用するのが難しくなります。

モジュールを使用することで、これらの問題を解決し、効率的なコード管理が可能になります。

JavaScript のモジュールシステム

1. ES Modules (ECMAScript Modules)

ES Modules（ESM）は、JavaScriptに標準的に導入されたモジュールシステムです。importとexportキーワードを使用してモジュール間でコードを共有します。

詳細は「JavaScript/ECMAScript Module」を参照

特徴

• ブラウザとNode.jsでサポート：ESMはモダンブラウザおよびNode.js環境で利用可能です。
• 静的解析：importとexportを静的に解析するため、ツールチェーンや最適化がしやすい。

基本的な使用例

math.js

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

export const PI = 3.14159;

main.js

import { add, PI } from './math.js';

console.log(add(2, 3)); // 5
console.log(PI);        // 3.14159

デフォルトエクスポート

1つのモジュールにつき、1つだけデフォルトエクスポートを指定できます。

greet.js

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

main.js

import greet from './greet.js';

console.log(greet('Alice')); // Hello, Alice!

2. CommonJS (CJS)

CommonJSはNode.jsで採用されたモジュールシステムです。requireとmodule.exportsを使用します。

詳細は「JavaScript/CommonJS」を参照

特徴

• Node.jsでの利用：Node.jsの標準モジュール形式。
• 動的ロード：モジュールのインポートが実行時に行われます。

基本的な使用例

math.js

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

const PI = 3.14159;

module.exports = { add, PI };

main.js

const { add, PI } = require('./math');

console.log(add(2, 3)); // 5
console.log(PI);        // 3.14159

3. AMD (Asynchronous Module Definition)

AMDはブラウザ環境で非同期にモジュールをロードするための形式です。主にRequireJSで使用されます。

詳細は「JavaScript/Asynchronous Module Definition」を参照

使用例

define(['math'], function(math) {
    console.log(math.add(2, 3)); // 5
});

4. UMD (Universal Module Definition)

UMDは、ブラウザおよびNode.jsの両方で動作するように設計された形式です。

詳細は「JavaScript/Universal Module Definition」を参照

使用例

(function(root, factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = factory();
    } else {
        root.myLibrary = factory();
    }
}(this, function() {
    return {
        greet: function(name) {
            return `Hello, ${name}!`;
        }
    };
}));

モジュールのロード方法

ブラウザでのES Modules

HTMLファイルでtype="module"を指定します。

<script type="module" src="main.js"></script>

Node.jsでのES Modules

ファイル拡張子を.mjsにするか、package.jsonに"type": "module"を指定します。

package.json

{
  "type": "module"
}

---

結論

JavaScriptのモジュールは、プロジェクトのスケーラビリティと保守性を向上させるために不可欠なツールです。現在の主流はES Modulesですが、プロジェクトの要件に応じて適切なモジュール形式を選択することが重要です。