ももの知恵の樹

JavaScript_ESモジュール

ESモジュール

ESモジュールとは、ES2015仕様において策定された、JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みです。

ESモジュールは2017年中頃以降のブラウザで利用できます。


動作確認

読み込まれる側の処理

外部ファイルのJSファイルではexport文を定義します。

export宣言されたものが他のJSファイルから参照できます。

ファイル名は「export_module.js」とします。 


export function moduleObj() {
  return {
    func: function(a, b) {
      return String(a + b);
    }
  };
};

読み込む側の処理

ES Modulesを使う時は「type="module"」と定義します。

importには拡張子を含めて、JSファイル名を指定します。

以下の「index.html」を用意します。 


<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ES module</h1>
  <p id="import-result"></p>

  <script type="module">
    import {moduleObj} from "./export_module.js";
    var obj = new moduleObj();
    document.getElementById("import-result").textContent = obj.func(4, 5);
  </script>
</body>
</html>

実行

Node.jsでhttpサーバを取得して、実行します。 


$ npm install -g http-server
$ http-server

ブラウザでhttp://0.0.0.0:8080/にアクセスします。


備考

ローカルから(Webサーバなしで)Moduleを読み込もうとしてもブラウザがCORSエラーと認識します。

ESモジュールの実行にはWEBサーバを用意する必要があります。


また、ESモジュールの実行に際して、Webサーバ側の準備が必要です。

外部scriptファイルが返す応答ヘッダに「Content-Type: text/javascript」が返されるようにWebサーバを設定しなければESモジュールは動作しません。

例えば、Python3.5以前のhttp.serverを用いた場合、http.serverのMIME typeに「.mjs(Moduleの拡張子)」が定義されていないため、エラー停止します


※AWS S3に格納すれば動作しますのでお手軽です。


export default

export defaultは関数名を読み込んだ側で任意に付けるための表記です。

関数やオブジェクトの名前を予め知らなくても、利用できるようになります。


読み込まれる側の処理

コンストラクタ関数名を指定せずに、モジュールを読み込むようにします。 


export default function() {
  return {
    func: function(a, b) {
      return String(a + b);
    }
  };
};

読み込む側の処理

importで読み込んだモジュールに対するオブジェクト名を任意に設定します。 


<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ES module</h1>
  <p id="import-result"></p>

  <script type="module">
    import moduleObj from "./export_module.js";
    var obj = new moduleObj();
    document.getElementById("import-result").textContent = obj.func(4, 6);
  </script>
</body>
</html>

関連ページ