[ES2015] ECMAScriptモジュール
- ECMAScriptモジュールはTodoアプリのユースケースで実際に動かしながら学ぶため、ここでは構文の説明とモジュールのイメージをつかむのが目的です。
- この章のサンプルコードを実際に動かすためにはローカルサーバーなどの準備が必要です。
そのため、ユースケースの章を先に読んでから戻ってきてもかまいません。
モジュールは、保守性・名前空間・再利用性のために使われます。
- 保守性: 依存性の高いコードの集合を一箇所にまとめ、それ以外のモジュールへの依存性を減らせます
- 名前空間: モジュールごとに分かれたスコープがあり、グローバルの名前空間を汚染しません
- 再利用性: 便利な変数や関数を複数の場所にコピーアンドペーストせず、モジュールとして再利用できます
1つのJavaScriptモジュールは1つのJavaScriptファイルに対応します。
- モジュールは変数や関数などを外部にエクスポートできます。
- また、別のモジュールで宣言された変数や関数などをインポートできます。
- この章では ECMAScriptモジュール（ESモジュール、JSモジュールとも呼ばれる） について見ていきます。
ECMAScriptモジュールを実行する
- 作成したECMAScriptモジュールを実行するためには、起点となるJavaScriptファイルをECMAScriptモジュールとしてウェブブラウザに読み込ませる必要があります。
ウェブブラウザはscript要素によってJavaScriptファイルを読み込み、実行します。
次のようにscript要素にtype="module"属性を付与すると、ウェブブラウザはJavaScriptファイルをECMAScriptモジュールとして読み込みます。
<!-- my-module.jsをECMAScriptモジュールとして読み込む -->
<script type="module" src="./my-module.js"></script>
<!-- インラインでも同じ -->
<script type="module">
import { foo } from "./my-module.js";
</script>
- type="module"属性が付与されない場合は通常のスクリプトとして扱われ、ECMAScriptモジュールの機能は使えません。
- スクリプトとして読み込まれたJavaScriptでimport文やexport文を使用すると、構文エラーが発生します。
