2017年からES6 Modules、ES Modules、またはESMと呼ばれるJavaScriptを外部参照する際の新しい仕様が広まってきました。
まだ筆者も勉強中ですが、簡単に説明すると外部参照するJSの任意の部品（モジュール）を使うための新しいルールといった感じです。
以下はそのサンプルで、外部のJSのfunctionをボタンを押されることで発火させています。
ボタンが押されるとこの要素にクラスを追加されます
ボタン
上のボタンを押すとid="demo_text"の要素に、class名「demo_style」を追加 / 削除します
単純な動作ですが、以下のようにあえて外部JSのfunctionを呼んでいます。
JSを呼ぶ側はこんな内容です。
<script type="module">
//type="module"は必須です
import {myToggleClass} from "/js/esm/sample/220/sample-module.js";
// import { 呼びたいfuctionなどカンマ区切り } from "参照するJSファイル";
document.getElementById("demo_btn").onclick = function() {
myToggleClass('demo_text','demo_style');
//呼び出したfunctionが使えます
};
</script>とてもシンプルで読めばどこの何を使っているのか、を宣言するような書き方になっています。
JSはHTML内のどこで外部参照しても、すべて読み込み、書き方によってはどこでも部品を呼び出すことができるので、メリットでもあり、混乱のもとでもあります。
このような記述が普及すれば、重複や乱用が減って、長い目で保守、更新が楽になります。
読まれる側のsample-module.jsは、以下の内容で記述してあります。
