こちらの記事は以下の書籍を参考に執筆しました
#モジュールとは
- 最も基本的なものは独自のスコープとルールを持つ1つのjavascriptファイル
- モジュールはオブジェクトではない
- モジュールにデータ型はない
- モジュールを変数に代入できない
- コードの分割、カプセル化、構成をするためのツール
モジュールを利用すれば必要なものをインポートし、認知不可を抑え、メンテを楽にしてくれる。
#モジュールのルール
javascriptのルールはモジュールのないでは少し違ってくる。
- 常にScriptモードで実行されるため、use scriptを追加する必要はない。
- thisがルートコンテキストで何を示すか
#####thisがルートコンテキストで何を示すか
ES2015のモジュールではルートレベルのthisはundefinedになる。
var obj = {
foo() {
return this;
}
}
function bar() {
return this;
}
obj.foo(); //obj
bar(); //undefined
console.log(this) //undefined
モジュールは変数がグローバル変数として定義されることはない。
しかしモジュール内部でグローバルオブジェクトに値を割り当てることは可能。
とはいえモジュールのグローバルの設定は悪い作法。
#モジュールを作成
##デフォルトエクスポート
グローバル関数はこう書くかもしれない
window.logState = functionn(stat) {
//処理
}
しかしモジュールではこう書く
export default function logState(start){
//処理
}
関数の先頭にexportをつけるとこのモジュールがlogState関数をいエクスポートするようになる。このエクスポートのことをデフォルトエクスポートという。
##エクスポートしたくない関数があるとき
モジュールを使用せず、ヘルパー関数をエクスポートしたくないとしたらこう書くかもしれない。
{
function statsHellper() {
//処理
}
window.logState = functionn(stat) {
//処理
}
}
しかしモジュールを使うならすべてのものが独自のスコープに含まれているため、値が漏れることはない。
function statsHelper() {
//処理
}
export default function logState(start) {
//処理
}
##名前付きエクスポート
モジュールを関数として考えるとexport defaultはreturnに相当する。
関数から返せる値は1つであるようにモジュールのデフォルトエクスポートは1つだけ。
しかしデフォルトエクスポートが1つだけなのであって、モジュールのエクスポートが1つに制限されるわけではない。
デフォルト以外は名前付きエクスポートになる。
名前付きは単にdefaltが消えただけ。
export function logState(start) {
//処理
}
名前は関数名になる。
###名前付きエクスポートのもう一つの構文
名前付きエクスポートにはもう一つ構文がある。
function logState(num){
//処理
}
export{logState}
構文はこう
export{<バインディング1>,<バインディング2>,...}
好きなだけ指定することもできる。
##名前を変えてエクスポート
名前を変えてエクスポートもできる
内部でformattedCurrentusernameをusernameでエクスポートするにはこうする。
export { formattedCurrentUsername as username}
##変数宣言でも関数同様
変数宣言でも件数と同じことが当てはまる。
export let one = 1//oneという名前でエクスポート
export const two = 2//twoという名前でエクスポート
export 3//無効：名前を推測できない
##exportはトップレベルに配置する
条件付きで値をエクスポートはできない。
トップレベルとはファイル内のコードブロックの本体、if文、関数ではなく、コードブロックのルートを意味する。
//トップレベルなので有効
export const number = num => //処理
//トップレベルでない
if () {
export const number = num => //処理
}
//トップレベルでない
function
export () {
export const number = num => //処理
}
#javascriptファイルはどのタイミングでモジュールになるか
基本的に<script>のtype='module'とするとそのファイルをモジュールとして実行するようになる。
##別の方法
Node.jsには<script>タグを使用しないため上の方法では使えない。
別の方法としてこのようなものがある。
export {}
/* モジュールの残りの部分 */
これはオブジェクトのエクスポートではない。
これは本来なら{}の間にエクスポートする名前を指定する名前付きエクスポート構文。
何もエクスポートされないが、これがあることでこのファイルはモジュールと認識される。
#まとめ
- 宣言をエクスポートするときは、名前付きエクスポートが作成される。
- 名前付きエクスポートは別名も指定できる。
- 名前付きはいくつでもいいが、デフォルトエクスポートは1つだけ
- exportはトップレベルで記述
- ルートレベルではthisはundefinedになる
- モジュールはデフォルトでScriptモードになる