モダンJavaScriptとは？
主な特徴
-
React、Vue、Angular、Riotなどの仮想DOMを用いるライブラリやフレームワークを使用
-
npmやyarnなどのパッケージマネージャーを使用
-
主にES2015以降の記法を使用
-
webpackなどのモジュールバンドラーを使用
-
Babelなどのトランスパイラを使用
-
SPA（Single Page Application）が基本
仮想DOMとは？
従来のDOMと仮想DOM
-
従来のDOM: DOM（Document Object Model）はHTMLなどを解釈し、ページの要素を木構造で表現する。従来のDOM操作は、バニラJavaScriptやjQueryを使用して直接操作をしていた。そのため、画面のレンダリングコストが高まり、パフォーマンスの問題が発生していた。
-
仮想DOM: 仮想DOMは、JavaScript内でDOMの操作を行い、変更前と変更後の仮想DOMの差分を計算し、最小限のDOM更新を行う方法。これにより、UIの更新が効率的に行える。
npm/yarnとは？
パッケージ管理と依存関係解決
-
npmとyarnは、パッケージ管理と読み込み順などの依存関係を解決のためのツール。外部ライブラリやモジュールの管理が容易になる。
-
package.jsonは、設計書（いじってもいい）。
-
package-lock.jsonは、依存関係やバージョンの解決。自動生成（基本的にいじらない）。
-
node_modulesは、実際のモジュールファイルが格納。
ECMAScriptとは？
JavaScriptのルール
- ECMAScriptはJavaScriptの仕様を定めるルール。
- ES2015以降に主に追加されたものは以下
- letやconstの変数宣言
- アロー関数
- クラス構文
- 分割代入
- テンプレート文字列
- スプレッド構文
- Promise
- etc...
モジュールバンドラーとは？
JavaScriptファイルのバンドル
- モジュールバンドラーは、開発時に複数のJavaScriptファイルを一つにまとめるツール。これにより、開発効率が向上し、本番環境でのパフォーマンスも向上する。
トランスパイラとは？
JavaScript記法の変換
- トランスパイラは、新しいJavaScript記法を古いバージョンに変換するツール。これにより、新しい記法を使用しても、古いブラウザや環境でも動作するコードを生成できる。
SPAとは？
単一ページアプリケーション
- SPA（Single Page Application）は、一つのHTMLページ内で画面遷移を行う方法。これにより、表示速度が高速化し、ユーザー体験が向上する。また、コンポーネントベースの開発が容易になる。