モジュールとは

コードを一つの機能レベルに分割して影響範囲を狭めたもの
モジュールがなければ一つのJSファイル機能をまとめるため、
数千行のコードを書くことになる。
→ 人的ミスで同じ名前を使ってしまうことがあるかもしれない。どこでエラーが起きているのか探しずらい。などの問題が起きる。
モジュールの例・・・

transit.js(トランジション機能)
showMessage.js （メッセージを表示する機能）
addSarary.js(給料の和を計算する機能)

※モジュール、プロパティ(データ)/メソッド（機能）、クラス、パッケージの関係性
（イメージ）
プロパティ/メソッドの集合がクラス（クラスにメソッドが一つの時もある）
クラスの集合がモジュール（モジュールにクラスが一つの時もある）
モジュールの集合がパッケージ（稀にモジュールにパッケージが一つの時もある）

Common JS形式と ES Modules形式(一般的)

背景

サーバーサイドでモジュール化したJSはRequireを使って読み込む（CommonJS形式）
かつては、サーバーサイドのみモジュールを使用できていたが、フロントエンドではモジュールが使えなかった。
そこで誕生したのが、AMD(Asynchronous Module Definition)やBower。しかし、これらには欠点が多かった。
そうして、コードを事前時ブラウザ向けに変換するBandle（モジュールバンドラー）が誕生。そうして、モジュールがフロントエンドでも使えるようになった。現在はbandleの上位互換のWebpackが使われている。

モジュールバンドラーとは

複数のJavascriptファイルの依存関係を解析して、事前に一つのファイルとしてまとめてくれる（バンドル）機能。開発はファイルを分けて行い、本番用にビルドするときに１つのファイルにする。

Webpackの説明

モジュールバンドラー
たくさんのファイルを少数のファイルに変換する。
ブラウザでは動かない拡張子を変換する。
CommonJS形式（一般的に使用しているのはESModule形式）や、
scssをcssに変換するsass など開発に便利なファイルをWebpackがバンドルするためブラウザで閲覧できる。
OO.js,△△.sass,...→（webpackでバンドル）→bandle.js
（余談）
変更するたびに npx webpack とコマンドを叩くのは面倒。そこで
変換すると自動的にBandle.jsを更新してくれるのが、Webpack-dev-server
これを使うと開発体験が向上する

ESModules 形式の概要

ES2015仕様にて策定された
JSファイルから別のJSファイルを読み込む仕組み
Node.jsでは、他のJSファイルの読み込みはCommonJS形式の仕様に沿った方法で、実現していたが、ES Modules形式はブラウザでもサーバーでも対応したモジュールシステム。
＜目的＞
名前空間（スコープ）を解決するため
(イメージ）プログラミングの世界における「名前の影響範囲はここまで」ということを決める仕様

＜今までの課題＞
JSは名前空間が１つなので、大規模開発などでコードが何千、何万行にもなったときに関数名や変数名が被ってしまうという問題

＜解決方法＞
ES moduleを使用することによって、名前空間（スコープ）を分割することができるようになり、命名が被ってしまってエラーが出るということを考えることなく、コードを書けるようになった

named importとnamed export

//変数名をexport側で宣言する
export const answer = 18;
//１つのモジュールから複数の値をいくつもexportできる
export { answer, obj };
//import するときに { } を使用する
import { answer, obj, greet, bye } from './sub.js';

エイリアス（別名）

//named exportsで公開される変数名は as を使ってimport側で変更することができる。
import { ans as myAnswer, obj } from "./sub.js";
//export側でもエイリアスは使える。
export { answer as ans, obj };

default import ,default export

//変数名をimport側で宣言する
import greet from './greet.js';
//default exportsで公開できる値は１つのモジュール（ファイル）につき１つだけである。
//export側で変数名を宣言していないので、区別がつかないため

//default exports で公開した値は、{ } を使用せず、剥き出しで記述する
export default 'greet';

基本的にはnamed import ,named export を使用する

自動インポート（エディタの補完機能）が働く
変数名の固定化ができる
リファクタリングがしやすい
以上の理由からnamed import named exportを使用する

JavaScript超基本語句・・モジュール