本記事では、JavaScriptでif文を省略して書くことが出来る三項演算子の書き方・使い方について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!
Contents
三項演算子の書き方・使い方
三項演算子の基本的な書き方は以下のとおりです。
条件式 ? true : false;
コード解説
- 条件式:if()内に記述する条件式
- true:条件式を満たした時に実行する処理・返す値
- false:条件式を満たしていない時に実行する処理・返す値
先輩くん
三項演算子を使ったサンプルコードを用意したので、確認してみましょう!
// if文を使用した書き方
let flag1 = true;
let text1;
if (flag1) {
text1 = "flagに代入されている値はtrueだよ!";
} else {
text1 = "flagに代入されている値はfalseだよ!";
}
console.log(text1); // => flagに代入されている値はtrueだよ!
// 三項演算子を使用した書き方
let flag2 = true;
let text2 = flag2 ? "flagに代入されている値はtrueだよ!" : "flagに代入されている値はfalseだよ!";
console.log(text2); // => flagに代入されている値はtrueだよ!
上記のコードは、同じ処理内容をif文と三項演算子それぞれ記述したものになります。三項演算子を使用したコードの方がスッキリして見えますね!
else if
三項演算子でelse ifを使用する書き方は以下のとおりです。
条件式① ? true① : 条件式② ? true②: false;
コード解説
- 条件式①:if()内に記述する条件式
- true①:if()の条件式を満たした時に実行する処理・返す値
- 条件式②:else if()内に記述する条件式
- true②:else if()の条件式を満たした時に実行する処理・返す値
- false:全ての条件式を満たしていない時に実行する処理・返す値
先輩くん
三項演算子のelse ifを使ったサンプルコードを用意したので、確認してみましょう!
let num = 33;
// if文を使用した書き方
if (num >= 50) {
console.log("50以上");
} else if (num >= 40) {
console.log("40以上");
} else if (num >= 30) {
console.log("30以上");
} else {
console.log("30未満");
}
// 三項演算子を使用した書き方
num >= 50
? console.log("50以上")
: num >= 40
? console.log("40以上")
: num >= 30
? console.log("30以上")
: console.log("30未満");
if~elseに比べると、そこまで見やすいコードになったとは言いづらいですね。。この程度であれば三項演算子を使用しても問題ありませんが、ネストの深い条件分岐をする際は三項演算子だと逆にコードが読みづらくなってしまう可能性があるため注意しましょう。