はじめに
Udemyで紹介があったJavaScriptに関連する用語について、基本的な内容でもいざ説明しようとすると言葉に詰まることが多かったので、備忘録としてまとめていきます。
仮想DOM
昔のJavaScriptでは、DOMを .append() や .remove() で直接操作していたが、コードが複雑になったり、処理が重くなる。
そこで出てきたのが「仮想DOM」。
仮想DOMは、JavaScriptの中に作る“画面の仮想的なコピー”。本物のDOMを直接いじるのではなく、まず仮想DOMを更新して、変更差分だけをDOMに反映
→ 無駄な再描画を減らせ、処理も高速に！
ECMAScript
ECMAScript（エクマスクリプト）は、JavaScriptで「こういう書き方を標準にしよう！」というルールブックみたいなもの。
JavaScriptの歴史にはバージョンがあり、
- ES5 = 2014年頃の仕様
- ES6 = 2015年版（＝ES2015）
ES6はJavaScriptの転換期と言われており、let, const, アロー関数（=>）、分割代入など便利な書き方が使えるようになった。ECMAScriptは毎年更新されていて、ES2016、ES2017、…と続いている。
モジュールバンドラ
複数のファイルを1つにまとめるためのもの
例：webpack, vite
出来上がった背景：
JavaScriptは細かく分けて開発すると再利用性が上がる
→ でも本番環境ではファイルが分かれている必要ない
→ 読み込み数が多くなるからパフォーマンスが落ちる。。
→ 本番用にビルドするときに1つのファイルにまとめたら良さそう！
トランスパイラ
新しいJavaScriptの記法を古い記法に変換してくれるツール
例：Babel, SWC
出来上がった背景：
ES6で便利な機能増えた！
→ だが対応されていないブラウザがある。。
→ 開発は新しい記法にして、実行時に古い記法に変換したらいい！
以下のリンクからBabelの変換を試すことができます
👉 Babel REPL
SPA
SPAとは、シングルページという名が示すとおり、HTMLドキュメントは初回に一度だけロードされ、以降は画面遷移のたびに部分的に更新される仕組みのこと。
サーバー側で毎回HTMLを生成せずに、データのみを渡してクライアント側でDOMを操作してHTMLを書き換える。 各遷移で画面全体を再取得せず、変更があった部分だけを描画するため、表示が高速かつスムーズになる。