ファイルを更新する
This commit is contained in:
ry.yamafuji
parent
915d909a07
commit
183eb20fd9
170
docs/module.md
Normal file
170
docs/module.md
Normal file
@ -0,0 +1,170 @@
|
||||
- [\[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!"
|
||||
```
|
||||
12
docs/node-package.md
Normal file
12
docs/node-package.md
Normal file
@ -0,0 +1,12 @@
|
||||
|
||||
|
||||
## package.jsonについて書き方
|
||||
|
||||
- **main**
|
||||
|
||||
npmパッケージを作成する場合、
|
||||
他の人が`require()`したときに最初に読み込まれるファイルを指定できます。
|
||||
|
||||
ESモジュール(ESM)の時にも
|
||||
エントリーポイントになります
|
||||
|
||||
14
package.json
Normal file
14
package.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "js-common-code",
|
||||
"version": "1.0.0",
|
||||
"description": "Javascriptで活用できるコードを開発する。 Node.jsによりサーバーサイドも作成する",
|
||||
"main": "src/server/hellp.js",
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user