記事の概要
JavaScript（TypeScript）にはいろんな条件の書き方がありますが、初心者にとっては最初見た時どういう意味なのかよくわかりませんよね。自分も最近知った部分があるので、今更ですがまとめてみました。
説明する内容
- 三項演算子
- オプショナルチェーン演算子
?. - 論理演算子
&& - 論理演算子
|| - Null 合体演算子
前提条件
こちらの説明は、2024年5月時点での仕様をもとにしています。今後のアップデートによって、ここに掲載している内容ではできなくなるかも知れません。
1. 三項演算子
条件式 ? 当てはまるとき(真)の処理 : 当てはまらないとき(偽)の処理
変数に、条件に応じて別の値を代入したい時に便利です。
例）
const drink = age >= 20 ? "お酒" : "ソフトドリンク";
この場合、ageが20以上の時は"お酒"が、そうでない時は"ソフトドリンク"が、drinkに格納されます。
参考）
2. オプショナルチェーン演算子?.
オプショナルチェーン演算子?.というものを使うと、参照したものがnullまたはundefinedだった場合に、undefinedが返却されます。
例)
let price = products.drink?.coke
この場合、products.drink.cokeを参照する前に、products.drinkがnullまたはundefinedでないことを自動的に調べることができるようになります。
もし当てはまった場合はundefinedがpriceに格納されます。
これは、使用したい関数が存在するかどうかを調べることにも利用できます。
ちなみに、TypeScriptの機能として、非nullアサーション演算子である!があります。直前のオブジェクトが、nullまたはundefinedではないことをTypeScriptに主張することができます。ただし使用方法に注意があります。こちらが参考になりそうです（ https://qiita.com/Asaminnn/items/64f3143ebf980d3a58c8 ）
3. 論理演算子&&
const result = {式1} && {式2}
この場合、式1と式2がいずれも真（nullやundefinedではない）の場合、式2の値が格納されます。
一方、どちらかに偽（nullやundefined）が含まれていた場合は、その値が返され、その後の式は評価（実行)されません。
例1）
const a = "hello!";
const b = "こんにちは";
const result = a && b;
この場合、aとbどちらも存在する（真）ので、resultには右側bの値である"こんにちは"が格納されます。
例2)
const objA = {"name": "太郎"};
const result = objA && objA.age;
この場合、objAは存在しますが、objAにageは存在しないので、resultには右側objA.ageの返り値であるundefinedが格納されます。
例3)
const objA = {"name": "太郎"};
const result = objA.age && console.log(objA.age);
この場合、objA.ageが存在しないので、この時点でresultには左側objA.ageの返り値であるundefinedが格納されます。後の、console.logの処理は実行されません。
4. 論理演算子||
const result = {式1} || {式2}
この場合、式1がtrueの場合は、式1の値が格納されます。それ以外の場合は、式2の値が格納されます。
例1）
const a = "hello!";
const b = "こんにちは";
const result = a && b;
この場合、aが真なので、この時点でresultには左側aの値である"hello!"が格納されます。
例2)
const objA = {"name": "太郎"};
const result = objA.name || "存在しません";
この場合、objA.nameは存在している（真）ので、この時点でresultには左側objA.nameの値である"太郎"が格納されます。
例3)
const objA = {"name": "太郎"};
const result = objA.age || "存在しません";
この場合、objA.ageが存在しないのでundefinedとなり、この時点でresultには右側の値である"存在しません"が格納されます。
5. Null 合体演算子
||の特殊系です。
??という形で書きます。
const result = {式1} ?? {式2};
{式1}の値が、nullまたはundefinedの場合に、{式2}の値が、resultに格納されます。
{式1}の値nullでもundefinedでもない場合、すぐにその値が格納され、{式2}は評価（実行）されません。
||よりも、条件を限定して判定しているのがミソです。
例1)
const x = "私は来世は東京生まれになりたい。";
const y = "私は田舎で生まれました。";
const result = x ?? y;
この場合、xがnullでもundefinedでもないので、この時点でresultには左側xの値である"私は来世は東京生まれになりたい。"が格納されます。
例2)
const x = "null";
const y = "私は田舎で生まれました。";
const result = x ?? y;
この場合、xがnullなので、この時点でresultには右側yの値である"私は田舎で生まれました。"が格納されます。
終わりに
公式ドキュメントや知人、Chat GPTのお力も借りて自分も勉強しながら、JavaScript（TypeScript）の色々な条件の書き方をまとめてみました。皆さんの開発に少しでも役に立てれば嬉しいです。