【JavaScript】三項演算子について解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、10年目エンジニアです。

この記事では、 JavaScriptの三項演算子について

三項演算子とは
三項演算子を使うと便利なケース
三項演算子を使ったサンプルプログラム

と、この記事で丁寧に解説していきます。

前提条件：実行環境について
三項演算子とは
三項演算子を使うと便利なケース
三項演算子を解説するプログラムの概要
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
まとめ：三項演算子を使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

三項演算子とは

三項演算子とは、if文のように条件で分岐することができる演算子のことです。
三項演算子の使い方サンプルは以下になります。

(条件式) ? (trueの場合の結果) : (falseの場合の結果)

1	(条件式) ? (trueの場合の結果) : (falseの場合の結果)

上記のサンプルをif文で書くと、以下になります。

if (条件式) {
    (trueの場合の結果)
} else {
    (falseの場合の結果)
}

if (条件式) {

(trueの場合の結果)

} else {

(falseの場合の結果)

}

三項演算子とif文は、同じ内容を書いています。
が、三項演算子を使うとこのようにスマートに書くことができるケースがあります。

三項演算子を使うと便利なケース

三項演算子を使うと便利なケースは、シンプルな条件に応じて値を設定するときです。

シンプルな条件のif文のサンプルは以下です。

var sample = 'aa'
var result = ''
if (sample == 'aa') {
    result = '一致'
} else {
    result = '不一致'
}

var sample = 'aa'

var result = ''

if (sample == 'aa') {

result = '一致'

} else {

result = '不一致'

}

上記を三項演算子で書くと、下記になります。

var sample = 'aa'
var result = sample == 'aa' ? '一致' : '不一致'

1 2	var sample = 'aa' var result = sample == 'aa' ? '一致' : '不一致'

このようにシンプルな条件分岐で値を設定する場合は、簡潔に書くことができる三項演算子を使うことをおすすめします。

逆に

判定する条件が複雑
条件分岐後の処理が複雑

というケースは、if文を使うことをおすすめします。

では、次の章で実際に使ってみます。

三項演算子を解説するプログラムの概要

三項演算子を解説するプログラムでは、

HTML
JavaScript

の2ファイルを使います。

三項演算子を使って偶数か奇数かを判定して結果が

trueの場合
falseの場合

の2パターンで実行し、結果を表示させます。

フォルダ構成は以下のようになっています。
三項演算子を解説するフォルダ構成

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>三項演算子サンプル</title>
    </head>
    <body>
        <h2>三項演算子サンプル</h2>
        <h3>trueの場合</h3>
        <div id="resultTernary1"></div>
        <h3>falseの場合</h3>
        <div id="resultTernary2"></div>
        <script src="js\sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>三項演算子サンプル</title>

</head>

<body>

<h2>三項演算子サンプル</h2>

<h3>trueの場合</h3>

<h3>falseの場合</h3>

</body>

</html>

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

HTMLで外部のJavaScriptを読み込むやり方を解説します

JavaScriptサンプルプログラム

// trueの場合
var number1 = 12
var result1 = number1 % 2 == 0 ? '偶数' : '奇数'
var resultTernary1 = document.getElementById('resultTernary1')
resultTernary1.innerHTML = number1 + 'は' + result1

// falseの場合
var number2 = 5
var result2 = number2 % 2 == 0 ? '偶数' : '奇数'
var resultTernary2 = document.getElementById('resultTernary2')
resultTernary2.innerHTML = number2 + 'は' + result2

// trueの場合

var number1 = 12

var result1 = number1 % 2 == 0 ? '偶数' : '奇数'

var resultTernary1 = document.getElementById('resultTernary1')

resultTernary1.innerHTML = number1 + 'は' + result1

// falseの場合

var number2 = 5

var result2 = number2 % 2 == 0 ? '偶数' : '奇数'

var resultTernary2 = document.getElementById('resultTernary2')

resultTernary2.innerHTML = number2 + 'は' + result2

%算術演算子
getElementByIdメソッド
innerHTMLプロパティ

については、こちらの記事をご参考ください。

%算術演算子
【JavaScript】剰余を計算することができる%算術演算子（パーセント）について解説します

getElementByIdメソッド
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します

innerHTMLプロパティ
【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します

実行結果

作成したHTMLをブラウザで開きます。

JavaScriptの三項演算子を解説

条件分岐ができていることが確認できました。

まとめ：三項演算子を使ってみよう

以上がJavaScriptの三項演算子についての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ