JavaScriptのモジュール

小さな部品をして扱える

モジュールで小さな部品化できるので、機能毎に保守がしやすくなる。
モジュール単位をどの様に分ければ良いかはある程度の経験値が必要かもしれません。これはオブジェクト指向プログラミングで、クラス単位を決めることと同様です。

moduleはexportとimportで

作成したmoduleはexportを記述して、利用する箇所でimportします。

importを行うJavaScriptの記述を読み込むHTMLのscriptタグにはtype="module"を指定します。
このタイプはHTMLの読み込みと準備ができたあとに有効化されます。よってHTMLの最後に書かなくても問題ありません。
しかしバンドルして利用するのならmoduleでは無い状態にトランスパイルされますので、このscriptを読み込むscriptタグはHTMLの最後に書くのが適切です。

利点は欠点、でもバンドルすれば欠点では無い。

小さなmoduleはメンテナンス性が良い、しかし沢山のモジュールファイルのimportは読み込みオーバーヘッドが大きくなります。
しかし、実務ではWebpack等でバンドルしますので欠点ではありません。

export

exportモジュールをgreetings.jsに以下の通り記述

export class Greetings {
	constructor() {
	}
	action(name) {
		alert(`Nice to meet you. Mr. ${name}.`);
	}
	reaction(name) {
		alert(`Nice to meet YOU too, Mr. ${user}.`);
	}
}

import

exportをimportするJavaScriptファイルをindex.jsとするなら、HTMLで

<script src="./index.js" tyle="module"></script>

importしているコード

import {Greetings} from './greetings.js';
const greetings = new Greetings();
greetings.action('Williams'); // Nice to meet you. Mr. Williams.
greetings.reaction('Jones'); // Nice to meet YOU too. Mr. Jones.

export

greetings.jsで以下の記述

export function action(user) {
  alert(`Nice to meet you. Mr.${user}.`);
}
export function reaction(user) {
  alert(`Nice to meet YOU too. Mr.${user}.`);
}

import

exportをimportするJavaScriptファイルをindex.jsとするなら、HTMLで

<script src="./index.js" tyle="module"></script>

exportしたfunctionを個別にimportするなら

import {action, reaction} from './greetings.js';
action('Williams');
reaction('Jones');

exportしたfunctionを全部別名でimportするなら

import * as greet from './greetings.js';
greet.action('Williams');
greet.reaction('Jones');

宣言の前に書く

export [default] class|function|variable ～

スタンドアロン記述

export {x [as y], ･･･};

再エクスポート

export {x [as y], ...} from "モジュール.js"
export * from "モジュール.js"　※デフォルトは再エクスポートされない
export {default [as y]} from "モジュール.js" ※デフォルトの再エクスポート

モジュールから名前付きインポート:

import {x [as y], ...} from "モジュール.js"

デフォルト インポート:

import x from "モジュール.js"

import {default as x} from "モジュール.js"

すべてインポート:

import * as obj from "モジュール.js"

コードの前後に置くことができる。

import/exportはコードの前後に置くことができる。

～コード～
export {x [as y], ･･･};

eexport {x [as y], ･･･};
～コード～

import/exportは {}の中には書けない。

以下の記述はNG

if (condition) {
	import {action} from "モジュール.js";
}

記述

classa.jsの記述例

excport default class ClassA() {	//defaultはモジュールファイル中に一つなのでclassは省略可
  ～処理記述～;
}

class ClassA() {
  ～処理記述～;
}
export {ClassA as default};

上記のimport

import {default as ClassA} from './classa.js'

import * as mod from './classa.js'
mod.action('Williams');
mod.reaction('Jones');