CodeSandbox
Web上で利用するブラウザIDE、いわゆる統合開発環境で、利用出来る主な言語はjavascript(node.js)です。 統合開発環境という言葉に聞き覚えが無い方は、シンプルにeclipseやNetBeans(エディタ + 実行環境)の事を指していると思って頂いて差し支えありません。
vanilla・・・ライブラリー等を何も入れていないJavaScript
仮想DOM
DOM
HTMLなどを解釈し、ツリー構造で表現したもの
仮想DOM
JavaScriptのオブジェクトで仮想的に作られたDOM
いきなりDOMを操作するのではなく、JS上で仮想DOMを操作し、
差分を出してから、実際にDOMに反映させます。
npm / yarn等のパッケージマネージャーの意義
初期JavaScript
１つのJSファイルに全ての処理を記述していた
・処理が複雑になるにつれてコードがカオス化
・コードの再利用ができない
↓
少し改善したJavaScript
他のJSファイルを読み込んで使っていった
・コードの再利用、共通化はできるようになった
・読み込み順を意識しないとエラーが起きる
・何がどこから読み込まれているかが分からない
↓
モダンJavaScript
npm, yarn等のパッケージマネージャーを使用
・内部でNode.jsが動いている
・依存関係を勝手に解決してくれる
・import先が明示的に分かる
・世界中で公開されているパッケージをコマンド１つで利用可能
・チーム内での共有が簡単になった
npm
パッケージのレジストリ
package.json
設計書的な役割
package-lock.json / yarn.lock
依存関係、バージョンの解決
node_modules
・各モジュールの実態
・JSファイルなど、サイズが膨大
・GitHubにはあげない
ECMAScript
・JavaScriptの標準規格
・毎年１回発表される
・ES2014 = ES5, ES2015 = ES6
・ES20xxの呼び方を一般化しようという動き
・ES2015で多くの機能追加があり、近代JSの転換期と言える
モジュールバンドラー
複数のJS（css/image）ファイルを１つにまとめるためのもの
経緯/概念
・jsは細かく分けて開発した方がいい
・再利用性も開発効率も上がる
・でも本番環境で分かれてる必要はない
・読み込み数も増えてパフォーマンス良くなさそう
・本番用にビルドするときに１つのファイルにまとめよう
・依存関係もいい感じにまとめてくれるようにしよう
トランスパイラ
新しいJavaScriptの記法を古い記法に変換してくれる
経緯/概念
・ES2015で便利な便利な機能が増えた
・どんどん使おう
・でもまだ対応していないブラウザがたくさんある
・じゃあ、開発は新しい記法でやって実行時に古い記法に変換されるようにしよう
SPA（Single Page Application）
HTMLは１つのみで、JavaScriptで画面を書き換える
モダンJavaScriptはSPAが基本
メリット
・ページ遷移毎のチラつきがなくなる
・表示速度のアップによるユーザー体験向上
・コンポーネント分割が容易になることでの開発効率アップ