JavaScript モジュールは、コードの整理、再利用性の強化、アプリケーションの保守性の向上において重要な役割を果たします。広く使用されている 2 つの主要なモジュール システムは、CommonJS (CJS) と ECMAScript Modules (ESM) です。それらの違いと機能を理解することは、プロジェクトでそれらを効果的に活用するための鍵となります。

共通JS (CJS)

CommonJS は、もともと Node.js 環境用に設計されたモジュール システムです。シンプルさとモジュールの同期ロードを重視しています。

CommonJS エクスポート/インポート モジュール

CommonJS のモジュールは、module.exports を使用して値、オブジェクト、または関数をエクスポートします。

1.デフォルトのエクスポート/インポート

// logger.js
function log(message) {
    console.log(message);
}

module.exports = log; // Default export

// index.js
const log = require('./logger');

log('This is a log message.'); // Output: This is a log message.

2.名前付きエクスポート/インポート

// math.js
function add(a, b) {
    return a   b;
}

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

module.exports = { add, subtract }; // Named exports

// index.js
const { add, subtract } = require('./math');

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

ECMAScript モジュール (ESM)

ES6 (ES2015) で導入された ESM は、JavaScript の標準化されたモジュール システムです。同期モジュールと非同期モジュールの両方の読み込みをサポートしており、最新のブラウザーと特定の構成の Node.js でネイティブにサポートされています。

ECMAScript エクスポート モジュール

ESM は、エクスポート ステートメントを使用して値、オブジェクト、または関数をエクスポートします。

1.デフォルトのエクスポート/インポート

// utils.mjs (Note the .mjs extension for ESM)
function formatName(name) {
    return `Mr./Ms. ${name}`;
}

export default formatName;

// index.mjs
import formatName from './utils.mjs';

console.log(formatName('John')); // Output: Mr./Ms. John

2.名前付きエクスポート

// operations.mjs
export function multiply(a, b) {
    return a * b;
}

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

// index.mjs
import { multiply, divide } from './operations.mjs';

console.log(multiply(4, 2)); // Output: 8
console.log(divide(10, 2)); // Output: 5

3. ECMAScript モジュールの混合エクスポート スタイル

// mixedExports.mjs
function greet(name) {
    return `Hello, ${name}!`;
}

export default greet;

export function goodbye(name) {
    return `Goodbye, ${name}!`;
}

// index.mjs
import sayHello, { goodbye } from './mixedExports.mjs';

console.log(sayHello('Alice')); // Output: Hello, Alice!
console.log(goodbye('Bob')); // Output: Goodbye, Bob!

CommonJS と ESM の主な違い

• 構文: CommonJS は require() と module.exports を使用しますが、ESM はインポート ステートメントとエクスポート ステートメントを使用します。
• 読み込み: CommonJS モジュールは同期的に読み込まれますが、ESM は同期読み込みと非同期読み込みの両方をサポートします。
• 環境: CommonJS は主に Node.js で使用されますが、ESM はブラウザーでネイティブにサポートされており、特定の構成 (--experimental-modules フラグまたは .mjs ファイル拡張子) を使用して Node.js で使用できます。

互換性と使用法

• Node.js: CommonJS は、Node.js 環境における長年のサポートとシンプルさにより、依然として普及しています。
• ブラウザ: ESM は、ブラウザによるネイティブ サポートが増え、より優れたパフォーマンスとモジュラー コードの読み込みを提供することで人気が高まっています。

結論

CommonJS モジュールと ECMAScript モジュールのどちらを選択するかは、プロジェクトの環境と要件によって異なります。 CommonJS は Node.js バックエンド開発に堅牢ですが、ESM はブラウザーと最新の Node.js アプリケーション間の相互運用性を提供します。これらのモジュール システムを理解すると、開発者は JavaScript のモジュール機能を効果的に利用できるようになります。

CommonJS または ESM を活用することで、開発者はコードの編成を強化し、プロジェクトのスケーラビリティを向上させ、JavaScript プロジェクトでのコラボレーションを促進できます。