ES6のモジュールをブラウザ環境で動作させる

モジュールとは

WEBアプリ開発のようにJavaScriptでゴリゴリとコードを書いていく場合、ある程度機能（役割）別にファイルを切り出して別ファイルとして管理したいような場合に、関連性を持たせて切り離されたコード群を「モジュール」と呼ぶ。
JavaScriptではES6から実装された機能になっている。

モジュールの基本

モジュールは1つのファイルとして定義するのが基本で、外部からモジュールにアクセスするメンバには「export」を付与する。
なお、モジュール内のメンバはデフォルトでは非公開となる。

コード例

js/mod.js

export let value = 100;

export function hello() {
  console.log('Hello');
}

const SECRET_VALUE = Symbol();
console.log(SECRET_VALUE);  // =>Symbol()

export default class {
    constructor(secret) {
        this.hoge = "hoge";
        this.foo = 234;
        this[SECRET_VALUE] = secret;
    }
    

    getSecret() {
        return this[SECRET_VALUE];
    }
}

別ファイルで定義されたモジュールをインポートする場合は「import」を付与する。

import構文

import {name,...} from module(./を忘れずに)
  name:インポートする要素
  module:モジュール(拡張子を抜いたパス)

1. モジュール全体をまとめてエクスポートする場合、「*(アスタリスク)」でインポートすることも可能。この場合は、as句で別名を指定する必要はある。
2. モジュール内の個々の要素に別名をつける
3. デフォルトとのエクスポートをインポートする
   ※下記では、「App」という別名でdefaultのエクスポートにアクセスしている。

コード例

mod.html

<script type="module">  // typeで「module」を指定する
    import { value, hello } from './js/mod.js';
    import App from './js/mod.js';  // defaultのエクスポートにアクセス
    console.log(value);  // =>100
    hello();  // =>"Hello"

    const a = new App(1234);
    for (let key in a) {
        console.log(key);  // =>"hoge" =>"foo"
    }
    console.log(a.getSecret());  // =>1234
</script>

なお、上記はローカル環境では「Access to script at 'file:///C:/Users/xxx/js/mod.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.」(CORSポリシーに引っかかっているからHTTPでアクセスしてね)といったエラーが出るので、ローカルサーバ等で検証する必要がある。