概要

...【JavaScript】ECMAScriptモジュール②と
...【JavaScript】ECMAScriptモジュール③もあります。

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

JavaScript入門一覧に他の記事をまとめています。

ECMAScriptモジュール

モジュールには以下の利点がある。

1. 保守性
機能単位や関連性を持つ単位で切り離すことで、
他のコードとの依存性が減少し、修正・変更時には他のコードへ影響しにくい。

2. 名前空間
モジュールごとにスコープ(範囲)が明確になることで、
変数名の競合やどの機能を使用しているかの把握も容易になる。

3. 再利用性
後述するエクスポート/インポートすることで、
必要な機能を必要な場所で(モジュールとして)再利用でき、修正時には１箇所の修正で対応可能。

モジュールとは(引用：Wikipedia)
モジュール（英: module）とは、工学などにおける設計上の概念で、システムを構成する要素となるもの。いくつかの部品的機能を集め、まとまりのある機能を持った部品のこと。モジュールに従っているものをモジュラー（英: modular）という。

ECMAScriptモジュールの構文

モジュールを利用するためには、以下の構文と方法がある。

1. エクスポート/インポートの構文
作成したモジュールを(エクスポート、インポートして)他のファイルでも利用するため、
export文とimport文という2種類の構文が存在する。

2. エクスポート/インポートの方法
名前つき(エクスポート/インポート)、デフォルト(エクスポート/インポート)という方法がある。

エクスポートとは
・(データを)出力すること。
・今回の場合、宣言した変数や関数を他のファイルで取り込める状態にすること。

インポート
・(データを)取り入れて、使用できるようにすること。
・今回の場合、エクスポート(出力)された他ファイルの変数や関数をモジュールとして取り入れ、使用できる状態にすること。

名前つきエクスポート/インポート

名前付きエクスポート/インポートについてそれぞれ記載していく。
※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

動作環境情報はコチラ

【環境】
PC：Mac
エディタ：Visual Studio Code
プラグイン：Live ServerというVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール：GoogleChrome

【登場ファイル】
export.js：エクスポートに関するコードを記述したエクスポート側のファイル
import.js：インポートに関するコードを記述したインポート側のファイル
index.html：「import.js」を使用、および開発者コンソールで確認する際に開くファイル

【★ポイント】
index.htmlのheadタグ内に<script src="import.js" type="module"></script>のように記述する

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript入門</title>
    <script src="import.js" type="module"></script>
</head>

<body>
</body>

</html>

※最終的に以下のような構成になる。
(任意の場所に「js」フォルダを作成および、フォルダに上記3ファイルを作成・配置する)

名前つきエクスポート

複数の変数や関数などの宣言名(名前)を指定し、エクスポートできる。
エクスポート方法は、 export { エクスポート対象 };と記載する。
複数エクスポートする場合は、,(カンマ)で区切り指定する。

export.js

// wordという変数を定義
const word = 'word';

// helloという関数を定義
function hello() {
    console.log('Hello JavaScript');
};

// export { エクスポート対象 }; でエクスポート
export { word, hello }; // 複数指定はカンマで区切る

★Tips①

export文を宣言の前に付けると、宣言と名前つきエクスポートが同時に可能となる。

export const word = "word";

名前つきインポート

指定したモジュールから名前を指定してインポート可能。
インポート方法は、 import { インポート対象 } from モジュールパス;と記載する。
複数インポートする場合は、,(カンマ)で区切り指定する。

export.js

// wordという変数を定義
const word = 'word';

// helloという関数を定義
function hello() {
    console.log('Hello JavaScript');
};

// export { エクスポート対象 }; でエクスポート
export { word, hello }; // 複数指定はカンマで区切る

モジュールパスについては現在位置を意味するドット(.)を用いた相対パスを記載することでサイトの階層構造の変更等にも対応できる。

import.js

// import { インポート対象 } from モジュールパス; でインポート
import { word, hello } from './export.js';

console.log(word);     // => word
hello();               // => Hello JavaScript

名前つきエクスポート／インポートのエイリアス

名前つきエクスポート／インポートにはエイリアスという仕組みがある。
エイリアスを使用すると、宣言済みの変数を別名でエクスポート/インポート可能となる。
エイリアスを使用するにはasを使用する。
エクスポートの場合、export { 定義済み変数 as 別名 };
インポートの場合、import { 定義済み変数 as 別名 } from モジュールパス;

export.js

// wordという変数を定義
const word = 'word';

// helloという関数を定義
function hello() {
    console.log('Hello JavaScript');
};

// 変数「word」を「w」というエイリアス名で、関数「hello」はそのまま名前でエクスポートしてみる
export { word as w, hello };

import.js

// エクスポートしたエイリアス名「w」、関数「hello」はエイリアス名「helloFunction」としてインポートしてみる
import { w, hello as helloFunction } from './export.js';

//　結果に差異はない
console.log(w);   // => word
helloFunction();  // => Hello JavaScript