171 lines
4.9 KiB
Markdown
171 lines
4.9 KiB
Markdown
- [\[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
|
||
<!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(モジュールのエクスポート)
|
||
|
||
```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!"
|
||
```
|