⚡️

【保存版】JS/TSの省略記法と演算子完全ガイド：使用頻度評価付き

株式会社くりぼー

2024/08/07に公開

JavaScriptとTypeScriptには、コードをより簡潔に書くための様々な省略記法や演算子があります。これらを適切に使用することで、より読みやすく効率的なコードを書くことができます。以下に主要な演算子と構文をまとめました。各項目には、実際の開発での使用頻度を5段階で評価しています。

オプショナルチェイニング演算子 (`?.`)

使用頻度: ⭐⭐⭐⭐⭐

オプショナルチェイニング演算子は、プロパティへの安全なアクセスを可能にします。

const user = { profile: { name: "太郎" } };

// 安全にネストされたプロパティにアクセス
const name = user?.profile?.name;
console.log(name); // "太郎"

// 存在しないプロパティにアクセスしてもエラーにならない
const age = user?.profile?.age;
console.log(age); // undefined

// メソッド呼び出しにも使用可能
const result = user?.getData?.();

Nullish合体演算子 (`??`)

使用頻度: ⭐⭐⭐⭐⭐

Nullish合体演算子は、左辺がnullまたはundefinedの場合にのみ右辺の値を返します。

const config = { timeout: 0, retries: null, defaultValue: "" };

const timeout = config.timeout ?? 1000;
console.log(timeout); // 0 (0は有効な値として扱われる)

const retries = config.retries ?? 3;
console.log(retries); // 3 (nullなので右辺が使用される)

const defaultValue = config.defaultValue ?? "デフォルト";
console.log(defaultValue); // "" (空文字列は有効な値として扱われる)

論理OR演算子 (`||`)

使用頻度: ⭐⭐⭐⭐

論理OR演算子は、左辺が偽値（falsy）の場合に右辺の値を返します。

const name = "" || "名無し";
console.log(name); // "名無し"

const count = 0 || 10;
console.log(count); // 10

const userInput = null || "デフォルト値";
console.log(userInput); // "デフォルト値"

const value = false || true;
console.log(value); // true

論理AND代入 (`&&=`)

使用頻度: ⭐⭐

論理AND代入は、左辺が真の場合にのみ右辺の値を代入します。

// 例1: 左辺がtruthyな場合
let x = 5;
x &&= 10;
console.log(x); // 出力: 10

// 例2: 左辺がfalsyな場合
let y = 0;
y &&= 20;
console.log(y); // 出力: 0

論理OR代入 (`||=`)

使用頻度: ⭐⭐⭐

論理OR代入は、左辺が偽の場合にのみ右辺の値を代入します。

let user = { name: "", role: "guest" };

// nameが空文字列（falsy）なので、デフォルト値が設定される
user.name ||= "名無し";
console.log(user.name); // "名無し"

// roleは空でないので、変更されない
user.role ||= "ユーザー";
console.log(user.role); // "guest"

Nullish合体代入 (`??=`)

使用頻度: ⭐⭐

Nullish合体代入は、左辺がnullまたはundefinedの場合にのみ右辺の値を代入します。

let settings = { theme: null, fontSize: 0, language: undefined };

// nullなので右辺が代入される
settings.theme ??= "dark";
console.log(settings.theme); // "dark"

// 0は有効な値なので代入されない
settings.fontSize ??= 16;
console.log(settings.fontSize); // 0

// undefinedなので右辺が代入される
settings.language ??= "ja";
console.log(settings.language); // "ja"

二重否定 (`!!`)

使用頻度: ⭐⭐⭐

二重否定は、値をブール型に変換します。

const value1 = "OpenAI";
const isTruthy1 = !!value1;
console.log(isTruthy1); // true

const value2 = 0;
const isTruthy2 = !!value2;
console.log(isTruthy2); // false

const value3 = null;
const isTruthy3 = !!value3;
console.log(isTruthy3); // false

// オブジェクトのプロパティの存在チェック
const obj = { key: "value" };
const hasKey = !!"key" in obj;
console.log(hasKey); // true