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


モジュールとは

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

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

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

ESMCJSの2種類があります。

  • 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!

デフォルトエクスポート

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

module.js
export default 'default text';

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

main.js
import defaultText from './module.js';

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

補足

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

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

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

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