JS ESモジュールを使ったDOM操作

ES Modulesの仕様で書いたクラスを付けするだけのシンプルなサンプルです。

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は、以下の内容で記述してあります。

export function myToggleClass(myId,className) {
	var myElememt = document.getElementById(myId);
	myElememt.classList.toggle(className);
}

exportが初めに書かれている以外は普通のfunctionと同じ記述のようです。

こちらも移出される内容であることがわかるので、JSだけ見た時も気づけそうです。また、ファイル名やメソッド名で探せば、両者がヒットすることも開発にとって優しいですね。

引き続き、ESモジュールについてはいろいろサンプルを載せていこうと思います。

参考に使ったCSSは以下です

.demo_style {
color:#F00;
font-weight:bold;
background-color:#FEE;
}
#demo_text {
border:solid 1px #CCC;
margin:10px;
padding:10px;
width:200px;
}
#demo_btn{
text-align:center;
cursor:pointer;
box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
border-radius:5px;
background-color:#EEE;
width:100px;
margin:10px;
padding:5px;
}
#demo_btn:hover{
background-color:#EEF;
}

2019-08-08 00:18:15

LINEでシェア

このページの二次元コード

JS ESモジュールを使ったDOM操作

関連するサンプル