【JavaScript】モジュールについて

はじめに

JavaScriptのモジュールについて概要をまとめました。

モジュール

• 初期のJavaScriptスクリプトは規模の小さなものが多かったが、現在では規模の大きなスクリプトが用いられている
• そのため、スクリプトを分割して必要な時にインポートできるような仕組みが必要となった
• こうしてできたスクリプトのひとまとまりをモジュールと呼ぶ
• 実体は、JavaScriptで書かれたファイルである

インポート

• 　モジュールを使用するには、import文を使う
  • ここで、name、draw、areaは、モジュールsquare.jsの中で定義されている機能の名前である。具体的には、関数、var、let、const又はクラスのいずれかである
  • from以降の文字列は、モジュールのファイルパスである。この場合は相対パスで記述されており、このimport文が記述されたスクリプトのあるディレクトリ内にあるmodulesというディレクトリの中にsquare.jsというモジュールが配置されている

import文の例

import {name, draw, area} from "./modules/square.js";

• asを用いて別名を付けることもできる
  • この例では、square.jsモジュールのnameという機能を、squareNameという名前で用いることができる。また、circle.jsモジュールのnameという機能をcircleNameという名前で用いることができる
  • この例のように、複数のモジュールで同じ名前の機能が定義されている場合は、それらに別名をつけて判別する

asを用いた例

import {name as squareName, draw, area} from "./modules/square.js";
import {name as circleName, draw, area} from "./modules/circle.js";

• モジュールオブジェクト
  • この例では、module.jsの中にある全てのエクスポートされた機能を取得して、Moduleというオブジェクトのメンバーとして利用できるようにしている
  • 独自の名前空間を持たせるような効果があるため、多くのモジュールをimportするような場合に名前の衝突を防ぐのに有効

モジュール内の機能をモジュールオブジェクトにインポートする例

import * as Module from "./modules/module.js";

Module.function1();
Module.function2();

• インポートされた機能はインポートしたスクリプトの内部からしかアクセスできない

エクスポート

• モジュールが持つ機能を外部に提供するためには、export文を用いる
  • この例では、name及びdraw()がエクスポートされる
  • エクスポートできるものは、関数、var、let、const又はクラスのいずれかである。例えば、関数内でexportを使うことはできない

export文の例（MDNからそのまま引用）

export const name = "square";

export function draw(ctx, length, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, length, length);

  return { length, x, y, color };
}

• より便利なエクスポートの方法として、モジュールファイルの末尾に単一のexport文を置き、その後にエクスポートしたい機能のカンマ区切りリストを中括弧でかこむ方法がある

export文の別の例

export { name, draw, area };

• export文においても、import文と同様な方法で別名をつけることができる

モジュールの集約

• 依存性の階層が複数になった場合などに、いくつかあるサブモジュールをひとつの親モジュールにまとめて管理を単純化することができる

親モジュール(XYZ.jsとする。)におけるサブモジュールの集約部分の例

export { x } from "./modules/x.js"
export { y } from "./modules/y.js"
export { z } from "./modules/z.js"

親モジュール(XYZ.js)を利用するスクリプトにおけるインポート部分の例

import {x, y, z} from "./modules/XYZ.js";

HTMLへの適用

• HTMLページにモジュールを適用するには、<script>要素に属性type="module"を含める

例

<script type="module" src="module.js"></script>

参考文献

MDN JavaScript モジュール