JavaScriptについて

JavaScriptについてのまとめです。

ECMAScript
どのブラウザでも動作する標準のJavaScript仕様

クライアントサイドJavaScript

フロントエンドを担当するブラウザで動作するJS。window（ブラウザ）、DOM、イベント、HTTPなどを操作する。静的ファイルとしてサーバー（webサーバー）からクライアントにレスポンスして、ブラウザがそれを読み込んで動作する。

サーバーサイドJavaScript

バックエンドを担当し、サーバーで動作するJS。PHP, Ruby, Javaなどと同じで、専用の動作環境が必要。
それがNode.jsやDeno。クライアントサイドJSでは操作できたものがサーバサイドでは操作できないものが多く、逆もある。

JSの過去からの変化

1つのjsファイルに全てのコードを書いていた。
可読性が悪いため、ファイルを分割した。
↓
ファイルが複数になったので、ブラウザがjsファイルを読み込む順番を考える必要が出てきた。
a, b, cのファイルがあった場合、b, cはaを起点にコードを書いているので、aを変更したらバグ、ファイルの読み込み順番を変更したらバグなど（依存関係の問題）、名前空間も1つしかないなど、考えることが非常に多くなってしまった。
↓

モジュール

ここでサーバーサイドJSが登場。以下はサーバーサイド（Node.jsでの）で動くJSの話
名前空間の解決をするためにモジュールという概念が登場。コードを別のjsファイルで使わせたい時はexports, 読み込みたい時はrequireを使ってファイル同士の連携をできるようにした。これを commonJS 形式という。こうしたことで名前空間の問題を解決した。（ただしこの動作はサーバーサイドのJSの話で、この時点ではブラウザでモジュールは使えないので、クライアントサイドでは上記の問題は残ったまま）
↓

package

モジュールにより、ファイル分割ができるようになったので機能の細分化ができるようになった。さらにこれらを組み合わせて便利なことができるようになった。これらのモジュールのまとめたpackageというものになる。packageが出ると、これを管理したい需要が出てくる。このために必要なものがpackage管理システムである。
↓

npm

package管理システムのnpmが登場する。node.js package management system(npm)である。これはpackageのバージョン管理、package同士の依存関係の解決、共有（配布）、などができる。
この時点でもクライアントサイドでは旧態依然のままなので、node.jsの恩恵は受けられないままである。
↓

サーバ側のコードをブラウザで動作するように変換する（Bundle）

ここで考え方を変えて、ブラウザでモジュールを使えるようにするのではなく、サーバーサイドjsをブラウザのランタイムで動作する形に変換してから、ブラウザに渡すことになった。Bundleという概念である。
サーバーサイドjsがブラウザで動作するまでの流れ

1. コードを書く時はCommonJS形式（Node.js）で書く←ここで名前空間の問題は解決している
2. Bundleツールで1で書いたjsファイル（モジュール）を1つのjsファイル（ブラウザが実行可能な）に変換する←ここでモジュール間の依存関係を解決する（現在ではjsファイルだけではなく、cssや画像などもバンドルする）
3. あとは従来通り、<script>でjsファイルを読み込み実行する

↓

webpackの登場

上記のBundlerはBrowserifyというツールで、その後にwebpackというツールが出てきた。これはjsファイル意外のデータ、css,sass,画像なども適切なファイルに変換、バンドルできるというものだった（これにはloaderというものを使った）。さらに複数のjsファイルを1つにすることは、とても大きなファイルサイズになりがちだったため、そのファイルを一度に読み込もうとするととても時間がかかってしまう。それを解決するためにファイル分割やチャンク、非同期ロードという概念が出てきて、ファイル読み込みの時間短縮ができるようになった。

↓

ESModulesの登場

これまでCommonJS形式でJavaScriptを書いてきたが、これはECMascriptに則ったものではなくJavaScript独自の仕様だった。そこからJavaScript自体の仕様としてモジュールの機能を追加した方がいいという流れが出てきて、ついに言語使用（ECMascript）としてモジュールが使える「ESModules」が誕生した。ただこれはどのブラウザでも使えるわけではなかったため（特にIE）以前Bundler（この時点で正確にはModule Bundlerという）が必要だった。

↓

Webpackの進化

ESModulesの登場によりこれまでのCommonJS形式ではなくESModules形式で書きたい需要が高まった。それに応えるようにwebpackがloaderなしでもESModulesを読み込めるようになった。

（余談）現在はブラウザでもESModulesが標準で使えるようになっている

webpackを通さなくてもESModulesが使えるようになっているが、それ以外の所でまだwebpackが必要な場面があるのでまだ当分はwebpackは使われると思う。

↓

JavaScriptも進化していく Babel

webpackのおかげでブラウザでもモジュールが使えるようになったが（正確にはESModulesをブラウザで実行できるjsファイルに変換）、JavaScriptの機能もどんどん進化して新しい機能が追加されていく。それらもブラウザで使えたら便利だがそうもいかない状況だった。jsの機能追加にブラウザが追いついてない状況。
これを解決するために最新のJavaScritpをブラウザでも読み込める形にコンパイルするツールが登場。それがBabelである。これはwebpackと一緒に使える。この段階でJavaScriptの周りでできることは
1.