Zenn
🎉

Javascript 基礎 ESModuleとCommonJSとの違いについて

2025/02/07に公開
CommonJS
type
ES Module
package.json
tech

はじめに

JavascritpないしはTypescriptを用いての開発がもっと一般的になるように、Javascritpの豆知識をばら撒くための記事

（型の制御が面倒なので、よほどの要件がない限りはフロントエンドもバックエンドもJSの世界になってほしい）

🤔どうして学習するのか

JavaScriptのモジュールシステムは、コードの構造化と再利用性を高める上で重要な役割を果たします。CommonJSとESModuleは、それぞれ異なるアプローチでモジュール化を実現しており、これらの違いを理解することで、適切な環境や状況に応じたモジュールシステムの選択が可能になります。また、既存のプロジェクトの理解や、新しいプロジェクトの設計において、この知識は不可欠です。

👑達成条件

  • CommonJSとESModuleの基本的な構文の違いを説明できる
  • 両者のモジュール読み込みの仕組みの違いを理解している
  • それぞれの特徴と使用場面を適切に判断できる
  • 両方のシステムを使用してシンプルなモジュールを作成し、インポート/エクスポートできる

📔学習内容

CommonJSとは

  • Node.jsで主に使用されるモジュールシステム
  • **require()**関数を使用してモジュールを読み込む
  • **module.exportsまたはexports**オブジェクトを使用してモジュールをエクスポートする

ESModuleとは

  • ECMAScript 2015 (ES6)で導入された標準的なモジュールシステム
  • **import**文を使用してモジュールを読み込む
  • **export**キーワードを使用してモジュールをエクスポートする

主な違い

  1. 構文の違い
    • CommonJS: require(), module.exports
    • ESModule: import, export
  2. 読み込みのタイミング
    • CommonJS: 動的読み込み（実行時に評価）
    • ESModule: 静的読み込み（コンパイル時に評価）
  3. ブラウザ対応
    • CommonJS: 主にサーバーサイド（Node.js）
    • ESModule: ブラウザでネイティブサポート
  4. トップレベルの**await**
    • CommonJS: サポートなし
    • ESModule: サポートあり
  5. 循環依存の扱い
    • CommonJS: 部分的な読み込みが可能
    • ESModule: より厳格な処理（デッドロックの可能性が低い）

使用例

CommonJSの例:

module.exports = {
  sayHello: function() {
    console.log("Hello from CommonJS!");
  }
};

*// モジュールのインポート*
const myModule = require('./myModule');
myModule.sayHello();

ESModuleの例:

javascript*// モジュールのエクスポート*
export function sayHello() {
  console.log("Hello from ESModule!");
}

*// モジュールのインポート*
import { sayHello } from './myModule.js';
sayHello();

Discussion