まず、CommonJSって何？
CommonJSは、昔からNode.jsで使われてきたモジュールシステムだよ！要するに、JavaScriptがサーバーサイド（Node.js）でも使えるように作られたモジュールの仕組みなんだけど、ESモジュールが登場する前は、これが主流だったの！😎
どんな違いがあるの？
1. モジュールのインポート/エクスポート方法
-
CommonJS：
require()とmodule.exportsを使う！ -
ESモジュール：
importとexportを使う！
例：CommonJS
// math.js
module.exports.add = (a, b) => a + b;
// main.js
const { add } = require('./math.js');
console.log(add(3, 2)); // 5
例：ESモジュール
// math.js
export const add = (a, b) => a + b;
// main.js
import { add } from './math.js';
console.log(add(3, 2)); // 5
2. 同期 vs 非同期
-
CommonJS：同期的にモジュールを読み込む。
require()で呼び出した瞬間に、そのモジュールが実行される！ - ESモジュール：非同期にモジュールを読み込むから、ブラウザで使うときもページの読み込みが速くなることがあるんだよ！
3. 互換性
- CommonJSは、主にNode.js用だから、サーバーサイドのコードでよく見かける！
- ESモジュールは、ブラウザでも使えるし、新しいJavaScriptの標準だから、これからはこっちを使うのが主流になっていくよ！
4. 動作のタイミング
-
CommonJS：モジュールが最初に
require()されるときに即座に実行される！だから、モジュールは1回しか読み込まれない！ -
ESモジュール：
importで読み込んだモジュールは、実行されるのは他の部分が必要なときだから、柔軟に読み込むことができるんだ！
結論！
- CommonJSは「昔のやり方」って感じで、サーバーサイドに特化したシンプルな仕組み！
- ESモジュールは「新しいやり方」で、ブラウザでもサーバーでも使えるし、カッコよくて未来に向かって進んでる感じ！🚀
どっちを使うかはプロジェクトによるけど、ESモジュールがメインになってきてるから、これからはこっち覚えておくのがベスト！👑