みなさんこんにちは、現役正社員エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
今回は三項演算子について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- 三項演算子（条件演算子）が何かがわかる
- 三項演算子（条件演算子）の使い方がわかる
三項演算子（条件演算子）とは
※以下三項演算子に統一
三項演算子とは、簡単に言うと条件分岐の一種で、
3つの項目を用いて、if～else文を表現する記法です。
簡単に言うとif〜else文の省略形です。
☆ちなみにプログラミングにおいて、
省略形のことをショートハンドと言ったりします。
三項演算子（条件演算子）の使い方：処理の分岐
先ほども触れたように、三項演算子とは
読んで字のごとく、3つの項目を必要とします。
その項目が以下の3つです。
- 条件式
- trueの場合の処理（値）
- falseの場合の処理（値）
■構文
条件式 ? trueの場合の処理: falseの場合の処理 ;このように記述します。
ちょっとわかりにくいと思うので、
ソースに落とし込んで動かしてみてください。
実行環境をお持ちでない方は以下の記事を参考に
オンラインで実行してみてください。
例：定数numberを宣言し、numberの値が10か否かによって出力を分ける処理を作ってみましょう。
// 定数の宣言
const number = 10;
// 条件式 ? trueの場合の処理 : falseの場合の処理
number === 10 ? console.log("10です！"): console.log("10ではありません！");初めて見た方だと、戸惑うかと思いますが、
「10です！」と正しく出力されましたよね。
前述したとおり、三項演算子はif〜else文のショートハンドなので
if〜else文に書き換えることも可能です。
if (number === 10) {
console.log("10です！");
} else {
console.log("10ではありません！");
}ちなみに今回の三項演算子を、各項目に分解するとこうです！
条件式：numberは10ですか？
trueの場合：「10です！」と出力
falseの場合：「10ではありません！」と出力
①条件式②trueの場合の処理③falseの場合の処理
三項演算子（条件演算子）の使い方: 戻り値の分岐
ここからは、戻り値を分岐させる処理を
三項演算子を用いて作ってみましょう。
■ 構文
変数 = 条件式 ? trueの場合の戻り値: falseの場合の戻り値 ;このように、条件式の結果によって、戻り値を分岐させることも可能です。
例：scoreの値が70以上なら、変数resultに「合格です」、70未満なら「不合格です」を代入
// 定数の宣言
const score = 90;
// 変数の宣言 ※初期値には空文字が入ります
let result = "";
// 条件の結果により、resultに代入する値を分ける
result = score >= 70 ? "合格です" : "不合格です";
console.log(result);
// 合格ですおまけ：問題
定数numberを宣言し、
numberが奇数なら「奇数です」
number偶数なら「偶数です」
と出力してください。
奇数・偶数について復習したい方はこちら
まとめ
- 三項演算子とは、if~else文のショートハンドです。
- 条件式 ? trueの場合の処理: falseの場合の処理 ;
- 三項演算子は処理だけでなく、戻り値を分岐させることもできます
- elseの処理を省略することはできません。
ちなみに現場では戻り値を分岐させるときによく使うよ！
おまけの答え
その1：処理を分岐させるパターン
// 定数の宣言
const number = 100;
// 条件の結果により、処理を分岐
number % 2 === 1 ? console.log("奇数です") : console.log("偶数です");
// 偶数ですその2：戻り値を分岐させるパターン
// 定数の宣言
const number = 77;
// 変数の宣言
let result = "";
// 条件の結果により、resultに代入する値を分ける
result = number % 2 === 1 ? "奇数です" : "偶数です";
console.log(result);
// 奇数
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
サメハック。
