[Javascript]モジュールについて

モジュールについて

JavaScriptには大きく2つのモジュールシステムがあります。

CommonJS(CJS):従来のNode.jsで使われていた
ESモジュール(ESM) :ES6(2015年)で導入され、ブラウザ・Node.js両方で使える

特徴	CommonJS (CJS)	ESモジュール (ESM)
使用環境	Node.js	ブラウザ&Node.js
インポート	`require()`	`import`
エクスポート	`module.exports`	`export`
読み込み	同期的(ブロッキング)	非同期(遅延ロード可能)
ブラウザ対応	そのままでは動かない	`type="module"` で動く
ツリーシェイキング¹	不可	可能

ESモジュール(ESM)

ESM(ECMAScript Modules)はES6(2015年)で登場し、ブラウザとNode.js両方で使えるモジュールシステムです

import / export を使う
非同期で読み込む(遅延ロードが可能)
ブラウザとNode.jsの両方で使える
- type="module" をHTMLで指定するとブラウザで動く
CommonJSとの互換性が低い(require()とは併用できない)

使い方

ESモジュールではデフォルトエクスポート(export default)と名前付きエクスポート(export{})の2種類があります。

export(エクスポート)

// utils.js (ESM)
export function greet(name) {
    return `Hello, ${name}!`;
}

import(インポート)

// main.js
import { greet } from "./utils.js";
console.log(greet("Alice")); // "Hello, Alice!"

設定方法

Node.jsでESMを使うには？
- package.json に "type": "module" を追加
- .mjs 拡張子を使う
ブラウザでは type="module" を指定

Node.jsでESMを使うには？

Node.jsはデフォルトではCommonJSですが以下の方法でESMを有効にできます。

package.json に "type": "module" を追加する

{
  "type": "module"
}

この設定をするとimport / export が使えるようになる。

`.mjs`拡張子を使う方法

package.jsonを変更せずに、拡張子を.mjs にすることでESMとして扱われる

// utils.mjs
export function greet(name) {
    return `Hello, ${name}!`;
}

// main.mjs
import { greet } from "./utils.mjs";
console.log(greet("Alice"));

ブラウザでESモジュールを使う方法**

ブラウザで使う場合は HTMLで type="module" を指定する。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ES Modules</title>
</head>
<body>
    <script type="module">
        import { greet } from "./utils.js";
        console.log(greet("Alice"));
    </script>
</body>
</html>

CommonJS(CJS)

require()とmodule.exportsを使う
ブラウザでは直接使えない(WebpackやBabelなどが必要)
同期的にモジュールを読み込む(ブロッキング)
- モジュールが読み込まれるまで次のコードが実行されない
- 大量モジュールを読み込む場合、全体の処理時間が長くなる可能性がある。
Node.jsの初期から採用されていたモジュールシステム
- 最近ではESモジュール(ESM)の採用が増えています
  - ブラウザとの互換性や非同期的なモジュール読み込みによるパフォーマンス向上

使い方

export(モジュールのエクスポート)

// utils.js
function greet(name) {
    return `Hello, ${name}!`;
}
module.exports = greet; // エクスポート

または以下のように記載

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

import(モジュールのインポート)

const greet = require("./utils.js"); // インポート
console.log(greet("Alice")); // "Hello, Alice!"

未使用コード削除 ↩︎

4.9 KiB Raw Blame History Unescape Escape