こちらの記事は以下の書籍を参考に執筆しました

入門JavaScriptプログラミング

モジュールとは

最も基本的なものは独自のスコープとルールを持つ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モードになる

【javascript】モジュール