【JavaScript】三項演算子の書き方とIf文との違い～複数条件～

簡易的な条件判定を行うことができ、If文の代わりに利用される三項演算子について紹介していきます。

本記事で分かること

• 三項演算子の基本的な記述方法
• 三項演算子で複数条件を指定する
• If文との違い、使い分け方
• 条件がNullの場合の処理

三項演算子とは

『条件演算子』とも呼ばれ、構文の中で３つの項を取ることから三項演算子と呼ばれます。

下記のような『？』を使用した記述を見たことはないでしょうか。

これが三項演算子と呼ばれる記述方法です。三項演算子を知らない方からするとこれだけでもパニックだと思います。

三項演算子は指定した条件に一致するかどうかで処理を分岐させるIF文と同じようなもので、上記のサンプルでは条件式『x > 1』に当てはまるかどうかで”A”もしくは”B”の処理が実行されるというものです。

三項演算子の記述方法

三項演算子の構文について紹介していきます。

構文

三項演算子は上記の通り1行で記述することができます。

条件に一致する場合はtrueの処理を行い、条件に一致しない場合はfalseの処理を実行します。

実際にサンプル構文を使って処理を確認してみましょう。

サンプル構文

//変数dogNameを定義して初期化
const dogName = "ダックスフンド";

//変数dogNameに値が入っているかどうかを判定
const name = dogName ? dogName : "ゲスト";

//三項演算子で条件判定した結果を出力
console.log(`こんにちは、${name}さん`);

//出力結果
こんにちは、ダックスフンドさん 

上記のサンプル構文は定義されている変数に値が入っているかいないかによって処理を分けています。

以下コードの解説を行っていきます。

2行目 変数dogNameを定義して文字列”ダックスフンド”を格納しています。

5行目 三項演算子の条件判定の結果を格納する変数nameを定義します。条件式は2行目で定義した変数dogNameです。

この変数に値が入っていれば、2行目で初期化した文字列”ダックスフンド”を変数nameに格納します。

値が入っておらずnullと判定された場合は文字列”ゲスト”を格納します。

8行目 console.log()で変数nameに格納された文字列を出力します。

今回は最初の行にて文字列を事前に登録してから処理を行っているため出力結果は『こんにちは、ダックスフンドさん』となりました。

ちなみにですが、上記のコードはIf文で記述することも可能です。

If文での書き換え

const dogName = "ダックスフンド";

//If文で条件判定の結果を格納する変数nameを定義
let name;

//変数dogNameに値が入っているかを判定
if (dogName) {
  name = dogName;
} else {
  name = "ゲスト";
}

//If文での判定結果を出力
console.log(`こんにちは、${name}さん`);

//出力結果
こんにちは、ダックスフンドさん 

上記のようにIf文で書き換えすることもでき、どちらの構文も出力結果は同じになります。

複数条件を使用した三項演算子

条件式に一致もしくは不一致の場合にさらに条件を付けて分岐させる(入れ子のような？)記述方法について紹介していきます。

条件式1が true の時にさらに条件付けをする

条件式1がtrueであった時に条件式2の判定をさせる記述方法です。

条件式1が false の時にさらに条件付けをする

条件式1がfalseの時に条件式2の判定をさせる記述方法です。

三項演算子を入れ子で記述するサンプル構文

条件式1が false の時にさらに条件付けをする三項演算子を利用したサンプルになります。

//ドックフードのタイプを判定してそれに対応した文字列を返す関数foodTypeを定義します
function foodType(food) {
  return food === 'ウェットタイプ'
    ? "しっとり柔らか！"
    : food === 'ドライタイプ'
    ? "カリカリ！"
    : food === 'セミドライタイプ'
    ? "どっちつかず!"
    : "新触感！";
}

//関数foodTypeに引数を与えて呼び出します。
console.log("あなたのドックフードは" + foodType("ドライタイプ"));

//出力結果
あなたのドックフードはカリカリ！ 

引数を与えて関数foodTypeを呼び出してドックフードのタイプを判定して文字列を返すサンプルです。今回はドックフードタイプとして引数に”ドライタイプ”を与えて関数を呼び出しています。