本記事では、JavaScriptでif文を省略して書くことが出来る三項演算子の書き方・使い方について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次
三項演算子の書き方・使い方
三項演算子の基本的な書き方は以下のとおりです。
条件式 ? 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に比べると、そこまで見やすいコードになったとは言いづらいですね。。この程度であれば三項演算子を使用しても問題ありませんが、ネストの深い条件分岐をする際は三項演算子だと逆にコードが読みづらくなってしまう可能性があるため注意しましょう。