JavaScript - Optional Chaining

こんにちは、未来のJavaScript魔法使いさんたち！? 今日は、Optional Chainingの世界への興味深い旅を始めます。プログラミングが初めてでも心配しないでください。私はあなたの親切なガイドとして、ステップバイステップで進めます。このレッスンの最後に、プロのようにチェーンを使えるようになるでしょう！さあ、始めましょう！

存在しないプロパティの問題

巨大な図書館で本を探しているとしましょう。その本は「SF」のセクションにあるはずで、3階の後ろの角にあります。しかし、図書館に3階がなかったり、「SF」のセクションがなかったりしたらどうでしょうか？这正是JavaScriptでネストされたオブジェクトを扱う際にしばしば直面する問題です。

例を見てみましょう：

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi.books);

このコードを実行すると、エラーが発生します：「Cannot read property 'books' of undefined」。なぜでしょうか？なぜなら、library.fiction.sciFiは存在しないからです！ここでOptional Chainingが助け舟を出してきます。

JavaScriptにおけるOptional Chainingとは？

Optional Chainingはコードの安全網のようなものです。中間のプロパティが存在するかどうかを心配せずに、ネストされたオブジェクトのプロパティにアクセスすることができます。これは?.演算子で表されます。

前の例をOptional Chainingを使って書き直してみましょう：

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi?.books);

今度はエラーが発生せず、単にundefinedが返されます。まるで、「sciFiが存在するなら、そのbooksをください。存在しないなら、問題ありません」と言っているようなものです。

関数呼び出しにおけるOptional Chaining

Optional Chainingはオブジェクトのプロパティだけでなく、関数呼び出しにも使えます。例えば、本を貸し出すシステムがあるとしましょう：

const library = {
fiction: {
fantasy: {
checkOut: function(book) {
console.log(`${book}を貸し出しています`);
}
}
}
};

library.fiction.fantasy.checkOut?.('The Hobbit');
library.fiction.sciFi?.checkOut?.('Dune');

この例では、'The Hobbit'は貸し出されますが、'Dune'は何も起こりません。なぜなら、sciFiは存在しないからです。エラーは発生せず、スムーズに進みます！

表現式におけるOptional Chaining

Optional Chainingは角括弧記法でも使えます。これはプロパティ名が動的であったり、特殊文字を含んでいたりする場合に便利です：

const users = {
'123': { name: 'Alice', age: 30 },
'456': { name: 'Bob', age: 25 }
};

const userId = '789';
console.log(users[userId]?.name);

これはundefinedを返しますが、エラーは発生しません。

「delete」演算子との使用

「delete」演算子もOptional Chainingと一緒に使えます。プロパティが存在するかどうかを確認せずに削除したい場合に便利です：

const obj = {
prop: {
innerProp: 'value'
}
};

delete obj.prop?.innerProp;
delete obj.nonExistent?.prop;

最初のdeleteは期待通りに動作し、innerPropを削除します。二番目のdeleteは何もしないですが、エラーは発生しません。

ショートカット評価

Optional Chainingにはショートカット評価という便利な機能があります。左側がnullまたはundefinedの場合、評価を止めてundefinedを返します：

const obj = null;
console.log(obj?.prop?.subProp);  // undefinedを返します

これは「Cannot read property of null」のような厄介なエラーを避けるのに非常に役立ちます！

Nullishコアレスシング演算子とOptional Chaining

Nullishコアレスシング演算子（??）はOptional Chainingと非常に良く合います。Optional Chainingの結果がnullまたはundefinedの場合にデフォルト値を提供することができます：

const user = {
name: 'Alice',
details: {
age: 30
}
};

console.log(user.details?.job ?? '未就労');  // '未就労'を返します
console.log(user.details?.age ?? '不明');     // 30を返します

プロパティが存在しない場合にフォールバック値を提供するのに最適です。

以下に、私たちがカバーしたメソッドのまとめ表を示します：

メソッド	シntax	説明
プロパティアクセス	obj?.prop	安全にネストされたオブジェクトのプロパティにアクセス
関数呼び出し	func?.()	存在しない可能性のある関数を安全に呼び出し
表現式	obj?.[expr]	動的であったり特殊文字を含むプロパティ名を安全にアクセス
「delete」演算子	delete obj?.prop	存在しないプロパティを安全に削除
ショートカット評価	obj?.prop?.subProp	左側がnullまたはundefinedの場合評価を止める
Nullishコアレスシング	obj?.prop ?? defaultValue	nullまたはundefinedの場合にデフォルト値を提供

そして、皆さん！あなたのJavaScriptスキルがOptional Chainingでレベルアップしました。コードを書くことはLEGOで遊ぶのと同じです。基本から始めて、間もなくмаsterpiecesを作成するようになります。練習を続け、好奇心を持ち、ハッピーコーディングを！??‍??‍?

Credits: Image by storyset