モジュール（ESM）とは

・ソースコードを整理、分割する仕組み
・ブラウザ上で動作
・ES６から導入
・import / exportを使用
・IEでは未対応

これを使用することにより、別ファイルで定義した変数や関数を扱うことができる

import

モジュールを読み込む

export

モジュールを出力

主な用途

例としてmoduleA.jsとmoduleB.jsのファイルを作成。
moduleA.jsでexportしたモジュールをmoduleB.jsにimportします。

フォルダ構成
|--index.html
|--moduleA.js
|--moduleB.js

htmlファイルの準備

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body><!-- ↓typeを"module"に。   ↓moduleB.jsを読み込む。 -->
    <script type="module" src="moduleB.js"></script>
  </body>
</html>

moduleA.jsの準備
適当な変数と関数を定義

moduleA.js


const hoge = 'ほげ';

const fuga = () => {
  console.log('ふが');
}

現状もちろんこれらの変数、関数はmoduleA.js内でしか使用できません。
これをexportを使いmoduleB.js内で使用できる様に準備します。

moduleA.js


export const hoge = 'ほげ';

export const fuga = () => {
  console.log('ふが');
}

moduleB.jsの準備

moduleA.jsで定義したhogeとfugaをimportしています。

moduleB.js

import { hoge, fuga } from './moduleA.js'

console.log(hoge); // => ほげ
fuga()             // => ふが

できました！

ちなみにこうすることでimportした変数関数の名前を変更できます。

moduleB.js

import { hoge as h, fuga as f} from './moduleA.js'

console.log(h); // => ほげ
f()             // => ふが

オブジェクトとして格納することも可能。

moduleB.js

import *as moduleA from './moduleA.js'

console.log(moduleA.hoge); // => ほげ;
moduleA.fuga();            // => ふが;

デフォルトエクスポート

さっきまでのは名前付きエクスポートという機能でした。
デフォルトエクスポートもやってみます。

moduleA.js及びmoduleB.jsの記述を変更します。

moduleA.js


export default 'ほげ';

moduleB.js


import hoge from './moduleA.js'

console.log(hoge); // => ほげ

デフォルトエクスポートはモジュールごとにひとつしか作れません。