プログラミングで真理値の条件分岐を行ないたいとき、三項演算子を使うと便利です。
今回はJavaScriptでの三項演算子の使い方について紹介していきたいと思います。
JavaScriptでの三項演算子の書き方
三項演算子は、真理値(true false)による条件分岐を、短く書くことができる書き方です。
もっともかんたんな例は、以下のようなものです。
console.log( true ? 'その通り':'嘘' );
console.log( false ? 'その通り':'嘘' );
実行結果:
その通り
嘘
上記例では、trueのとき「その通り」と表示され、falseのとき「嘘」と表示されます。
三項演算子の基本的な書き方は、下のようなものです。
条件 ? trueの場合 : falseの場合
この条件には、実際はtrueやfalseではなく、式を入れます。
console.log( 21 === 4 ? 'その通り':'嘘' );
実行結果:
嘘
もちろん、21は4ではないので、「嘘」と表示されます。
では次の場合はどうでしょうか。
console.log( 21 === 21 ? 'その通り':'嘘' );
実行結果:
その通り
なにを言ってるんだと思われるかもしれませんが、21は21ですので、「その通り」と表示されます。
実際に三項演算子を使ってみる
たとえば、80ポイント以上ならゲームクリア、それ未満ならばゲームオーバーと表示するプログラムを作るとします。
条件分岐にはif〜elseがよく使われます。if〜elseを使って作るならば、このようになります。
let point = 90;
let result;
if ( point >= 80 ) {
result = 'ゲームクリア';
}
else {
result = 'ゲームオーバー';
}
console.log( result );
では、上のプログラムを、三項演算子を使ったものに書き換えてみます。
let point = 90;
const result = point >= 80 ? 'ゲームクリア':'ゲームオーバー';
console.log( result );
三項演算子は2行目で使っています。しかし、はじめて見た方は、なんのことかさっぱり分からないと思います。
これは、resultという変数に、「point >= 80」という条件で、trueの場合は「ゲームクリア」、falseの場合は「ゲームオーバー」を入れる、という意味になります。
また、どちらも実行結果は以下のようになります。
実行結果:
ゲームクリア
入れ子構造の三項演算子
三項演算子は入れ子にすることもできます。
さきほどの例で、80ポイント未満だったとしても、70ポイント以上だったときは、「おしい!」と表示させるようにしてみましょう。
let point = 75;
const result = point >= 80 ? 'ゲームクリア':point >= 70 ? 'おしい!':'ゲームオーバー';
console.log( result );
すこし読みにくいのですが、順番にひとつずつ見ていけば、理解することができます。
- 条件「point >= 80」がtrueのときは「ゲームクリア」
- 条件「point >= 80」がfalseのときは、条件「point >= 70」で分岐
- 条件「point >= 70」がtrueのときは「おしい!」
- 条件「point >= 70」がfalseのときは「ゲームオーバー」
実行結果:
おしい!
三項演算子は便利なのですが、このように入れ子にしていくと、どんどん分かりにくくなります。
入れ子構造の使いすぎには注意しましょう。
まとめ
プログラミングで真理値の条件分岐を行ないたいときは、三項演算子を使うと便利です。
三項演算子を使うことで、長くなってしまう条件分岐の記述を、一行で書くことができます。
しかし、入れ子構造にすると、どんどん分かりにくくなります。そんなときは、見やすいように改行を入れるか、それでも見にくい場合は、if〜elseを使うようにしましょう。