- [\[Javascript\]モジュールについて](#javascriptモジュールについて)
- [モジュールについて](#モジュールについて)
- [ESモジュール(ESM)](#esモジュールesm)
- [使い方](#使い方)
- [設定方法](#設定方法)
- [Node.jsでESMを使うには？](#nodejsでesmを使うには)
- [`.mjs`拡張子を使う方法](#mjs拡張子を使う方法)
- [ブラウザでESモジュールを使う方法\*\*](#ブラウザでesモジュールを使う方法)
- [CommonJS(CJS)](#commonjscjs)
- [**使い方**](#使い方-1)
# [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"` で動く |
| ツリーシェイキング[^1] | 不可 | 可能 |
[^1]:未使用コード削除
---
### ESモジュール(ESM)
ESM(ECMAScript Modules)はES6(2015年)で登場し、
ブラウザとNode.js両方で使えるモジュールシステムです
* `import` / `export` を使う
* 非同期で読み込む(遅延ロードが可能)
* ブラウザとNode.jsの両方で使える
* `type="module"` をHTMLで指定するとブラウザで動く
* CommonJSとの互換性が低い(`require()`とは併用できない)
#### 使い方
ESモジュールでは デフォルトエクスポート(export default)と
名前付きエクスポート(export{})の2種類があります。
**export(エクスポート)**
```js
// utils.js (ESM)
export function greet(name) {
return `Hello, ${name}!`;
}
```
**import(インポート)**
```js
// main.js
import { greet } from "./utils.js";
console.log(greet("Alice")); // "Hello, Alice!"
```
#### 設定方法
1. **Node.jsでESMを使うには？**
- `package.json` に `"type": "module"` を追加
- `.mjs` 拡張子を使う
2. **ブラウザでは `type="module"` を指定**
##### Node.jsでESMを使うには？
Node.jsはデフォルトではCommonJSですが
以下の方法でESMを有効にできます。
`package.json` に `"type": "module"` を追加する
```json
{
"type": "module"
}
```
この設定をすると`import` / `export` が使えるようになる。
##### `.mjs`拡張子を使う方法
`package.json`を変更せずに、拡張子を`.mjs` にすることでESMとして扱われる
```js
// utils.mjs
export function greet(name) {
return `Hello, ${name}!`;
}
```
```js
// main.mjs
import { greet } from "./utils.mjs";
console.log(greet("Alice"));
```
##### ブラウザでESモジュールを使う方法**
ブラウザで使う場合は
HTMLで `type="module"` を指定する。
```html
ES Modules
```
----
### CommonJS(CJS)
* `require()`と`module.exports`を使う
* ブラウザでは直接使えない(WebpackやBabelなどが必要)
* 同期的にモジュールを読み込む(ブロッキング)
* モジュールが読み込まれるまで次のコードが実行されない
* 大量モジュールを読み込む場合、全体の処理時間が長くなる可能性がある。
* Node.jsの初期から採用されていたモジュールシステム
* 最近ではESモジュール(ESM)の採用が増えています
* ブラウザとの互換性や非同期的なモジュール読み込みによるパフォーマンス向上
#### **使い方**
export(モジュールのエクスポート)
```js
// utils.js
function greet(name) {
return `Hello, ${name}!`;
}
module.exports = greet; // エクスポート
```
または以下のように記載
```js
// utils.js (CommonJS)
module.exports = {
greet: function(name) {
return `Hello, ${name}!`;
}
};
```
import(モジュールのインポート)
```js
const greet = require("./utils.js"); // インポート
console.log(greet("Alice")); // "Hello, Alice!"
```