モジュール化とは、大きなプログラムを相互に依存する小さなファイルに分割し、簡単な方法で組み立てることを指します。
ES6が登場する以前、JavaScriptには標準的なモジュールシステムが存在せず、コミュニティがいくつかのモジュールロード仕様を策定していました。
主なものには、サーバーサイドで利用されるCommonJSと、ブラウザ向けのAMD（Asynchronous Module Definition）の2つが挙げられます。
/*
CommonJS（Node.jsが採用する仕様）
-> require() でインポート
-> module.exports でエクスポート
AMD
例 -> require.js
CMD
例 -> sea.js
*/
ES6モジュールの設計思想は、可能な限り静的化することで、コンパイル時にモジュールの依存関係、入力、出力変数を確定させることにあります。（CommonJSモジュールはオブジェクトであり、インポート時にはオブジェクトのプロパティを探す必要があります）
ES6モジュールはオブジェクトではなく、`export`命令で明示的に出力するコードを指定し、`import`命令で入力します。
// import { fn } from './xx.js'; // モジュールをインポート
// export function fn(){} // モジュールをエクスポート
モジュールは、関数コードブロックの機能と見なすことができ、オブジェクトのプロパティやメソッドをカプセル化したJavaScriptコードです。それは単一のファイル、変数、または関数になることができます。
ES6モジュールでは、`"use strict"`を記述するかどうかに関わらず、常に厳格モードが適用されます。
ES6におけるモジュールのインポート構文
あるファイル（モジュール）の機能を別のファイル（モジュール）から利用するためには、`import`キーワードを使用してデータをインポートする必要があります。
import {識別子1, 識別子2} from "ローカルモジュールパス"
単一のバインディングをインポートする
// 単一の機能をインポート
import { calculateTotal } from "./mathUtils.js"
複数のバインディングをインポートする
// 複数の機能をインポート
import { calculateTotal, calculateProduct, getCurrentTime } from "./mathUtils.js"
モジュール全体をインポートする
アスタリスク（`*`）を使用してオブジェクトを指定し、すべての出力値をそのオブジェクトにロードします。
// モジュール全体をインポート
import * as mathUtils from "./mathUtils.js"
インポートした変数に別名を付ける
入力された変数に別名を付けたい場合は、`import`命令で`as`キーワードを使用して変数名を変更します。
import { lastName as surname } from './userProfile.js';
ES6におけるモジュールのエクスポート構文
モジュールのエクスポートは、`export`キーワードを使用してデータを公開し、他のモジュールで利用可能にします。
変数、関数、またはクラスの宣言の前に`export`を置くことで、それらをモジュールからエクスポートできます。
// userProfile.js
export let firstName = 'Michael';
export let lastName = 'Jackson';
export let birthYear = 1958;
`export`命令の後に中括弧を使用して、出力する一連の変数を指定することもできます。
// userProfile.js
let firstName = 'Michael';
let lastName = 'Jackson';
let birthYear = 1958;
export {firstName, lastName, birthYear};
どちらの方法も同等ですが、後者の方法（末尾にまとめる）の方が、出力される変数が一目でわかるため推奨されます。
// 関数をエクスポート
export function calculateArea(width, height) {
return width * height;
}
// クラスをエクスポート
export class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
getDetails(){
return `${this.name}は${this.age}歳です。`
}
}
通常、`export`で出力される変数は元の名前ですが、`as`キーワードを使用して名前を変更することもできます。
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
};
デフォルトエクスポート（export default）
`export default`命令は、モジュールのデフォルト出力を指定するために使用されます。1つのモジュールには1つしかデフォルト出力が存在しません。
/* 第一グループ */
export default function calculateDiscount(price, rate) { // エクスポート
return price * (1 - rate);
}
import calculateDiscount from 'discountCalculator'; // インポート
/* 第二グループ */
export function calculateDiscount(price, rate) { // エクスポート
return price * (1 - rate);
};
import { calculateDiscount } from 'discountCalculator'; // インポート
第一グループでは`export default`を使用しているため、対応する`import`文では中括弧が不要です。
第二グループでは`export default`を使用していないため、対応する`import`文では中括弧が必要です。
したがって、`export default`命令は1回しか使用できません。そのため、`import`命令の後ろに中括弧を付けません。なぜなら、`export default`命令に唯一対応するからです。
`export default`はクラスのエクスポートにも使用できます。
// Animal.js
export default class { /* ... */ }
// main.js
import Animal from 'Animal';
let myPet = new Animal();
exportとimportの複合構文
あるモジュール内で、同じモジュールをインポートしてからエクスポートする場合、`import`文と`export`文を一緒に記述できます。
export { foo, bar } from 'my_module';
// 以下の2行と同等
import { foo, bar } from 'my_module';
export { foo, bar };