ヌル合体演算子の使い方

JavaScriptにおける「??」演算子、通称「ヌル合体演算子（Nullish Coalescing Operator）」は、非常に便利で強力な演算子です。この演算子は、ある値がnullまたはundefinedである場合に、代わりの値を返すというものです。JavaScriptでは、nullやundefinedは「空」のような意味を持つため、それらの値を処理する際に便利な方法として利用されています。

ヌル合体演算子とは？

ヌル合体演算子は、??という形で表現されます。この演算子は、左側の値がnullまたはundefinedの場合、右側の値を返すというルールに基づいています。それ以外の値、例えば0や空文字列""、falseなどが左側にある場合、そのまま左側の値が返されます。

基本的な構文

javascript
CopyEdit
let result = value1 ?? value2;

• value1がnullまたはundefinedの場合、value2が返されます。

• それ以外の値（0、false、空文字列など）はvalue1がそのまま返されます。

例

以下に、ヌル合体演算子の具体的な例を示します。

javascript
CopyEdit
let username = null;
let defaultName = "ゲスト";

let result = username ?? defaultName;
console.log(result); // "ゲスト"

この例では、usernameがnullであるため、代わりにdefaultName（”ゲスト”）が返されます。

もう一つの例を見てみましょう。

javascript
CopyEdit
let count = 0;
let fallback = 10;

let result = count ?? fallback;
console.log(result); // 0

ここでは、countが0であっても、??演算子はnullまたはundefinedのみを対象とするため、0がそのまま返されます。

ヌル合体演算子と論理OR（||）演算子の違い

JavaScriptでは、||（論理OR）演算子も似たような目的で使用されますが、??演算子との違いがいくつかあります。||演算子は、左側の値がfalsy（偽と評価される値、例えば0、false、空文字列""など）であれば右側の値を返します。一方、??はnullまたはundefinedだけに反応します。

例えば、以下のコードを見てみましょう。

javascript
CopyEdit
let value1 = 0;
let value2 = "デフォルト";

let resultWithOr = value1 || value2;
let resultWithNullish = value1 ?? value2;

console.log(resultWithOr);    // "デフォルト"（0はfalsyなので）
console.log(resultWithNullish); // 0（0はnullでもundefinedでもないので）

この例では、value1が0であっても、||演算子はそれをfalsyと判断してvalue2を返しますが、??演算子は0をそのまま返します。

ヌル合体演算子の使い所

ヌル合体演算子は、特に設定値がnullまたはundefinedであるかをチェックして代替値を提供したい場合に非常に便利です。例えば、ユーザーの入力がnullやundefinedである場合にデフォルト値を設定する際に使われます。

設定値の例

javascript
CopyEdit
let config = {
  theme: null,
  language: undefined,
  fontSize: 14
};

let theme = config.theme ?? "デフォルトテーマ";
let language = config.language ?? "日本語";
let fontSize = config.fontSize ?? 16;

console.log(theme);    // "デフォルトテーマ"
console.log(language); // "日本語"
console.log(fontSize); // 14

この場合、themeはnullであり、languageはundefinedであるため、それぞれのデフォルト値が返されます。しかし、fontSizeは14という有効な値なので、そのまま返されます。

注意点

• ヌル合体演算子は、nullやundefinedをチェックするために設計されていますが、他のfalsy値（0、false、""など）はチェックしません。

• 演算子の優先順位が高いため、括弧を使って演算順序を明確にすることが推奨される場合があります。

結論

ヌル合体演算子??は、特にnullやundefinedのチェックを行い、より堅牢で意図通りのコードを書くために非常に有用です。これにより、デフォルト値の設定やエラー処理を簡潔に行うことができ、コードの可読性も向上します。