`mjs` と `cjs` の違い

JavaScriptのモジュールシステムには、主にmjs（ECMAScript Modules）とcjs（CommonJS）の2種類があります。この記事では、これらの違いについて詳しく説明します。

背景

JavaScriptはもともとブラウザ上で動作するスクリプト言語として開発されました。初期の頃は、モジュールという概念が存在せず、全てのコードはグローバルスコープで実行されていました。しかし、プロジェクトが大規模化するにつれて、コードの再利用や分割が求められるようになり、モジュールシステムが導入されました。

CommonJS (cjs)

CommonJSは、サーバーサイドJavaScript（特にNode.js）でのモジュール管理のために開発された標準です。Node.jsは2009年に登場し、そのモジュールシステムとしてCommonJSを採用しました。CommonJSはシンプルで直感的な設計が特徴です。

ECMAScript Modules (mjs)

ECMAScript Modulesは、JavaScriptの公式標準であるECMAScriptによって定義されたモジュールシステムです。ES6（ES2015）で正式に導入され、ブラウザ環境とサーバー環境の両方で動作することを目指しています。

1. モジュールのインポートとエクスポート

CommonJS (cjs)

// インポート
const module = require('module-name');

// エクスポート
module.exports = {
  functionName,
  variableName,
};

ECMAScript Modules (mjs)

// インポート
import { functionName, variableName } from 'module-name';

// エクスポート
export const functionName = () => { ... };
export const variableName = 'value';

違い:

cjsではrequireとmodule.exportsを使用します。
mjsではimportとexportを使用します。

2. 実行環境

CommonJS (cjs): Node.js環境で主に使用されます。Node.jsのデフォルトモジュールシステムです。
ECMAScript Modules (mjs): ブラウザ環境とNode.jsの両方で使用可能です。特にES6以降の標準です。

違い:

cjsは主にサーバーサイド（Node.js）で使用されます。
mjsはクライアントサイド（ブラウザ）とサーバーサイドの両方で使用されます。

3. 非同期処理

CommonJS (cjs): モジュールの読み込みは同期的に行われます。つまり、モジュールの読み込みが完了するまで他の処理はブロックされます。
ECMAScript Modules (mjs): モジュールの読み込みは非同期的に行われます。これにより、パフォーマンスが向上します。

違い:

cjsは同期的な読み込みを行います。
mjsは非同期的な読み込みを行い、パフォーマンス向上に寄与します。

4. 拡張子

CommonJS (cjs): .js 拡張子を使用します。
ECMAScript Modules (mjs): .mjs 拡張子を使用します。また、package.json で "type": "module" を設定することで .js 拡張子も使用可能です。

違い:

cjsは.js拡張子を使用します。
mjsは.mjs拡張子を使用し、設定によって.jsもサポートします。

5. 名前空間

CommonJS (cjs): モジュール全体が1つのオブジェクトとしてエクスポートされます。
ECMAScript Modules (mjs): 各エクスポートが独自の名前空間を持ちます。

違い:

cjsはモジュール全体が1つのオブジェクト。
mjsは各エクスポートが独自の名前空間。

6. デフォルトエクスポート

CommonJS (cjs)

module.exports = functionName;

ECMAScript Modules (mjs)

export default functionName;

違い:

cjsはデフォルトエクスポートが標準。
mjsはexport defaultを使用。

まとめ

CommonJS (cjs): Node.jsで広く使用されている伝統的なモジュールシステム。同期的なモジュール読み込み、.js拡張子。
ECMAScript Modules (mjs): 新しい標準。ブラウザとNode.jsの両方で使用可能。非同期的なモジュール読み込み、.mjs拡張子。

プロジェクトのニーズに応じて使い分けることが重要です。既存のNode.jsプロジェクトではcjs、新しいプロジェクトやブラウザでも動作させたい場合はmjsを選ぶと良いでしょう。