しまぶーさんJavaScript講座 要約
なにこれ
モダンJavaScript講座
しまぶーさんがyoutubeに投稿している動画が非常にわかりやすかったので、思い返せるために自分なりにまとめました。
JavaScript
JavaScriptさん 1995年に生まれる
ECMAScriptは、netscapeがJavaScriptを国際的な標準化団体（Ecma innternational）に提出した時に生まれた。
（豆知識：ES4以下はリリース順。ES5以上は年号表記。ES2015が正解）
ECMASCriptとは？
➡️JavaScriptの中核になる言語仕様。どの実行環境でも共通な動作のみが定義
実際はコンパイルする必要がある
ブラウザでモジュールを使うために模索した結果、コードを事前に変換が主流に
モジュールとは
ただの1つのファイル（モジュール）。相互に読み込んだりexportとimportを使用して機能をやり取りしたり、あるモジュールの関数を別のモジュールから呼び出せる。
スコープの概念あり。
Node.jsが2009年に開発。CommonJSのモジュールAPIに準拠
JavaScriptにはモジュールの仕様が複数存在してる。
パッケージとパッケージ管理システムとは
・パッケージとは
「package.json」で記述されたファイルやディレクトリ
➡️メリット
機能の細分化ができて、名前空間問題が解決できる
➡️共有したい！
・改めてパッケージとは
共有したい機能の単位
・パッケージ管理システムとは
・パッケージ管理システムがやってくれること
1．リポジトリの購読
2．パッケージのインストール・削除
3．依存関係の解決
パッケージに必要な別のパッケージを自動的にインストールできる
「package-lock.json」のこと。「node_modules」に依存関係が入ってる。
expressをインストールする時に必要な依存関係のものを一瞬でDLできる
例）jQueryUIを使うにはjQueryが必要で、先にjQueryを読まないとエラーを吐く
4．設定管理
設定書いたら1，2，3を自動で行える。手動の手間が省けてチームで環境を揃えられる
Bunbleとは
1．開発時はCommonJSモジュールで開発
2．モジュールの依存関係を解決して1ファイルに変換（これがバンドル）
3．いつも通りscriptタグで読み込む
Browserifyとは
CommonJSで書かれたものをブラウザ向けにバンドルするツール。require文を使える。そのおかげでNode.jsのパッケージが使えるようになった➡️npmが主流へ
CJS形式モジュールをバンドルするよ。
webpackが2012年に降臨爆誕
そして覇権を取る。環境最強ですね。
cjsとかブラウザで使えないファイルを何でもバンドルできるのがwebpack。
codesplittingを使ってチャンク分割している（難しいからスルー）
ESmodule降臨爆誕。
独自仕様だったので、共通の仕様が欲しかった。
んで、ES2015からJavaScriptの言語仕様としてモジュールの仕組みが導入される。
簡単に言うと、requireからimportになる。
wepack誕生までの流れまとめ
モジュールバンドラーが流行る（特にwebpack）➡️CJSやESM形式でモジュールを使ってコード掛けるから
CJS主流だったnpmクライアント開発で使える＝パッケージ管理システムも使える
コンパイルとは
コンパイルを使うと
1．開発時にはブラウザで動かないけど、便利な機能を使ってコードを書ける
2．書いたコードをブラウザで動くように変換➡️いつもどおり読み込む
Babel(6to5)の誕生（元々は6to5だったけど、Babelに改名された）
wepackとbabelを一緒に使える。
元々はES2015の新機能（letとか）が使えなかったけど、babelのおかげで使えるようになった？
コンパイルの可能性
コンパイルが当たり前になって、便利なパッケージが流行りだす
React(.jsx)・Vue(.vue)・TypeScript(.ts)
モダンなJS環境になるために
コードを事前に変換が主流になった。モジュールを使えたり依存関係を解決でき、ES2015仕様が使える。パラダイムシフト
覚えるべきもの
Node.js パッケージ管理システム npm(package.json) 事前変換（Bundle, Compile)
webpack babel ES module ES2015 React Vue TypeScript