【javascript】ECMAScriptモジュールを✅

普段のブログは書けるのにアドベントカレンダーになった瞬間書けなくなるのはなぜなのかと悩んでいる23期中野昴です。

今回はECMAScriptモジュールに関して学習していきたいと思います。

ECMAScriptモジュールとは

ECMAScriptモジュールは、ES2015で導入されたJavaScriptファイルをモジュール化する言語標準の機能を指す。

ES6とも呼ばれている。exportとimport文が用意されている。

ECMAScriptモジュールの構文

ECMAScriptモジュールは、exportとimport文を使い、別モジュールに変数や関数をエクスポートしたり、別モジュールからエクスポートされてきた変数や関数をインポートすることができる。

そして、インポートとエクスポートはそれぞれに 名前つき と デフォルト という2種類の方法が存在している。

名前つきエクスポート／インポート

モジュールごとに複数の変数や関数などをエクスポートすることができる。

export文のあとに続けて{}を書き、その中にエクスポートする変数を入れることで、宣言済みの変数を名前つきエクスポートできる。

const sake = "highball";
// 宣言済みのオブジェクトを名前つきエクスポートする
export { sake };

また、名前つきエクスポートではexport文を宣言の前につけると、宣言と同時に名前つきエクスポートできる。

// bar.fooでアクセスが可能
export function bar() {
const sake = "dassay";
 };

名前つきインポートは、指定したモジュールから名前を指定して選択的にインポートできる。

export-module.jsでエクスポートした変数(sake)、関数(bar)をimport-exported-module.jsでインポートしている。

export-module.js

名前付エクスポート

export const sake = "highball";
export function bar() {

return "NihonshuBar" 
}

import-exported-module.js

名前付インポート

// 名前つきエクスポートされたsakeとbarをインポートする
import { sake, bar }from "./export-module.js";
console.log(sake); // => "highball"
console.log(bar); // => "NihonshuBar"

名前つきエクスポート／インポートのエイリアス

exportのあとのブロック内で、変数もしくは関数をasを使って独自の名前をつけることができる。

named-export-alias.js

const internalFoo = "どこにも行かないで";
// internalFoo変数をfooとして名前つきエクスポートする
export { internalFoo as foo };

インポートでも同様に、asのあとに別名をつけることができる。

named-import-alias.js

// fooとして名前つきエクスポートされた変数をmyFooとしてインポートする
import { foo as myBoo }from "./named-export-alias.js";
console.log(myBoo); // => "どこにも行かない"

デフォルトエクスポート／インポート

モジュールごとに1つしかエクスポートできない特殊なエクスポート。

export default文で、すでに定義された変数をデフォルトエクスポートしている。

default-export.js

const sake = "sake";
// foo変数の値をデフォルトエクスポートする
export default sake;

import文のあとに任意の名前（なんでもいい）をつけることで、デフォルトエクスポートをインポートできる。

sake-export.js

export default {
    smuggle: "sake"
};

下記のように宣言と同時に関数をデフォルトエクスポートすることもできる


export default function() {}

sake-import.js

// デフォルトエクスポートをmyAlcoholとしてインポートする
import myAlcohol from "./sake-export.js";
console.log(myAlcohol); // => { smuggle: "sake" }

デフォルトエクスポートは、defaultという固有の名前による名前つきエクスポートと同じものになるため、名前つきエクスポートでas defaultとエイリアスをつけることでデフォルトエクスポートすることもできる。

sake-export-alias.js

const sake = "sake";
// foo変数の値をデフォルトエクスポートする
export { sake as default };

名前つきインポートでdefaultを指定するとデフォルトインポートすることができる。注意点として、この方法では必ずas構文を使ってエイリアスをつける必要がある。

default-import-alias.js

// デフォルトエクスポートをmyAlcoholとしてインポートする
import {default as myAlcohol }from "./sake-export-alias.js";
console.log(myAlcohol); // => { sake: "sake" }

名前つきインポートとデフォルトインポートの構文は次のように2つの構文をカンマでつなげ流ことで同時に記述することができる。

default-import-with-named.js

// myAlcoholとしてデフォルトインポートし、
// fooを名前つきインポートする
import myAlcohol, { sake } from "./my-module.js";
console.log(sake); // => "sake"
console.log(myAlcohol); // => { sake: "sake" }

Vueでなんとなしに使っていたexport default{}には、デフォルトエクスポート文と言う名前があったんですね。学習しておいてよかったです。