TypeScript(JavaScript)で条件分岐を簡潔に記載するための方法

環境

• 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で条件分岐を簡潔に記載するための方法を具体例を交えながら紹介しました。わかりやすくシンプルなコードを記述するためには必須のテクニックとなっておりますので、ぜひ参考にしてみてください。