【JavaScript】三項演算子の使い方 | if文との使い分けも解説します

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・JavaScriptの三項演算子ってどうやって使うの?
・if文とはどうやって使い分けたらいいの?
・三項演算子の応用テクニックが知りたい!

というお悩みを解決する記事になっています。


この記事の内容

・三項演算子の使い方
・三項演算子ではなくif文を使うべきケース
・三項演算子を使用する際に便利なテクニック


傍楽たろう
なお、if文の使い方については以下の記事にて詳しく解説していますので、使い方を忘れてしまった…という方はこちらもぜひご覧くださいね。

おすすめ記事

JavaScriptでプログラミングするうえで欠かせない条件分岐。条件に応じて処理する方向を変えることはプログラミングでは頻繁に起こりえます。その際は、if文を使うのが最もオーソドックスな方法です。 今回は、if文によって分岐処理を[…]

ジャッジイメージ

レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


三項演算子とは?

三項演算子は、if文のような条件分岐を実装する際に使う演算子です。

三項演算子の名前が示す通り、3つのオペランドと2つの記号で構成されており、if文よりも記述量が少なく済むという点でメリットがあります。

言葉だけでは分かりにくいと思いますので、以下の基本構文をご覧ください。

三項演算子の基本構文

条件式 ? 式1 : 式2

上記の「条件式」がtrueを返す場合に式1が実行され、逆にfalseを返す場合には式2の内容が実行されます。

具体的には以下の通りです。

const word = "傍楽ブログ"

return word.length == 0 ? "空っぽです" : "文字が存在します"

# 実行結果
=> "文字が存在します"

上記の例では、wordという変数に代入されている文字数が0ではない(=条件式がfalseを返す)ため、「:」の後の文章が返却されることになります。

三項演算子とif文の比較

ここでは、三項演算子を使う場合とif文を使う場合を比較し、三項演算子を使うとどの程度記述を簡略化できるのかを見ていきましょう。

const number_1 = 10;
const number_2 = 11;
let max_number = 0;

// if文で記述した場合
if (number_1 < number_2) {
  max_number = number_2;
} else {
  max_number = number_1;
}

// 三項演算子で記述した場合
max_number = number_1 < number_2 ? number_2 : number_1;

console.log("最大値:" + max_number);
=> "最大値: 11"

上記では、2つの値のうち大きい方を変数に格納してコンソールに出力する処理を実装しています。

ご覧の通り、if文では5行必要だったのに対して、三項演算子を使うとそれをたった1行に収めることができます。

冒頭でもお話しした通り、三項演算子のメリットは、if文で記述できる分岐処理をより簡単に記述できることです。

処理結果や処理速度が変化することはありませんので、簡略化できるものはできるだけ三項演算子を使用していきましょう。

三項演算子とif文の使い分け

先ほど、「簡略化できるものはできるだけ三項演算子を使用していきましょう」とお伝えしましたが、実はif文を何でもかんでも三項演算子に置き換えることはおすすめしません。

具体的には、以下のケースに当てはまる場合には、そのままif文を使用するようにしましょう。

  • 条件分岐が複雑な場合
  • 条件分岐がネストしている場合

それぞれ順に解説していきます。

条件分岐が複雑な場合

条件分岐が複雑な場合には、if文をそのまま使用しましょう。

具体的には、以下のようなケースを指します。

const number = 10

# if文を使用する場合
if (number == 10) {
  console.log("数字は10です")
} else if (number >= 100) {
  console.log("数字は100以上です")
} else if (number >= 1000) {
  console.log("数字は1000以上です")
} else {
  console.log("ものすごく大きな数字です")
}

# 三項演算子に置き換えた場合
console.log(
  number == 10 ? "数字は10です" :
  number >= 100 ? "数字は100以上です" :
  number >= 1000 ? "数字は1000以上です" :
  "ものすごく大きな数字です";
)

このように else if が何度も使われている場合には、たとえそれを三項演算子に置き換えたとしてもあまりメリットは享受できません

むしろ、「?」や「:」の記号が何度も出てきていて、元々のif文と比べて可読性が少し落ちてしまっていると思います。

少し記述量を削減した一方で可読性が落ちてしまうと本末転倒ですので、条件分岐が複雑な場合には素直にif文を使用するようにしましょう。

条件分岐がネストしている場合

条件分岐がネストしている場合にも、if文をそのまま使用するべきです。

具体的には、以下のようなケースです。

let year = 2003;

if (year % 4 == 0) {
  if (year % 100 == 0) {
    year % 400 == 0 ? console.log("うるう年です") : console.log("うるう年ではありません");
  } else {
    console.log("うるう年です");
  }
} else {
  console.log("うるう年ではありません");
}

上記の例では、変数がうるう年かどうかを判別する機能を実装しています。

通常のif文でも少しややこしくなっていますが、こちらを三項演算子に置き換えると以下のようになります。

let year = 2003;

year % 4 == 0 ?
  year % 100 == 0 ?
      year % 400 == 0 ? console.log(year + "年はうるう年です")
      : console.log(year + "年はうるう年ではありません")
  : console.log(year + "年はうるう年です")
: console.log(year + "年はうるう年ではありません");

記述量は少し減りましたが、何が何だかよく分からない状態になってしまっていますよね。

このように、条件分岐が深くネストしている場合に全てを三項演算子に置き換えると、可読性がガクッと下がってしまいます

三項演算子は、最も簡単な分岐処理である「if (条件式) { 処理 } else { 処理 }」で表せる場合に適用するのに留めるのがポイントです。

以上を踏まえて、バランス良く三項演算子を使うように心がけましょう。

三項演算子の便利なテクニック

三項演算子を上手く使うことで、複雑な分岐処理をより簡単に記述できます。ここでは、三項演算子を使うなら覚えておきたいテクニックを、3つ解説します。

三項演算子は改行しても大丈夫

1つ目のテクニックは、三項演算子の改行です。三項演算子は、途中で改行してもエラーになることはありません。そのため、適度に改行することでソースコードの見栄えを良くすることができます。以下のサンプルコードをご覧ください。

let product1 = {
    name: 'りんご',
    price: 120
};

let product2 = {
    name: 'みかん',
    price: 180
}

// 三項演算子は改行可能
// 結果:りんごがみかんよりも高い
product1.price > product2.price 
? console.log(product1.name + "が"+ product2.name +"よりも高い。") 
: console.log(product2.name + "が"+ product1.name +"よりも高い。");

条件式を複数組み合わせても大丈夫

2つ目のテクニックは、条件式の記述方法についてです。if文と同様に、条件式は複数組み合わせられるので、より複雑な条件を実装できます。以下のサンプルコードをご覧ください。

let age = 15;
let smartphone_fee_base = 12000;

let smartphone_fee_real = (
  age >= 65
  ? smartphone_fee_base * 0.8 // 65歳以上は2割引
  : age < 13
  ? smartphone_fee_base * 0.5 // 小学生は半額
  : age < 16
  ? smartphone_fee_base * 0.6 // 中学生は4割引
  : age < 19
  ? smartphone_fee_base * 0.7 // 高校生は3割引
  : smartphone_fee_base       // 上記以外は割引なし
);

console.log("携帯料金:" + smartphone_fee_real + "円");
=> "携帯料金:7200円"

サンプルコードでは、ベースとなる料金に対して年齢ごとに割引を適用し、実質的な料金を計算する処理を三項演算子によって実装しています。

三項演算子の中に新しく三項演算子を混ぜて入れ子にすることで、複雑な条件分岐を簡単に記述可能です。ちなみに、サンプルコードの分岐処理をif文で記述した場合は以下の通りです。

if (age >= 65) {
  smartphone_fee_real = smartphone_fee_base * 0.8; // 65歳以上は2割引
} else if(age < 13) {
  smartphone_fee_real = smartphone_fee_base * 0.5; // 小学生は半額 
} else if(age < 16) {
  smartphone_fee_real = smartphone_fee_base * 0.6; // 中学生は4割引  
} else if(age < 19) {
  smartphone_fee_real = smartphone_fee_base * 0.7; // 高校生は3割引  
} else {
  smartphone_fee_real = smartphone_fee_base; // 上記以外は割引なし
}

また、括弧とカンマを組み合わせて使うことで、分岐後の処理を複数記述できます。以下のサンプルコードをご覧ください。

let age = 15;
let smartphone_fee_base = 12000;

// 分岐後の処理を複数続けるには
// (処理, 処理)のように記述する
age >= 65 ? (
  smartphone_fee_real = smartphone_fee_base * 0.8,
  console.log("シニア割引を適用しました")  // 65歳以上は2割引
) : age < 13 ? (
  smartphone_fee_real = smartphone_fee_base * 0.5,
  console.log("小学生割引を適用しました")  // 小学生は半額
) : age < 16 ? (
  smartphone_fee_real = smartphone_fee_base * 0.6,
  console.log("中学生割引を適用しました")  // 中学生は4割引
) : age < 19 ? (
  smartphone_fee_real = smartphone_fee_base * 0.7,
  console.log("高校生割引を適用しました") // 高校生は3割引
) : smartphone_fee_real = smartphone_fee_base; // 上記以外は割引なし

console.log("携帯料金:" + smartphone_fee_real + "円");
=> "携帯料金:7200円"

携帯料金の計算処理を書き換えて、割引が適用された旨を出力する処理を加えてみました。

三項演算子によって分岐した後の処理を複数記述するためには、「(処理, 処理)」のようにカンマを使って処理をつなぎ合わせ括弧で囲みます。閉じ括弧が来るまで処理はいくつでも記述可能です。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

本記事でご紹介した通り、三項演算子をうまく活用できるようになると、コードの記述量が減り、可読性のアップもある程度見込めます

一方で、if文を何でもかんでも三項演算子に置き換えてしまうと、却って可読性の低いコードが出来上がってしまいますので、「置き換えたら分かりやすくなるか」という視点を持って使用するようにしましょう。

最後にもう一度、本記事の内容を確認しておきましょう。

  • 三項演算子を使うとif文を簡単に記述できる
  • 複雑なif文を三項演算子に置き換えると却って可読性が低くなる
    →条件分岐が複雑な場合はif文を使用する
    →条件分岐がネストしている場合はif文を使用する
  • 三項演算子の便利なテクニック
    →三項演算子は改行しても大丈夫
    →条件式を複数組み合わせても大丈夫

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。