【JavaScript】モジュールシステム、ECMAScriptモジュールについて

モジュール化

コードを分割し、再利用可能な単位にする仕組み のこと。
これにより、コードの管理がしやすくなり、再利用性や保守性が向上する。

メリット

** コードの管理・再利用がしやすくなる **
具体的には次のようなメリットがある

• 名前空間の衝突を防げる
  • 同じ名前の変数・関数が上書きされるのを防ぐ
• コードの再利用がしやすい
  • 便利な変数や関数を複数箇所にコピペする必要がなくなる
• コードが分割できて管理しやすい
  • 機能ごとにファイルを分けられるので、整理しやすく修正しやすい
    • 例）計算する機能だけをmath.jsにわける

主なモジュールシステム

ECMAScriptモジュール（ESM）

読み：エクマスクリプト

• import / export を使う
• ブラウザ & Node.js で使える（標準仕様）
• 非同期ロードが可能（ブラウザ環境）
• 拡張子は .js / .mjs

＜使い方＞

Copied!

// utils.js（モジュール化されたファイル）
export function greet(name) {
  return `Hello, ${name}!`;
}

// main.js（モジュールを使うファイル）
import { greet } from "./utils.js";
console.log(greet("Alice")); // Hello, Alice!

CommonJS（CJS）

• require / module.exports を使う
• Node.js のデフォルトのモジュールシステム
• 同期的な読み込み（ブラウザでは使えない）

＜使い方＞

Copied!

// utils.js
module.exports.greet = function(name) {
  return `Hello, ${name}!`;
};

// main.js
const { greet } = require("./utils");
console.log(greet("Alice")); // Hello, Alice!

その他

AMD（Asynchronous Module Definition）、UMD（Universal Module Definition）

参考