JavaScript
モジュール
ESモジュールの分割方針と実行タイミングの最適化
基本的に目的や機能ごとに分割します。また、実行タイミングをコントロールできるようにひとつの関数としてまとめるようにしてください。
// 関数としてexportする
export default function () {
// 処理...
}
import / export 機能を利用する場合は、
通常の
<script type="module"> を使用する必要があります。通常の
<script> タグでは import / export は動作しません。<!-- import/exportは使えない -->
<script src="main.js"></script>
<!-- import/exportが使える -->
<script type="module" src="main.js"></script>
実行タイミングの最適化
分割したモジュールの中で、import した時点で即座にブラウザや DOM に影響する処理が走る実装は避けてください。
main.js
import { showAlert } from "./show-alert.js";
document.querySelector("button").addEventListener("click", showAlert);
show-alert.js
// ❌ 悪い例：import時にすぐ実行される
alert("実行されました");
// ✅ 良い例：関数としてexportし、必要なときだけ実行
export function showAlert() {
alert("実行されました");
}