モジュール（ESM）とは
・ソースコードを整理、分割する仕組み
・ブラウザ上で動作
・ES６から導入
・import / exportを使用
・IEでは未対応
これを使用することにより、別ファイルで定義した変数や関数を扱うことができる
import
モジュールを読み込む
export
モジュールを出力
主な用途
例としてmoduleA.jsとmoduleB.jsのファイルを作成。
moduleA.jsでexportしたモジュールをmoduleB.jsにimportします。
フォルダ構成
|--index.html
|--moduleA.js
|--moduleB.js
htmlファイルの準備
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body><!-- ↓typeを"module"に。 ↓moduleB.jsを読み込む。 -->
<script type="module" src="moduleB.js"></script>
</body>
</html>
moduleA.jsの準備
適当な変数と関数を定義
moduleA.js
const hoge = 'ほげ';
const fuga = () => {
console.log('ふが');
}
現状もちろんこれらの変数、関数はmoduleA.js内でしか使用できません。
これをexportを使いmoduleB.js内で使用できる様に準備します。
moduleA.js
export const hoge = 'ほげ';
export const fuga = () => {
console.log('ふが');
}
moduleB.jsの準備
moduleA.jsで定義したhogeとfugaをimportしています。
moduleB.js
import { hoge, fuga } from './moduleA.js'
console.log(hoge); // => ほげ
fuga() // => ふが
できました！
ちなみにこうすることでimportした変数関数の名前を変更できます。
moduleB.js
import { hoge as h, fuga as f} from './moduleA.js'
console.log(h); // => ほげ
f() // => ふが
オブジェクトとして格納することも可能。
moduleB.js
import *as moduleA from './moduleA.js'
console.log(moduleA.hoge); // => ほげ;
moduleA.fuga(); // => ふが;
デフォルトエクスポート
さっきまでのは名前付きエクスポートという機能でした。
デフォルトエクスポートもやってみます。
moduleA.js及びmoduleB.jsの記述を変更します。
moduleA.js
export default 'ほげ';
moduleB.js
import hoge from './moduleA.js'
console.log(hoge); // => ほげ
デフォルトエクスポートはモジュールごとにひとつしか作れません。