CommonJS とES Modulesについて整理

四角ズボン
2025-03-27
2025-03-27

Node.js のモジュールシステム CommonJS とES Modules について、きちんと理解できていなかったので調べなおしてみました。

モジュールを読み込む際、import と require のどちらを使えばよいのか・・・？
既存のコードに倣って使えば問題ないだろう・・・そう思って、よく理解せずに使っていました。（反省）

CommonJSとは・・・

CommonJSは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトで、Node.jsはデフォルトですべてのモジュールを CommonJS で扱いますが、最近は ES Modules にも対応してきているそうです。

重要なポイントは以下の通り

  • Node.jsでのみ使用できる
  • 拡張子 cjs にすると CommonJS として扱われる

インポート

const { module1, module2 } = require('module-name');
const { module3: alias } = require('module-name');
  • 複数のモジュールをまとめて読み込み可
  • ":"を使ってエイリアスの設定可

エクスポート

module.exports = {
  functionName,
  variableName,
};

ES Modulesとは・・・

ES Modules は ECMA Script Modules の略で、Ecma International のもとで標準化手続きが行われている JavaScript の国際規格です。2015年に第6版（ES6）が登場し、モジュールシステム、クラス構文、アロー関数などが追加されました。

重要なポイントは以下の通り

  • ウェブブラウザもサポートしておりブラウザとNode.jsで使用できる
  • 拡張子 mjs にすると ES Modules として扱われる
  • package.json の type を "module"とすると ES Modules として扱われる

インポート

import { functionName, variableName } from 'module-name';
import { functionName2 as alias } from 'module-name';
  • 複数のモジュールをまとめてインポート可
  • "as"を使ってエイリアスの設定可

エクスポート

export const functionName = () => { ... };
export const variableName = 'value';

まとめ

CommonJSは既存のコードでCJSを使っている場合や、CJSのライブラリを使用する必要がある場合のみ使用して、モダンなプロジェクトやブラウザ対応が必要なプロジェクトの場合はESModulesを使用するのが良さそうです。
© Future Spirits Co.Ltd.