【JavaScript】三項演算子に複数の条件式を定義しよう！

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

JavaScriptの解説シリーズです。

今回は三項演算子に複数の条件式を定義する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

三項演算子に複数の条件を定義できる

三項演算子を使いこなそう！

三項演算子（条件演算子）とは
1. 三項演算子の一般的な構文
三項演算子に複数の条件式を定義しよう
まとめ

三項演算子（条件演算子）とは

※以下三項演算子に統一

三項演算子とは、簡単に言うと条件分岐の一種で、
3つの項目を用いて、if～else文を表現する記法です。

簡単に言うとif〜else文の省略形です。

☆ちなみにプログラミングにおいて、
省略形のことをショートハンドと言ったりします。

三項演算子とは、if~else文のショートハンドだよ！
基礎について詳しく知りたい人は次の記事を読んでね！

【JavaScript】三項演算子・条件演算子【if〜else文のショートハンド】

この記事を読むと・・・三項演算子（条件演算子）が何かがわかる三項演算子（条件演算子）の使い方がわかる

三項演算子の一般的な構文

変数 = 条件式 ? trueの場合の戻り値: falseの場合の戻り値 ;

これが基本的な使い方だよ！

三項演算子に複数の条件式を定義しよう

今回やりたいことは、前述したif ~ else文にelse ifを追加することです。

複数の条件式を使う構文

変数 = 条件式1 ? trueの場合の戻り値
      : 条件式2 ? trueの場合の戻り値
      : 条件式3 ? trueの場合の戻り値
      : 全てfalseの場合の戻り値 ;

これで複数の条件式を使って戻り値を分岐させることができるよ！

実際に動かしてみよう！

const tablet = "Amazon"

const os = 
    tablet === "iPad" ? "ios" 
    : tablet === "glaxy" ? "android"
    : tablet === "Amazon" ? "fire"
    : "その他";
    
    
console.log(os); 
// "fire"

複数の条件式を使う際の注意点

Webでは三項演算子をそもそも使うべきでない、という話をちょくちょく見かけますが
筆者が業務で関わった案件でそのような考え方の人とは出会ったことがありません。
※むしろネストが深くなることを嫌う人の方が多い印象です。

ただ、複雑な条件分岐を行う場合には使用すべきではないと思います。

その辺りの判断は慣れの問題となってしまいますが
こういった考え方もある、ということ自体は知っておいて損はないと思います。

三項演算子は単純な条件分岐を行う場合や1つの値を返す場合に便利だよ！
でも、複雑な条件分岐や複数の値を設定する場合には、
可読性や保守性の観点から三項演算子を使わずにif文やswitch文を使おう！

まとめ

変数 = 条件式1 ? trueの場合の戻り値 : 条件式2 ? trueの場合の戻り値 : 全てfalseの場合の戻り値 ;
複雑な条件分岐での使用は非推奨

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram