TypeScriptでスマートな条件分岐を実現！「?:」演算子とnullish coalescing operatorを使いこなそう
TypeScriptにおける「?:」演算子：詳細解説
TypeScriptにおける「?:」演算子は、三項演算子とも呼ばれ、条件に応じて異なる値を返す便利な演算子です。JavaScriptの三項演算子とほぼ同じ役割を持ちますが、TypeScriptならではの型安全性も備えています。
構文
condition ? value1 : value2
説明
condition：評価する条件式。trueまたはfalseを返す必要があります。value1：条件がtrueの場合に返される値。
例
const age = 18;
const message = age >= 18 ? "成人です" : "未成年です";
console.log(message); // 出力： 成人です
上記の例では、age が 18 以上かどうかを確認し、条件に応じて "成人です" または "未成年です" というメッセージを出力しています。
メリット
- コードを簡潔に記述できる
- 冗長な
if-elseステートメントを避けられる - 読みやすいコードになる
注意点
condition式が常に真偽値を返す必要があることに注意が必要です。そうでない場合は、コンパイルエラーになります。- 型安全性に注意する必要があります。
value1とvalue2の型は互換性がなければなりません。
応用例
- デフォルト値の設定
- エラー処理
- 複雑な条件分岐の簡略化
- TypeScript 4.0以降では、nullish coalescing operatorと呼ばれる「??」演算子も導入されました。「?:」演算子と似ていますが、
nullまたはundefinedのみを判定し、代わりの値を返す点に違いがあります。
TypeScriptにおける「?:」演算子のサンプルコード
function greet(name?: string): string {
const message = name ? `こんにちは、${name}さん！` : 'こんにちは、ゲストさん！';
return message;
}
console.log(greet('山田太郎')); // 出力： こんにちは、山田太郎さん！
console.log(greet()); // 出力： こんにちは、ゲストさん！
この例では、greet 関数に引数 name を渡すことができます。引数が渡された場合は、こんにちは、${name}さん！ というメッセージを返します。引数が渡されなかった場合は、こんにちは、ゲストさん！ というメッセージを返します。
function calculateSquare(number: number): number | string {
if (number < 0) {
return '負の数は平方根を取れません';
} else {
return Math.sqrt(number);
}
}
const result1 = calculateSquare(9);
console.log(result1); // 出力： 3
const result2 = calculateSquare(-4);
console.log(result2); // 出力： 負の数は平方根を取れません
この例では、calculateSquare 関数に数値 number を渡します。引数が 0 以上の場合は、平方根を計算して返します。引数が 0 未満の場合は、負の数は平方根を取れません というメッセージを返します。
const isWeekend = new Date().getDay() === 0 || new Date().getDay() === 6;
const openingHours = isWeekend ? '10:00 - 18:00' : '9:00 - 20:00';
console.log(`営業時間：${openingHours}`);
この例では、現在の日付が土曜日または日曜日かどうかを確認し、条件に応じて営業時間を出力しています。
例4：nullish coalescing operatorの使用
const user = {
name: '山田太郎',
email: null
};
const userName = user.name ?? '名無し';
const userEmail = user.email ?? '未登録';
console.log(`名前：${userName}`); // 出力： 名前：山田太郎
console.log(`メールアドレス：${userEmail}`); // 出力： メールアドレス：未登録
この例では、user オブジェクトのプロパティ name と email の値を取得します。name プロパティが null または undefined の場合は、名無し という文字列を代入します。email プロパティが null または undefined の場合は、未登録 という文字列を代入します。
これらの例は、TypeScriptにおける「?:」演算子の様々な使い方を示しています。使いこなすことで、コードをより簡潔で読みやすく、そして安全にすることができます。
TypeScriptにおける「?:」演算子の代替方法
if-else ステートメント
最も基本的な代替方法は、if-else ステートメントを使用することです。これは、特に条件が複雑な場合や、複数の値を返す必要がある場合に有効です。
if (condition) {
return value1;
} else {
return value2;
}
早期リターン
条件に応じて早期にリターンする方法は、関数が簡潔になる場合に有効です。
function calculateSquare(number: number): number | string {
if (number < 0) {
return '負の数は平方根を取れません';
}
return Math.sqrt(number);
}
スイッチ文
複数の条件を分岐させる必要がある場合は、スイッチ文を使用することができます。
switch (condition) {
case value1:
return result1;
case value2:
return result2;
default:
return defaultValue;
}
グローバル変数
※この方法は避けるべきです。※
グローバル変数を使用して条件に応じて値を格納する方法もありますが、これはコードの可読性と保守性を低下させるため、避けるべきです。
「?:」演算子は便利なツールですが、状況に応じて適切な代替方法を選択することが重要です。上記の代替方法を理解することで、より良いコードを書くことができます。
- それぞれの方法には長所と短所があるため、一概にどれが最適とは言えません。
- コードの可読性、保守性、パフォーマンスなどを考慮して、最適な方法を選択しましょう。
typescript
