【React】三項演算子を使って条件分岐を簡潔に書く

三項演算子とは？
三項演算子を使ったいくつかの例

三項演算子とは？

三項演算子は、条件式が真である場合と偽である場合で異なる処理を行う場合に使用されます。基本構文は以下の通りです。

条件式 ? 真の場合の処理 : 偽の場合の処理

条件式が真の場合は、真の場合の処理が実行され、偽の場合は偽の場合の処理が実行されます。

三項演算子を使ったいくつかの例

例1：ageが18歳以上の場合、”成人”という文字列を、18歳未満の場合、”未成年”という文字列を返す関数

const getAgeStatus = (age) => {
  return age >= 18 ? '成人' : '未成年';
};

console.log(getAgeStatus(20)); // 出力結果: "成人"
console.log(getAgeStatus(15)); // 出力結果: "未成年"

例2：配列の中に特定の文字列が含まれる場合、その要素を削除し、含まれない場合はそのまま返す関数

const removeItemFromArray = (array, target) => {
  return array.includes(target) ? array.filter(item => item !== target) : array;
};

const arr1 = ['apple', 'banana', 'orange', 'grape'];
const arr2 = removeItemFromArray(arr1, 'banana');
console.log(arr2); // 出力結果: ['apple', 'orange', 'grape']

const arr3 = removeItemFromArray(arr1, 'melon');
console.log(arr3); // 出力結果: ['apple', 'banana', 'orange', 'grape']

例3：オブジェクトのプロパティがundefinedの場合、代替の値を返す関数

const getUserName = (user) => {
  return user.name ? user.name : '名前未設定';
};

const user1 = { name: 'John', age: 25 };
const user2 = { age: 30 };
console.log(getUserName(user1)); // 出力結果: "John"
console.log(getUserName(user2)); // 出力結果: "名前未設定"