親クラス（module_animal.js）

// module_animal.js
export class Animal {
    constructor(name) {
        this._name = name;
    }
    set name(name) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
    sayHello() {
        return `BARK ${this.name}`;
    }
}

子クラス（module_cat.js）

親クラスのモジュールを、ここで読み込んでいる。変数と関数も定義してみた。

// module_cat.js
import { Animal } from "./module_animal.js";

export { message };

const message = "hello world,";

export class Cat extends Animal {
    constructor(name) {
        super(name);
    }
    sayHello() {
        return `Nyaa ${this.name}`;
    }
}

export function sayGoodby() {
    return "Goodby Baby";
}

index.js(個別にインポート)

モジュールの変数・クラス・(関数)をインポート。インポート時に指定した名前で呼び出しできる。

// index.js
import { message } from "./module_cat.js";
import { Cat } from "./module_cat.js";
import { sayGoodby } from "./module_cat.js";

const el_1 = document.getElementById('box1');
const el_2 = document.getElementById('box2');

const tama = new Cat("tama");
tama.name = "タマ";
alert(tama.sayHello());

el_1.textContent = message + tama.name;
el_2.textContent = sayGoodby();

index.js(モジュールでまとめてインポート)

モジュール全体を一括してimport。モジュール名(mcat)を名前空間にして、アクセスできる。

// index.js
import * as m from "./module_cat.js";

const el_1 = document.getElementById('box1');
const el_2 = document.getElementById('box2');

const tama = new mcat.Cat("tama");
tama.name = "タマ";
alert(tama.sayHello());

el_1.textContent = mcat.message + tama.name;
el_2.textContent = mcat.sayGoodby();

HTML

scriptタグで、type="module"を指定する

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript Class-Object example</title>
    <link rel="stylesheet" href="style.css"></link>
  </head>

  <body>
    <p id='box1'></p>
    <p id='box2'></p>
    <script type="module" src="./index.js"></script>
  </body>
</html>

感想

JSに付き物のツールチェーンが、いくつか不要になって、いやー便利。

ダウンロードするファイルがひとつにまとまっていないけど、そこはHTTP/2の多重化でお願いしたい(そうでも、ないらしい)。

Using JavaScript modules on the web | Web Fundamentals | Google Developers
https://developers.google.com/web/fundamentals/primers/modules

参考になるページ

ブラウザで覚えるES Modules入門 - JavaScriptでモジュールを使う時代 - ICS MEDIA
https://ics.media/entry/16511
import - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import
export - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export