JavaScriptの超きほん 〜モジュールってなに?〜
モジュールとは
モジュールとは、肥大化したコードを機能ごとに分割して管理する仕組み
です。
モジュール化することで、メンテナンスが容易になり、再利用もしやすくなります。
モジュールシステムの種類
ESM
とCJS
の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
するモジュールを用意します。
export let sampleVal = 123;
export function sampleFn() {
console.log('Hello World!');
}
変数に名前をつけてexport
したら、
{ }をつかってimport
します。
import { sampleVal, SampleFn } from './module.js';
console.log(sampleVal); // => 123
sampleFn(); // => Hello World!
名前を変更して使用する場合
import
の際、変数名をas
で変更できます。
import { sampleVal as val, SampleFn as fn } from './module.js';
console.log(val); // => 123
fn(); // => Hello World!
変数を一括で読み込む場合
変数を一括でimport
する際は、*
をつかいます。
import * as module from './module.js';
console.log(module.sampleVal); // => 123
module.sampleFn(); // => Hello World!
デフォルトエクスポート
モジュールごとに1つまで、変数名なしで書き出しができます。
export default
をつかいます。
export default 'default text';
デフォルトエクスポートの場合は、{}は不要です。
また、as
なしで変数名を設定できます。
import defaultText from './module.js';
console.log(defaultText); // => default text
補足
さいごまでお読みいただき、ありがとうございます!
この記事はプログラミング初心者であるわたしが、毎日の学習ログとして書きました。
ご質問やご意見、間違いのご指摘などがあれば、気軽にコメントください。
また、平日にもくもく作業したり質問しあえる仲間も募集しています。
ご興味がある方はTwitterなどでご連絡くださいー!
これからもどうぞよろしくお願いします
Author And Source
この問題について(JavaScriptの超きほん 〜モジュールってなに?〜), 我々は、より多くの情報をここで見つけました https://qiita.com/yutaka_pg/items/d8cfa1b30ba51edd8532著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .