以下のUdemyの講座を受講したので、モダンJavaScriptについて学んだ事をまとめる。
モダンJavaScriptの特徴
仮想DOM
DOMを直接操作せずに、仮想DOM上で変更点の差分を算出し、差分のみDOMに反映する。
パッケージマネージャ
npmなどのパッケージマネージャを使用。
依存関係の自動解決、import先が明確になる、パッケージの共有が簡単になるなどのメリットがある。
ECMAScript
JavaScriptの標準規格。
ES2015(ES6)で機能追加が多くあり、アロー関数や分割代入、スプレット構文などが利用可能になった。
モジュールバンドラ
開発時は複数のファイルでソースを管理し、本番用にビルドする際に依存関係の解決も含め、1つのファイルにまとめるためのもの。
Webpack、Viteなどがある。
コードの管理を容易にしつつ、パフォーマンスを向上できる。
トランスパイラ
新しいJavaScriptの記法を古い記法に変換してくれるもの。
Babel、SWCなどがある。
レガシーブラウザへの対応のため。
モダンJavaScriptの機能
知らなかった部分を中心にまとめる。
変数宣言
基本的にconstを使う。
-
var: 再宣言可能、上書可能 -
let: 再宣言不可、上書可能 -
const: 再宣言不可、上書不可、constで定義したオブジェクトはプロパティの変更が可能
テンプレート文字列
バッククオートで囲んだ文字列内で$(変数名)とすると、変数の値を文字列内で展開できる。
const name = "クロード"
console.log(`私の名前は${name}です。`)
→ 私の名前はクロードです。
アロー関数
関数の定義時は通常functionを使うが、アロー関数を使って定義をすることもできる。
完全な糖衣構文ではなく、functionを利用した場合と厳密には色々違うらしい。
// 通常
function func1(str) {
return str
}
console.log(func1("test"))
// アロー関数
const func2 = (str) => {
return str;
}
console.log(func2("test"))
// 引数が1つの場合は、引数の括弧を省略できる。
const func2 = str => {
return str;
}
// 関数の中身が単一処理の場合は、returnと波括弧を省略できる。
const func2 = (num1, num2) => num1 + num2;
分割代入
オブジェクトの内容を一度に変数に代入できる。
// オブジェクトの場合
const myProfile = {
name: "クロード"
age: 18
}
const {name, age} = myProfile
// 配列の場合
const myProfile2 = ["クロード", 18]
const [name, age] = myProfile
オブジェクトの省略記法
代入元と代入先が同じ名前の場合は、コロン以降を省略できる。
const name = "クロード"
const age = 18
// 通常
const myProfile = {
name: name,
age: age
}
// 省略記法
const myProfile = {
name,
age
}
スプレッド構文
...を配列の前に記載すると、配列の内容を展開できる。
// 配列の展開
const arr1 = [1, 2]
console.log(...arr1)
→ 1 2
// 引数の展開
const sumFunc = (num1, num2) => num1 + num2
sumFunc(...arr1)
// 残りをまとめる
const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2
// 配列のコピー
const arr4 = [1, 2]
const arr5 = [3, 4]
const arr6 = [..arr4, arr5]