ファイルを更新する
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