三項演算子（条件演算子）とは
三項演算子（条件演算子）とは、JavaScriptで唯一3つのオペランド（式や値）を必要とする演算子です。
三項演算子（条件演算子）では、とある条件に対して、それがtureの時の処理とfalseの時の処理を記述します。
一般的にif文よりも簡潔にコードを書くことができるため、よく代用として使われています。
三項演算子（条件演算子）の書き方
まずは三項演算子（条件演算子）の基本的な書き方から見ていきましょう。
// 基本構文
{条件} ? {trueの場合} : {falseの場合}
// サンプルコード
const age = 22;
const message = age >= 18 ? 'あなたは成人済みです。' : 'あなたは未成年です。';
console.log(message); // -> あなたは成人済みです。「 ? 」と「 : 」を用いて記述し、条件となるオペランド、tureの場合の処理、falseの場合の処理を順番に記述します。
上のサンプルコードをif文に置き換えると、以下のようなコードになります。
// if文
const age = 22;
if(age >= 18) {
const message = 'あなたは成人済みです。';
} else {
const message = 'あなたは未成年です。';
}
console.log(message); // -> あなたは成人済みです。比べてみると一目瞭然で、if文より三項演算子（条件演算子）で記述した方が簡潔にコードを記述することができます。
nullやundefinedの扱い
JavaScriptでは、三項演算子（条件演算子）の条件部分にnullやundefinedを記述するとfalseとして処理されます。
他にも、三項演算子（条件演算子）では以下のものがfalseとしてされます。
- null
- undefined
- NaN
- 0（数値）
- “” や ”（空文字）
if文と同じなので、覚えておくと良いでしょう。
三項演算子（条件演算子）の入れ子
JavaScriptの三項演算子（条件演算子）では、if分のように入れ子で記述することもできます。
const apple = 'りんご';
const message = apple === 'いちご' ? 'appleはいちごです。' :
apple === 'りんご' ? 'appleはりんごです。' : 'appleはいちごでもりんごでもありません。';
console.log(message); // 'appleはりんごです。'1つ目の三項演算子（条件演算子）のfalseの処理部分に、入れ子で三項演算子（条件演算子）を記述しています。
if文で記述すると下のコードになります。
const apple = 'りんご';
let message;
if(apple === 'いちご') {
message = 'appleはいちごです。';
} else {
if(apple === 'りんご') {
message = 'appleはりんごです。';
} else {
message = 'appleはいちごでもりんごでもありません。';
}
}三項演算子（条件演算子）で記述することで、if文で記述するよりも簡潔なコードを書くことができます。
ただし、簡潔すぎて読みにくいコードを書いてしまうのはプログラミングにおいて褒められたことではないため、注意しましょう。
三項演算子（条件演算子）とif文の違いや活用方法
if文を簡潔に記述することができる
これまでも何度か説明してきたように、三項演算子（条件演算子）を利用することで条件分岐処理をif文よりも簡潔に記述することができます。
特に条件に応じて変数に代入する値を変えたり、実行する関数を変えたりするにとても便利です。
ただし、プログラミングにおいてはただひたすらに簡潔なコードであれば優れているという訳ではなく、複数人での作業や運用のことも考慮し、誰が見てもわかりやすいコードを書くことが求められます。
三項演算子（条件演算子）で記述することで確かにコードは簡潔になりますが、そのコードが本当に読みやすいコードであるかは十分に考慮し、三項演算子（条件演算子）を使用することで逆に読みにくいコードになっている場合には他の方法で記述することも必要になってきます。
改行とインデントで見やすいコードを書く
JavaScriptの三項演算子（条件演算子）では、改行やインデントを活用することで可読性の高いコードを書くことができるようになります。
入れ子の書き方で紹介したサンプルコードについて、改行とインデントを追加してみましょう。
// 元のサンプルコード
const message = apple === 'いちご' ? 'appleはいちごです。' :
apple === 'りんご' ? 'appleはりんごです。' : 'appleはいちごでもりんごでもありません。';
// 改行とインデントを活用したサンプルコード
const message = apple === 'いちご'
? 'appleはいちごです。'
: apple === 'りんご'
? 'appleはりんごです。'
: 'appleはいちごでもりんごでもありません。'
console.log(message); // 'appleはりんごです。'改善を加えたコードでは、trueとfalseの場合の処理が判断しやすく、入れ子の階層構造についても一目で判断しやすくなりました。
JavaScriptにおいては、改行やインデントは比較的自由に使用することができ、可読性の高いコードを書くために需要な要素になるため意識してみると良いかもしれません。
JSX内で条件分岐を行う
JavaScriptフレームワークで人気のReactですが、ReactでHTML要素を記述するJSX内で条件分岐を行う際に三項演算子（条件演算子）が活躍します。
実は、JSX内ではif文やfor文を使用することができません。
三項演算子（条件演算子）は文ではないため、JSX内でも使用することができるので、Reactを使用する際には「&&」などの論理演算子と共に三項演算子（条件演算子）を使用する回数が増えます。
JSXの外で条件分岐を行うケースも多いですが、使えると割と便利なので覚えておくと良いでしょう。
まとめ
三項演算子（条件演算子）を利用することで、if文よりも簡単に条件分岐の処理を記述することができます。
また、ReactなどでJSX内で条件分岐を記述する際にif文を使ってしまうとエラーになってしまうため、if文の代わりに三項演算子（条件演算子）が活躍していたりします。
ただし、三項演算子（条件演算子）の使い所を間違えてしまうと、反転して読みにくいコード・保守性の低いコードになりかねませんので注意しましょう。
コメント