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

みなさんこんにちは!

今回の記事は、

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

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


この記事の内容

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


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

おすすめ記事

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

ジャッジイメージ

フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト



三項演算子とは?

三項演算子は、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文を使用する
  • 三項演算子の便利なテクニック
    →三項演算子は改行しても大丈夫
    →条件式を複数組み合わせても大丈夫

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

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