HTMLとJavaScriptモジュールでクラスを定義し、ボタンから呼び出す方法

2025年8月19日

Web開発において、JavaScriptのクラスとモジュールを正しく使いこなすことは非常に重要です。特に最近のブラウザでは、<script type="module"> を利用することで ES Modules (ECMAScriptモジュール) が標準的にサポートされています。具体的なコード例を交えながら解説します。

HTMLで外部JavaScriptファイルを読み込む方法
JavaScriptでクラスを定義する方法
複数のJavaScriptファイル間でクラスを共有する方法（import/export）
HTMLのボタンからクラスのメソッドを呼び出す方法（2パターン）

1. HTMLで外部JavaScriptモジュールを読み込む

<script type="module" src="./js/index.js?v=202508191501"></script>

type="module" を指定することでES Modulesとして読み込まれます。クエリ文字列（?v=202508191501）はキャッシュ対策に使われます。

2. JavaScriptでクラスを定義する

// index.js
class Tobject {
  constructor(name, value) {
    this.name = name;
    this.value = value;
  }

  showInfo() {
    console.log(`Name: ${this.name}, Value: ${this.value}`);
  }

  addValue(num) {
    this.value += num;
    return this.value;
  }
}

export { Tobject };

3. 複数ファイル間でクラスを共有する（import/export）

index2.js

// index2.js
class Tobject2 {
  constructor(id) {
    this.id = id;
  }

  hello() {
    console.log(`Hello from Tobject2, id=${this.id}`);
  }
}

export { Tobject2 };

index.js

// index.js
import { Tobject2 } from './index2.js';

const obj2 = new Tobject2(42);
obj2.hello();

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>モジュールテスト</title>
</head>
<body>
  <h1>JavaScript モジュール import/export の例</h1>
  <script type="module" src="./js/index.js?v=202508191501"></script>
</body>
</html>

4. HTMLのボタンからクラスを呼び出す方法

モジュール内で定義した変数やオブジェクトは モジュールスコープ に閉じ込められており、そのままではHTMLの onclick="..." から呼べません。ここでは2つの方法を紹介します。

方法1: グローバル変数として公開する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クラス呼び出し例</title>
</head>
<body>
  <button onclick="obj.showInfo()">呼び出す</button>

  <script type="module">
    import { Tobject } from './js/index.js?v=202508191501';

    const obj = new Tobject("テスト", 123);
    window.obj = obj;
  </script>
</body>
</html>

方法2: addEventListenerを使う（推奨）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クラス呼び出し例</title>
</head>
<body>
  <button id="btn">呼び出す</button>

  <script type="module">
    import { Tobject } from './js/index.js?v=202508191501';

    const obj = new Tobject("テスト", 123);
    document.getElementById("btn").addEventListener("click", () => {
      obj.showInfo();
    });
  </script>
</body>
</html>