【JavaScript】「?.」と「??」の使い方 | Optional-ChainingとNull-合体演算子

どうもフロントエンドエンジニアのまさにょんです！

今回は、JavaScript・TypeScriptを使っていると目にする「?.」と「??」の使い方を解説して行きます。

1 「?.」オプショナルチェーン(Optional-Chaining)の使い方
2 「??」Nullish-Coalescing-Operator(Null-合体演算子) の使い方
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 参考・引用
6 最近の投稿

「?.」オプショナルチェーン(Optional-Chaining)の使い方

JavaScriptのOptional-Chaining「 ?. 」は、Objectにkey名が存在しない場合でも、errorを起こさずにkey名を参照できる安全な方法です。
引用元：オプショナルチェーン (optional chaining)

JavaScriptでは、null や undefined のkeyを参照するとエラーが発生します。

そんなkey参照がerrorになる問題でProgramが動作しなくなることを避けるためにも、「?.」は役立ちます。

もしも「 ?. 」に「先行する変数」や「後に続くkey」が、null or undefined の時は、そのkey-Accessは実施されず(Error-回避されて) undefined が実行結果(Access結果)として返されます。

すなわち、「?.」を使ってKey-Accessすると「Access元のObjectと、そのObjectのkey が、null or undefined でもErrorが発生しない！」と言うことです。

Optional-Chaining-基本構文-考え方

1. 基本構文 「 object?.key 」
2. 「 ?. 」で、object の key にAccessする。
3. 「先行する変数」(object)や「Access先のkey」(key) が null or undefined なら、undefined がAccess結果(参照結果)として返却される。

それでは、Sample-Codeで観て行きましょう。

// < Optional-Chaining: オプショナルチェーン(?.)の使い方 >

// [ オプショナルチェーン(Optional-Chaining)-構文 ]
// 「 object?.key 」
// 「 ?. 」でkeyにAccessする。
// Access先の key が null or undefined なら、undefined が返却される。

// 1. 存在しないkeyにAccessするとerrorが起きる！
const book = undefined;
const title = book.title;
console.log(title); // TypeError: Cannot read properties of undefined (reading 'title')
 
const author = null;
const email = author.email;
console.log(email); // TypeError: Cannot read properties of undefined (reading 'email')


// 2. エラーを避けるには、がnullやundefinedでないかチェックする必要があります。
const book2 = undefined;
const title2 = book2 === null || book2 === undefined ? undefined : book2.title;
console.log(title2); // undefined
 
const book3 = { title: "サバイバルTypeScript" };
const title3 = book3 === null || book3 === undefined ? undefined : book3.title;
console.log(title3); // "サバイバルTypeScript"

// 3. ネストしたオブジェクトの場合、チェック処理はいっそう複雑になってきます。
const book4 = { author: { email: "robotama@example.com" } };
const authorEmail =
  book4 === null || book4 === undefined
    ? undefined : book4.author === null || book4.author === undefined
    ? undefined : book4.author.email;

console.log(authorEmail); // obotama@example.com
// チェックすればエラーなく動きますが、記述量が多くなるという課題もあります。


// 4. オプショナルチェーン(Optional-Chaining) を付けるとerrorを回避できる！
// オプショナルチェーン(Optional-Chaining)では、keyが存在しない場合は、undefined を返却する。
// Reference-Errorを回避できる！

const book5 = undefined;
const title5 = book5?.title;
console.log(title5); // undefined
 
const author2 = null;
const email2 = author2?.email;
console.log(email2); // undefined


// 5. keyが「存在する場合/存在しない場合」
const momo = {name: 'ももちゃん'};

// 5-1. keyが存在しない場合
const like = momo?.like;
console.log(like); // undefined

const momo2 = {name: 'ももちゃん', like: 'まぐろ'};

// 5-2. keyが存在する場合
const like2 = momo2?.like;
console.log(like2); // まぐろ

// < まとめ >
// ?. => null or undefined => return undefined
// 「 ?.key 」=> Accessする値がnull or undefined なら その時点でundefinedを返す。

「??」Nullish-Coalescing-Operator(Null-合体演算子) の使い方

「??」は、MDNの定義によると次のようなものになります。

Null 合体演算子 (??) は論理演算子の一種です。
この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。
引用元： MDN: Null 合体演算子 (??)

「??」こと「Nullish-Coalescing-Operator」(Null 合体演算子) は、論理演算子の一種で、左辺がnull や undefined の場合に右辺に用意した値を実行することできます。

なので、null や undefined の時だけ何か処理をしたい時に役立ちます。

「 ?. 」(Optional-Chaining) と「 ?? 」(Nullish-Coalescing-Operator)を組み合わせると、
null or undefined の際に、通常の処理とは違う、特定の左辺・処理をするという実装が簡単かつ安全にできます。

Nullish-Coalescing-Operator-基本構文-考え方

1. 「 左辺 ?? 右辺 」の形で、左辺が null や undefined なら 右辺 の処理を実行します。
2. null や undefined の時だけ何か処理をしたい時に役立つ！
3. 他のfalsyな値(0や空文字)は、左辺の値をそのまま処理をする。
4. 「 ?. 」(Optional-Chaining) と「 ?? 」(Nullish-Coalescing-Operator)を組み合わせると、
    null or undefined の際に、通常の処理とは違う、特定の左辺・処理をするという実装ができる。

それでは、Sample-Codeで観て行きましょう。

// < Nullish-Coalescing-Operator: Null-合体演算子 (??)の使い方 >

// 1.「 左辺 ?? 右辺 」=> null や undefined なら 右辺 の処理を実行する。

// 2. null や undefined の時だけ、何か特定の処理をしたい時に役立つ！

// 3. 他のfalsyな値(0や空文字)は、左辺の値をそのまま処理をする。
// false-判定な値 => false, 0, '', null, undefined

const robotama = {
    name: 'ロボ玉',
    from: 'グンマー帝国',
    hamFlag: true,
    power: 1,
    pilot: null
}

// like-keyは、存在しない => 左辺の値を返却。
const eat = robotama?.like ?? 'ひまたねが好き！';
console.log(eat); // ひまたねが好き！

// develop-keyは、存在しない => 左辺の処理が実行される。
robotama?.develop ?? console.log('ロボ玉-開発中'); // ロボ玉-開発中

// pilot-keyは存在するが、valueはnullである => 左辺が実行される。
// Access先のvalueがnullだと、左辺が実行される。
const pilot = robotama?.pilot ?? 'ももちゃん';
console.log({pilot});

// < ?. と ?? を組み合わせる >
// 「 ?. 」(Optional-Chaining) と「 ?? 」(Nullish-Coalescing-Operator)を組み合わせると、
// null or undefined の際に、通常の処理とは違う、特定の左辺・処理をするという実装ができる。