三項演算子（条件演算子）は、java script で唯一、3 つのオペランドをとる演算子です。
（オペランドとは、演算子によって処理されるデータを表す「数値」「文字列」「変数」などのことを言います）
if文の代替として使用されることが多いそうです。
三項演算子の使い方
三項演算子はその名前の通り、３つのオペランドを取ります。この３つのオペランド「条件として使用される式」「条件式がtrueの場合の処理」「条件式がfalseの場合の処理」はいずれも省略することができません。
構文は以下の通りです。
条件に続いて疑問符 (?)、そして条件がtrueの場合の処理、コロン (:) が続き、条件式がfalseの場合の処理を記述します。
条件として使用される式 ? 条件式がtrueの場合の処理 : 条件式がfalseの場合の処理 ;ちなみに、if文で記述する場合、このような記述になります。
if (条件として使用される式){
条件式がtrueの場合の処理 ;
} else {
条件式がfalseの場合の処理 ;
}条件を連鎖させる
if (条件式1) {
処理１;
} else if (条件式2) {
処理2;
} else if (条件式3) {
処理3;
} else {
処理4;
}上記のように else if を繋げることができるように、三項演算子も条件をつなげて記述することができます。
条件式1 ? 処理１
: 条件式2 ? 処理2
: 条件式3 ? 処理3
: 処理4;「条件式がfalseの場合の処理」が行われる時
「条件式がfalseの場合の処理」が行われるのは、条件として使用される式の値が false となった時の他、
- null
- NaN（数値ではないことを示す特殊な値）
- 0（数値）
- 空文字列 (
"") - undefined
のいずれかに該当した時も、「条件式がfalseの場合の処理」が実行されることに注意が必要です。
三項演算子とif文の使い分けについて
例えば、先日こちらの記事内で使用した三項演算子のように、条件が単純で処理も簡単な場合は三項演算子を使うことでコードを短く記述することができるので、とても有用です。
唐突に i が出てきて申し訳ないのですが（実際にはforEach文の中で使用しているコードです）、条件式「 i === 0」が true であれば３行目の処理を、false であれば４行目の処理を行います。
const startPosition =
i === 0
? content.offsetTop - headerHeight - TITLE_HEIGHT
: content.offsetTop;こちらは .js-header の要素の高さを取得するコードです。
.js-header の要素がある時にはheader.getBoundingClientRect().height の処理を行い、ない場合（null のとき）は 0 を返します。
この方法ですと、.js-header の要素が存在しなくてもエラーが発生しません。
const header = document.querySelector('.js-header');
let header ? header.getBoundingClientRect().height : 0このように、null になる可能性がある値を扱う時には、エラーを防ぐために三項演算子がよく使われるみたいですね。
ただ、記述が少なく便利になる一方で、条件が複雑だったり、実行させたい処理が複数行にわたるような時はif文を使ったほうがわかりやすいです。
というか、入れ子になった三項演算子の式を見ましたが、ものすごくわかりにくかったです。解読する時間がもったいないので、みんながわかりやすく記述したらいいと思う。と、他の誰かが作ったサイトの更新作業すると思いますね。
まとめ
２択（true or false）の条件の分岐で簡単な処理を行うのなら、とても見やすく使い勝手が良さそうだったので、今後も自分のコードにも取り入れていきたいです。
とはいえ、複雑な条件分岐が必要なら、これまで通りif文が活躍しそうですね。
その場に応じて適切な方法で記述できるようになっていきたいです。
コメント