CommonJS とESModulesについて・歴史

CommonJS

CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトである。

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

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

モジュール

ある特定の機能を持ったプログラムの塊

初期のJSにはモジュールという概念がなかった。

歴史

• 1995 年　JavaScript爆誕　２８歳

  ちょっとしたアニメーション・簡単なフォームのバリデーション

  小さなスクリプトのために生まれた

  大きなアプリケーションを作る用途ではなかった

• 2009年　CommonJS発足

  JavaScriptの世界に新しいモジュールの仕組みを作ること

  require

  CommonJSの仕様をもとに作られたのがNode.js

例えばNode.jsで使われている。

Node.jsはデフォルトで全てのモジュールをCommonJSで扱うが、Node.jsは最近のバージョンでES Modulesに対応するなどしていて、潮流はES Modulesに流れつつある。

CommonJSの問題点

CommonJSのモジュールは、ブラウザで直接使うことができないという問題がある。

CommonJSの仕様は、もともとサーバーサイドで使われることが想定されていた。

そのため、ブラウザでWebアプリケーションを作るときは、「モジュールバンドラー」を使ってCommonJSモジュールを一度バンドルしてから使う必要があった。

• CommonJSはWeb標準ではない

超高速フレームワークHono

ESModules

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

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

ESモジュール（ESM）

ブラウザとNode.jsの両方で使用できる
ES Modules（ESM）はWeb標準
BunなどのNode.jsより高速な実行環境での使用

CommonJS（CJS）

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