よく使うJavaScriptのモダンな記法

テンプレートリテラル（`${}`）

文字列に変数や式を埋め込む

const name = "Alice";
console.log(`Hello, ${name}!`); // "Hello, Alice!"

デフォルト引数

関数の引数が未指定の場合、デフォルト値を設定する

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`); // "Hello, Guest!"
}

分割代入

オブジェクトや配列から特定の値を簡単に取り出す

オブジェクト

const { name, age } = { name: "Alice", age: 30 };
console.log(name, age); // Alice 30

配列

const [first, , third] = [1, 2, 3];　// 2番目の要素（2）をスキップして first と third を取得
console.log(first, third); // 1 3

アロー関数

簡潔な関数の記述

const add = (a, b) => a + b;
console.log(add(1, 2)); // 3

オプショナルチェイニング（?.）

オブジェクトのプロパティが存在しなくてもエラーにならない

const user = { name: "Alice", address: { city: "Tokyo" } };
console.log(user?.address?.city); // "Tokyo"
console.log(user?.contact?.phone); // undefined

ヌール合体演算子（??）

nullまたはundefinedの場合にデフォルト値を設定する。0やfalseはそのまま残る。

console.log(null ?? "default"); // "default"
console.log(undefined ?? "default"); // "default"
console.log(0 ?? "default"); // 0
console.log(false ?? "default"); // false

スプレッド演算子（...）

配列、オブジェクト、文字列を展開、結合する

オブジェクト

const obj = { age: 30, city: "Tokyo" };
const objCopy = { name: "Alice", ...obj };
console.log(objCopy); // {name: 'Alice', age: 30, city: 'Tokyo'}

配列

const arr = [1, ...[2, 3], 4];
console.log(arr); // [1, 2, 3, 4]

文字列

const name = "Alice";
console.log(...name); // A l i c e

関数の可変長引数

引数の個数が不定の関数を作成する

const printNumbers = (...num) => {
  console.log(num); // [1, 2, 3, 4]
};
printNumbers(1, 2, 3, 4);

プロパティ省略記法

オブジェクトのプロパティ名と変数名が同じ場合、省略して記述できる

const name = "Alice";
const age = 30;
const person = { name, age };
console.log(person); // {name: 'Alice', age: 30}

論理代入演算子

変数が特定の条件を満たす場合に、値を代入する

左辺がfalsyの場合、右辺を代入（||=）

let username = null;
username ||= "Guest";
console.log(username); // Guest

左辺がtruthyの場合、右辺を代入（&&=）

let isActive = true;
isActive &&= false;
console.log(isActive); // false

左辺がnullまたはundefinedの場合、右辺を代入（??=）

let theme;
theme ??= "light"; 
console.log(theme);  // light

三項演算子（? :）

条件に応じて異なる値を返す

const isLoggedIn = true;
const status = isLoggedIn ? "ログイン中" : "未ログイン";
console.log(status); // "ログイン中"