【完全入門】ESモジュールとCommonJSの違いと使い分けの話

PR
【初心者向け解説】 ESモジュールとCommonJSの違いと使い分けの話
この記事は約4分で読めます。

ESモジュールとCommonJSって知っておるか?

エンジニアA
エンジニアA

まあ知っているよ!

ChatGPTに聞くと何故か最初CommonJSで回答されるよね

エンジニアB
エンジニアB

もうESモジュールしか使わんよー

PR

PR
PR

PR
PR

ESモジュールとCommonJSの概要

ESモジュール(ESM)とは?

JavaScriptのモジュールシステムの一つです。
ESモジュールは、コードをモジュールとして整理し、再利用可能な部品として扱うための仕組みを提供

CommonJS(CJS)とは?

JavaScriptのモジュールシステムの一つです。
特にNode.jsで広く使用され、CommonJSは、JavaScriptコードをモジュール単位で分割し、再利用可能なコードを作成するための仕組みを提供

ESモジュール(ESM)とCommonJS(CJS)の違い

ESモジュール(ESM)とCommonJSは、それぞれ異なるモジュールシステムを提供しており、プロジェクトの要件や環境に応じて使い分けることが重要です。
新しいプロジェクトではESMを採用することが推奨されていますが、既存のプロジェクトやNode.js環境ではCommonJSを使用することもあります。

それでは一つひとつ違いを見ていきましょう!

構文の違い

ESモジュール(ESM)

モジュールをインポートする場合は import を使用する
モジュールをエクスポートする場合は export を使用する

// インポート
import moduleName from './module.js';

// エクスポート
export const myFunction = () => {
  // ...
};

CommonJS(CJS)

モジュールをインポートする場合は require() を使用する
モジュールをエクスポートする場合は module.exports を使用する

// インポート
const moduleName = require('./module.js');

// エクスポート
module.exports = {
  myFunction: () => {
    // ...
  }
};

ブラウザとNode.js

ESモジュール(ESM)

ブラウザとNode.jsの両方で使用できる

CommonJS(CJS)

Node.jsで使用され、ブラウザでは動かない

モジュールのロード

ESモジュール(ESM)

モジュールを非同期にロード

CommonJS(CJS)

モジュールを同期的にロード

コード解析

ESモジュール(ESM)

静的な解析
モジュールの依存関係が静的に分かっているため、ツールによる最適化が行いやすく、バグ検出などメリットがある

CommonJS(CJS)

動的なモジュール解析
実行時にモジュールの依存関係を解決するため、静的な解析や最適化が難しい場合があります。

グローバル変数への影響

ESモジュール(ESM)

暗黙のstrictモードを使用するため、厳格なエラーチェックが行われます。
これにより、グローバル変数の誤用や破壊的な変更が防がれる。
モジュール内の変数や関数はデフォルトでそのモジュールのスコープに閉じられており、グローバルスコープには影響を与えません。そのため、他のモジュールと変数名の競合が減少します。

CommonJS(CJS)

strictモードを使用しないため、グローバルスコープでの変数の宣言や変更が比較的自由に行えます。
モジュールのスコープに閉じられず、グローバルスコープに変数や関数を公開する傾向があります。
このため、他のモジュールとの競合や意図しない変数の上書きが起こる可能性が高まります。

さいごに

筆者は、TypeScriptを使う場面が多いので、ESMのほうが馴染みがありますね。

また既存コードでCJSを使っている場合や、どうして使いたい場合を除いて、
サポート面や普及面や安全性を考えるとESMのほうがメリットが大きいのかなとも思います。

【React&TypeScript入門】.js .jsx .ts .tsxの違いと使い分けの話
なんとなく使っているけど、.js .jsx .ts .tsxの違いが分からない~使い分けがよくわからない~を解決しよう!React開発でJavaScriptやTypeScriptのどちらを使うべきかそれぞれメリット・デメリットを把握しよう!
【エンジニアの副業】稼げそうな副業種類と始め方を探してみた
数ある副業の中から低コスト、低リスク、自動系、放置系の中から現実味のある副業の始め方、探し方を初心者向けに真剣に調査してみました。エンジニアをやりながらできそうな副業、副業のハードル、リスク、始め方、副業を始めたことによるメリット、デメリット
【賃貸にスマートロック】玄関におすすめ後付け可能な鍵比較5選
賃貸でも玄関の鍵にスマートロックを後付けすることが可能です。スマホで楽々解錠、急な来客や彼氏彼女に合鍵シェアっておしゃれですね。徹底的に調べて厳選比較しました。【賃貸OK】ITエンジニアがおすすめする賃貸でもできるスマートハウス化計画!
【完全入門】JavaScriptとJavaの違いと概念を10秒で説明します
プログラミング初心者向け解説!JavaScriptとJavaの違いと概念をコンパクトに10秒でなるべく分かりやすく説明します【すぐわかる】エンジニア完全入門!JavaScriptとJavaは名前が似ているものの全く異なるプログラミング言語です

寄付の依頼

もし、少しでもご参考になりましたらサイト運営への寄付をお願いします。
とても励みになります。

If you would like to help, please make a donation to the site management.
It is very encouraging.

BTC (ビットコイン) アドレス
35AfkHtN3paTC1iNVtHg6BDmCnHmffzQWM
DEEPコイン アドレス
0x43Dbe7F99b4A31bF184b98A8A814ADEC48FB789D
PR
PR

コメント

タイトルとURLをコピーしました