🤷‍♂️CommonJSとESModuleのちがい

Jestでnpm run devを実行したら、モジュールエラーによく遭遇します。😥
モジュールに沼りやすいので、まずCommonJSとESModuleの違いについて、調べたことを整理することにしました。

1. モジュールとは？

まず、モジュールとは、プログラムを小さな部品に分けたものです。それぞれの部品がモジュールです。モジュールを使うと、大きなプログラムを作るときに、部品ごとに分けて作ることができるので、わかりやすくて便利。

2. CommonJS

CommonJS（コモンジェイエス） は、Node.jsというJavaScriptの実行環境で使われているモジュールの仕組みです。モジュールを使うためのキーワードは require と module.exports です。

a.js（モジュールを作るファイル）javascript

// a.js
function hello() {
    console.log('Hello, world!');
}

module.exports = hello;

b.js（モジュールを使うファイル）javascript

const hello = require('./a');
hello();  // "Hello, world!" 

と表示される

3. ES Modules

ES Modules（ESモジュール） は、JavaScriptの標準的なモジュールの仕組みです。
モジュールを使うためのキーワードは import と export です。これはブラウザでも使えます。

例a.mjs（モジュールを作るファイル）javascript

// a.mjs
export function hello() {
    console.log('Hello, world!');
}

b.mjs（モジュールを使うファイル）javascript

// b.mjs
import { hello } from './a.mjs';
hello();  // "Hello, world!"

と表示される

4. 違い

書き方:

• CommonJS では require と module.exports を使います。
• ES Modules では import と export を使います。

使われる場所:

• CommonJS は主に Node.js で使われます。
• ES Modules はブラウザでも使えますし、Node.js でも使えます。

ファイルの拡張子:

• CommonJS では .js を使います。
• ES Modules では .mjs を使うことがありますが、設定次第で .js も使えます。

5. まとめ

CommonJS:

• キーワード: require, module.exports
• 主に Node.js で使う

ES Modules:

• キーワード: import, export
• ブラウザと Node.js で使う

使い場所の違い

Node.js:

サーバーサイドで動作するJavaScript環境。サーバーのロジックを記述するために使います。
CommonJSとES Modulesの両方が使えますが、デフォルトではCommonJSが使われています。Node.jsのバージョンが新しい場合や、設定を変更することでES Modulesも使えます。

ブラウザ:

クライアントサイドで動作するJavaScript環境。ウェブページの動的な動作を記述するために使います。ES Modulesが使えます。CommonJSはブラウザで直接使えません。