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
これらの省略記法を適切に使用することで、コードの可読性と保守性を向上させることができます。ただし、チームの coding standards やプロジェクトの要件に合わせて適切に選択することが重要です。
Discussion
よく使う記法と演算子をまとめてくださってありがとうございます🙏
論理AND代入 (&&=)のところだけサンプルコードが間違っているかもしれないので見直してみてください💦
ご拝読、ご指摘ありがとうございます。
大変失礼しました。
正しいサンプルコードに修正しております。