見出し画像

🛠CommonJSとecmascriptモジュールの違い

Node.jsには2つのモジュールシステムがあります。CommonJS モジュールと ECMAScript モジュールです。

Node.jsはデフォルトで、以下のものをCommonJSモジュールとして扱います。

https://nodejs.org/api/modules.html#modules-commonjs-modules

CommonJS は、Web ブラウザ以外の JavaScript のモジュールエコシステムに関する規約を確立することを目的としたプロジェクトです。その作成の主な理由は、JavaScriptスクリプトを実行する従来のWebブラウザが提供する環境とは異なる環境(例えば、Webサーバやネイティブデスクトップアプリケーション)で再利用可能な、一般的に受け入れられるJavaScriptモジュールユニットの形式が大きく欠けていたためです。
CommonJSのモジュール仕様は、今日、特にNode.jsによるサーバーサイドのJavaScriptプログラミングに広く使われています

https://en.wikipedia.org/wiki/CommonJS

ブラウザはCommonJSをサポートしていないので、コードはトランスパイラでパッケージ化する必要があります。 他に使われている主要なモジュール仕様はECMAScript (ES) モジュール仕様 (ES6 modules aka ES2015 modules) [2] CommonJS は require() 関数と module.exports の使用で認識できるが、ESモジュールは同様の機能(同一ではない)のために import と export ステートメントを使用します。

https://en.wikipedia.org/wiki/CommonJS

ECMAScript モジュールは、JavaScript のコードを再利用できるようにパッケージ化した公式の標準形式です。モジュールは様々な import と export ステートメントを使用して定義されます。

https://nodejs.org/api/esm.html#modules-ecmascript-modules

CommonJS (CJS) と ECMAScript モジュール (ESM) は、JavaScript のモジュールシステムの2つの主要な規格です。それぞれには異なる歴史と特性があります。以下に主な違いを簡潔にまとめます。

  1. 起源と用途:

    • CommonJS: Node.js のための初期のモジュールシステムとして考案されました。

    • ECMAScript モジュール: JavaScript の公式なモジュールシステムとして ECMAScript 2015 (ES6) で導入されました。ブラウザとサーバーの両方で動作することを目的としています。

  2. 構文:

  3. 動的 vs. 静的:

    • CommonJS: 動的なインポートが可能です。つまり、ランタイム中にモジュールをインポートできます。

    • ECMAScript モジュール: 静的な構造を持っています。これにより、ブラウザやツールがモジュールを効率的に解析・最適化することが可能です。

  4. this の値:

    • CommonJS: モジュールのトップレベルで `this` は `exports` オブジェクトを参照します。

    • ECMAScript モジュール: トップレベルの `this` は `undefined` です。

  5. 非同期ロード:

    • CommonJS: 基本的には同期的にモジュールをロードします。

    • ECMAScript モジュール: 非同期にモジュールをロードできる機能が組み込まれています。

これらの違いにより、開発者は特定の環境やニーズに応じて適切なモジュールシステムを選択することができます。近年では ECMAScript モジュールが広く受け入れられ、ブラウザとNode.jsの両方でサポートされるようになってきています。

お願い致します