JavaScriptのES ModuleのExport・Importについて #JavaScript

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として呼び出している。