JavaScriptの三項演算子（条件演算子）とは？スマートに条件分岐する使い方
三項演算子とは、条件式を評価してその結果に応じて返す値を変えることができる演算子で、条件演算子とも呼ばれます。if…elseの代わりに条件分岐を簡単に記述できるため、覚えておくととても便利です。本記事では、三項演算子の基本的な使い方を様々な使用例を交えて解説いたします。
目次
１．三項演算子（条件演算子）の概要
三項演算子は、「?」と「:」を用いて条件式と、条件式が「trueの時の式」と「falseの時の式」を分けて記述します。三項演算子の構文を以下に示します。
条件式?trueの時の式:falseの時の式
条件式がtrueの時は「trueの時の式」を評価した結果を、falseの時は「falseの時の式」を評価した結果を返す、というシンプルな構文となっています。
１-１．三項演算子（条件演算子）の使用例
三項演算子の基本的な使用例を以下に示します。
let age; let message; age = 20; message = age >= 18 ? '成人です' : '未成年です'; console.log(message); // 成人です age = 15; message = age >= 18 ? '成人です' : '未成年です'; console.log(message); // 未成年です
「age = 20」の時は条件式「age >= 18」が「true」となるため「message」に「成人です」が代入され、「age = 15」の時は条件式「age >= 18」が「false」となるため「message」に「未成年です」が代入されます。ここでif…elseを用いた構文と比較をしてみましょう。上記をif…elseを使って記述すると以下のようになります。
let age;
let message;
age = 20;
if (age >= 18) {
message = '成人です';
} else {
message = '未成年です';
}
console.log(message); // 成人です
age = 15;
if (age >= 18) {
message = '成人です';
} else {
message = '未成年です';
}
console.log(message); // 未成年です一目瞭然ですがif…elseを用いると複数行に渡ってしまう処理が、三項演算子を用いることでシンプルな記述にすることが可能となります。
１-２．三項演算子（条件演算子）の応用例
ここでは、三項演算子の応用例を様々なパターンごとにご紹介いたします。
１-２-１．条件式を複数指定する書き方
三項演算子の「条件式」は「&&」（AND）や「||」（OR）を用いて複数の条件式を指定することができます。条件式を複数指定する際は、条件式を「()」 で囲って指定する必要があります。
・「&&」（AND）を用いた例
let score;
let message;
score = 60;
message = (score >= 0 && score <= 100) ? `得点：${score}点` : 'scoreは0〜100の値を指定してください';
console.log(message); // 得点：60点
score = -20;
message = (score >= 0 && score <= 100) ? `得点：${score}点` : 'scoreは0〜100の値を指定してください';
console.log(message); // scoreは0〜100の値を指定してください
・「||」（OR）を用いた例
let age; let occupation; let message; age = 19; occupation = 'office worker'; message = (age <= 20 || occupation === 'student') ? '3割引' : '定価'; console.log(message); // 3割引 age = 22; occupation = 'student'; message = (age <= 20 || occupation === 'student') ? '3割引' : '定価'; console.log(message); // 3割引 age = 24; occupation = 'teacher'; message = (age <= 20 || occupation === 'student') ? '3割引' : '定価'; console.log(message); // 定価
１-２-２．入れ子にする書き方
三項演算子は入れ子にして使用することができます。条件式がtrueの時にさらに条件付けしたり、条件式がfalseの時にさらに条件付けしたり、といったことが可能です。
・条件式がtrueの時にさらに条件付けをする例
let score;
let rank;
score = 63;
rank = score >= 60 ? score >= 70 ? score >= 80 ? score >= 90 ? 'S' : 'A' : 'B' : 'C' : 'F';
console.log(rank); // C
score = 95;
rank = score >= 60 ? score >= 70 ? score >= 80 ? score >= 90 ? 'S' : 'A' : 'B' : 'C' : 'F';
console.log(rank); // S
score = 45;
rank = score >= 60 ? score >= 70 ? score >= 80 ? score >= 90 ? 'S' : 'A' : 'B' : 'C' : 'F';
console.log(rank); // F
// 入れ子の形としては以下のようになっている
rank = score >= 60 ?
(
score >= 70 ?
(
score >= 80 ?
(score >= 90 ? 'S' : 'A')
: 'B'
)
: 'C'
)
: 'F';
・条件式がfalseの時にさらに条件付けをする例
let cloudCover; let weather; cloudCover = 0; weather = cloudCover <= 1 ? '快晴' : cloudCover <= 8 ? '晴れ' : '曇り'; console.log(weather); // 快晴 cloudCover = 6; weather = cloudCover <= 1 ? '快晴' : cloudCover <= 8 ? '晴れ' : '曇り'; console.log(weather); // 晴れ cloudCover = 10; weather = cloudCover <= 1 ? '快晴' : cloudCover <= 8 ? '晴れ' : '曇り'; console.log(weather); // 曇り // 入れ子の形としては以下のようになっている weather = cloudCover <= 1 ? '快晴' : (cloudCover <= 8 ? '晴れ' : '曇り');
１-２-３．処理を複数行にする書き方
条件式がtrueの時の処理やfalseの時の処理は、「()」で囲って処理ごとに「,」で区切ることで複数行記述することも可能となります。
const func = (age) => {
let isAdult;
age >= 20 ?
(
isAdult = true,
console.log(isAdult),
console.log('お酒の購入が可能です')
) : (
isAdult = false,
console.log(isAdult),
console.log('お酒は購入できません')
);
}
func(20); // true, お酒の購入が可能です
func(18); // false, お酒は購入できません２．三項演算子の注意点
三項演算子にはいくつかの注意点があります。
２-１． 複雑な三項演算子を記述した場合の可読性
三項演算子は条件分岐をシンプルに記述できるというメリットがある一方で、場合によってはコードの可読性を損なってしまうというデメリットもあります。例えば、「1.2.2. 入れ子にする書き方」や「1.2.3. 処理を複数行にする書き方」で解説したようなパターンでは、パッと見どのような処理を行っているのかがわかりづらくなってしまうため、if…elseを用いた方が読みやすいコードとなる場合があります。
１-２-２．入れ子にする書き方を書き換えた例
let score;
let rank;
score = 63;
if (score >= 90) {
rank = 'S';
} else if (score >= 80) {
rank = 'A';
} else if (score >= 70) {
rank = 'B';
} else if (score >= 60) {
rank = 'C';
} else {
rank = 'F';
}
console.log(rank); // C「scoreが90以上」であれば「rank = ‘S’」、「scoreが80以上」であれば「rank = ‘A’」というように直感的に捉えやすくなると思います。
１-２-３．処理を複数行にする書き方
const func = (age) => {
let isAdult;
if (age >= 20) {
isAdult = true;
console.log(isAdult);
console.log('お酒の購入が可能です');
} else {
isAdult = false;
console.log(isAdult);
console.log('お酒は購入できません');
}
}
func(20); // true, お酒の購入が可能です
func(18); // false, お酒は購入できません上記のように三項演算子でif…elseを省略するのではなく、明示的にif…elseを記述してしまった方が理解しやすいコードになっているかと思います。
２-２．falsyな値の判定
「0」や「””（空文字）」など、Boolean関数などを用いて真偽値に変換した際にfalseとなる値を「falsyな値」と言います。以下にfalsyな値の例を示します。
- false
- 0
- “”（空文字）
- null
- undefined
- NaN
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // falseこのfalsyな値について理解をしていないと、三項演算子を誤って記述してしまうため注意が必要となります。
上記を踏まえて、以下のコードを見てみましょう。
const zero = 0; const message = zero ? '値は0です' : '値は0ではありません'; console.log(message);
この時どんな結果が表示されるでしょうか？結果としては「値は0ではありません」が出力されてしまいます。「zero = 0」の時をtrueとして「値は0です」を表示しようと上記のように記述してしまうと、「zero」に代入された「0」がfalsyな値であるために「falseの時の式」が実行されてしまいます。
「zero = 0」の時をtrueとして実行させたい場合は以下のように記述をすると、意図通りに動作させることができます。
const zero = 0; const message = zero === 0 ? '値は0です' : '値は0ではありません'; console.log(message); // 値は0です
「””（空文字）」や「undefined」を条件式で判定したい場合には同様の注意が必要となります。
３．まとめ
三項演算子は条件式をシンプルに記述するのに適しています。ただし、場合によってはコードの可読性が損なわれてしまう場合もあるため、状況によってif…elseなど他の条件分岐の記法と使い分けるようにしましょう。
コメント