みなさんこんにちは、現役正社員エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験から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フォローしてもらえると嬉しいです🦈
サメハック。