オプションチェイニングとNull合体演算子をマスターして、安全なコードを書こう

JavaScriptにおけるNull合体演算子（??）

従来の解決策

従来、nullまたはundefinedの値を処理するには、以下の方法がありました。

// 変数にデフォルト値を設定
const name = user?.name ?? "名無し";

// 三項演算子を使用
const age = user?.age ? user.age : -1;

// if文を使用
if (user && user.address) {
  const city = user.address.city;
} else {
  const city = "不明";
}

これらの方法は有効ですが、冗長でコードの見通しが悪くなります。

Null合体演算子の登場

そこで、ES2020で導入されたのがnull合体演算子（??）です。この演算子は、左側の式がnullまたはundefinedの場合、右側の式を返すというシンプルなものです。

// null合体演算子を使用
const name = user?.name ?? "名無し"; // user.nameがnullまたはundefinedなら"名無し"を返す

// オプションチェイニングと組み合わせて使用
const city = user?.address?.city ?? "不明"; // user.addressがnullまたはundefinedなら"不明"を返す

上記のように、null合体演算子を使用することで、コードをより簡潔に書くことができます。

• null合体演算子は、nullとundefinedのみを区別します。0や空文字("")は、null合体演算子の対象になりません。
• 左側の式がnullまたはundefinedでない場合、右側の式は評価されません。

JavaScriptのnull合体演算子は、nullまたはundefinedの値を処理する際に非常に便利な演算子です。コードを簡潔に、読みやすくするために、ぜひ活用してみましょう。

ユーザー情報の取得

const user = {
  name: "山田太郎",
  age: 30,
  address: {
    city: "東京",
    prefecture: "東京都",
  },
};

// ユーザーの名前を取得
const name = user?.name ?? "名無し";
console.log(name); // 山田太郎

// ユーザーの年齢を取得
const age = user?.age ?? -1;
console.log(age); // 30

// ユーザーの住所を取得
const city = user?.address?.city ?? "不明";
console.log(city); // 東京

// ユーザーが存在しない場合
const unknownUser = null;

// 存在しないユーザーの名前を取得
const unknownName = unknownUser?.name ?? "名無し";
console.log(unknownName); // 名無し

オプションチェイニングとの組み合わせ

const user = {
  name: "山田太郎",
  age: 30,
  address: {
    city: "東京",
    prefecture: "東京都",
  },
};

// ユーザーの住所の郵便番号を取得
const zipCode = user?.address?.postalCode ?? "不明";
console.log(zipCode); // 100-0001

// ユーザーが存在しない場合
const unknownUser = null;

// 存在しないユーザーの住所の郵便番号を取得
const unknownZipCode = unknownUser?.address?.postalCode ?? "不明";
console.log(unknownZipCode); // 不明

デフォルト値の設定

const name = "山田太郎";

// 名前が存在しない場合は"名無し"を設定
const displayName = name ?? "名無し";
console.log(displayName); // 山田太郎

// 名前が空文字("")の場合は"名無し"を設定
const emptyName = "";

// 空文字("")もnull合体演算子の対象になることに注意
const emptyDisplayName = emptyName ?? "名無し";
console.log(emptyDisplayName); // 名無し

Null合体演算子の代替方法

const name = user.name || "名無し";
const age = user.age || -1;
const city = user.address?.city || "不明";

三項演算子

const name = user.name ? user.name : "名無し";
const age = user.age ? user.age : -1;
const city = user.address?.city ? user.address?.city : "不明";

if文

let name;
if (user && user.name) {
  name = user.name;
} else {
  name = "名無し";
}

let age;
if (user && user.age) {
  age = user.age;
} else {
  age = -1;
}

let city;
if (user && user.address && user.address.city) {
  city = user.address.city;
} else {
  city = "不明";
}

各方法の比較

Null合体演算子は、簡潔で読みやすいコードを書きたい場合に最適な選択肢です。ただし、2020年以降のブラウザでのみ使用可能であることに注意が必要です。

ブラウザの互換性を考慮する必要がある場合は、論理OR演算子や三項演算子などの代替方法を使用することを検討してください。

• オプションチェイニング演算子 (?.) と組み合わせることで、より安全なコードを書くことができます。
• デフォルト値を設定する場合は、null合体演算子の代わりにデフォルト引数を使用することもできます。