JavaScriptの超きほん 〜モジュールってなに？〜

モジュールとは

モジュールとは、肥大化したコードを機能ごとに分割して管理する仕組みです。

モジュール化することで、メンテナンスが容易になり、再利用もしやすくなります。

モジュールシステムの種類

ESMとCJSの２種類があります。

• ESM: ECMAScript Modules
• CJS: CommonJS

ECMAScript Modules（EMS）

ECMAScriptの仕様にもとづくモジュールシステムです。
主にブラウザ上で使用します。

ファイルの読み込みはimport、
ファイルの書き出しはexportで記述します。

モジュールファイルの拡張子は.jsですが、
ESMとわかるよう明示的に.mjsとすることもできます。

CommonJS（CJS）

Node.js上に組み込まれているモジュールシステムです。

ファイルの読み込みはrequire、
ファイルの書き出しはexportsで記述します。

モジュールファイルの拡張子は.jsですが、
CJSとわかるよう明示的に.cjsとすることもできます。

ESMの例

次からはESMの記述方法を紹介します。
ESMでexportしたモジュールは、importでしか読み込めません。

（requireはつかえない）

名前付きエクスポート

exportするモジュールを用意します。

module.js

export let sampleVal = 123;

export function sampleFn() {
  console.log('Hello World!');
}

変数に名前をつけてexportしたら、
{ }をつかってimportします。

main.js

import { sampleVal, SampleFn } from './module.js';

console.log(sampleVal); // => 123
sampleFn(); // => Hello World!

名前を変更して使用する場合

importの際、変数名をasで変更できます。

main.js

import { sampleVal as val, SampleFn as fn } from './module.js';

console.log(val); // => 123
fn(); // => Hello World!

変数を一括で読み込む場合

変数を一括でimportする際は、*をつかいます。

main.js

import * as module from './module.js';

console.log(module.sampleVal); // => 123
module.sampleFn(); // => Hello World!

デフォルトエクスポート

モジュールごとに１つまで、変数名なしで書き出しができます。
export default をつかいます。

module.js

export default 'default text';

デフォルトエクスポートの場合は、{}は不要です。
また、asなしで変数名を設定できます。

main.js

import defaultText from './module.js';

console.log(defaultText); // => default text

補足

さいごまでお読みいただき、ありがとうございます！

この記事はプログラミング初心者であるわたしが、毎日の学習ログとして書きました。
ご質問やご意見、間違いのご指摘などがあれば、気軽にコメントください。

また、平日にもくもく作業したり質問しあえる仲間も募集しています。
ご興味がある方はTwitterなどでご連絡くださいー！

これからもどうぞよろしくお願いします