環境
- macOS Monterey 12.6
- Windows 11
- VSCode
- node.js v18.6.0
- npm 8.13.2
- Typescript 4.9.5
この記事は何 ?
ある値がAの場合にBをしたい、というケースが往々にしてある。TypeScriptでそのような処理を簡潔に記載できるパターンを紹介します。～の場合に、という部分については大きく以下の3通りに分けられます。
- truthyな値、falsyな値の場合
- nullまたはundefinedの場合
- 上記以外のもう少し複雑な条件を指定したい場合
truthyな値、falsyな値の場合
truthyな値の場合とfalsyな値の場合それぞれ別の値をセットしたい
論理積演算子(&&)を使用することで、こういった処理が可能になる。左側のオペランドを真偽値に変換し、falsyな値の場合は左側のオペランドを返し、truthyなら右側のオペランドを返す
const targetVal = 'a';
const actual = targetVal && 'b';
console.log(actual); //targetValはtruthyな値なので、b と出力されるfalsyな値の場合にのみデフォルト値をセットしたい
論理和演算子(||)を使用することで、こういった処理が可能になる。左側のオペランドを真偽値に変換し、falsyな値の場合は右側のオペランドを返し、truthyなら左側のオペランドを返す
const targetVal = '';
const actual = targetVal || '初期値';
console.log(actual); //初期値 と出力されるnullまたはundefinedの場合
truthyな値、falsyな値というざっくりとした条件ではなく、より狭い範囲で条件を限定したいときに用いられます。Null合体演算子(??)を使用することで、こういった処理が可能になる
const targetVal = undefined;
const actual = targetVal ?? 'default';
console.log(actual); //targetValはundefinedなので、default と出力されるまた、論理和演算子(||)とは異なり、nullまたはundefinedという条件に限定されているので、以下のように対象の値はfalsyな場合でも、defaultではなく、0となります
const targetVal = 0;
const actual = targetVal ?? 'default';
console.log(actual); //targetValはundefinedなので、0 と出力される上記以外のもう少し複雑な条件を指定したい場合
条件 (三項) 演算子を用いることで可能。条件 ? 真の場合 : 偽の場合 という具合に処理を分岐する
const targetVal = '';
const actual = targetVal ? targetVal : '初期値';
console.log(actual); //targetValはfalsyなので、初期値 と出力されるconst targetVal = 'a';
const actual = targetVal === 'a' ? targetVal : 'b';
console.log(actual); //条件式はtrueなので、a と出力されるまた、以下のようにもう少し複雑な条件判定を行いたい場合に有用。例えば、以下のように対象が空配列かどうかを判定して、それによって処理を出し分けたりする際に便利である（=対象自身の値ではなく、その値がもつ別の属性や値を条件式に使用できたりする）
真の場合
//真の場合
const targetVal = [1];
const actual = targetVal.length !== 0 ? targetVal : 'データがありません';
console.log(actual); //targetValは空配列ではないので、[1]（0: 1） と出力される偽の場合
//偽の場合
const targetVal = [];
const actual = targetVal.length !== 0 ? targetVal : 'データがありません';
console.log(actual); //targetValは空配列なので、データがありません と出力されるまとめ
いかがでしたでしょうか。今回は、ある値がAの場合にBをしたい、というユースケースをTypeScriptで条件分岐を簡潔に記載するための方法を具体例を交えながら紹介しました。わかりやすくシンプルなコードを記述するためには必須のテクニックとなっておりますので、ぜひ参考にしてみてください。