ES Moduleとは、JavaScriptのファイルを一つをモジュールという単位にして、ファイルごとに機能を管理することを指します。
ファイルはそれぞれ独立していて、ファイル外部から別ファイルに定義された関数を使いたい場合、Importを使用します。
ES Moduleを使用する場合、htmlファイルのscriptタグ内にtype="module"という属性を指定する必要があります。
.html
<body>
<script type="module" src="module.js"></script>
</body>
関数の頭にexportをつけると、外部ファイルから参照可能な関数になります。
module.js
//printText1は外部ファイルから参照できない
const printText1 = () => {
console.log("Happy Holiday");
}
//printText2は外部から参照できる
export const printText2 = () => {
console.log("Happy Holiday");
}
クラスを外部参照可能にするには、exportのオブジェクトリテラルとしてクラスを指定します。
module.js
class Player {
constructor(position) {
this.position = position;
}
}
export {Player} //この記述により、Playerクラスが外部よりアクセス可能になる。
export default は一つのjsファイルに一つだけ定義することができる。
module.js
const defaultFunction = () => {
console.log("This is default function.");
}
export default defaultFunction //この記述は一つのjsファイルに一つだけ
他ファイルで定義された関数はimportを使用して、呼び出したい関数名をオブジェクトリテラル{}として記述する。
main.js
import {printText2} from "./module.js";
printText2(); //上のprintText2関数が実行される
export defaultを他ファイルで読み込む場合、{}は不要。
module.js
import defaultFunction from "./module.js"
またexport defaultの関数に限って、読み込み元の名前を変更することができる。
(これは、一つのファイルに対してexport defaultが一つしか定義されていないため。）
main.js
import defaultFunctionRename from "./module.js"
//module.jsではdefaultFunctionと定義されていたが、
//main.jsではそれをdefaultFunctionRenameとして呼び出している。