JavaScriptに出てくるはてなマーク(?)とコロン(:)は何か?条件演算子を紹介

2021年5月11日

JavaScriptの条件演算子の概要

JavaScriptのコードを見ていくと、下記の参考1のコードのように、はてなマーク(?)やコロン(:)を見かけることがあります。

  • 参考1
var seijin = (age < 20) ? "未成年です":"成人しています";

このように、JavaScriptで見かける「?」や「:」は条件演算子と呼ばれるものです。
JavaScriptに限らず、「=」や「+」などをプログラミング言語では演算子と呼びます。
「?」や「:」は、これらの記号を使うことによって条件式を作ることができるため、条件演算子と呼ばれています。

この条件演算子は、下記のような構文で作られます。

  • 条件演算子の構文
変数 = 条件 ? 値1 : 値2;

これは条件によって判定を行い、条件に合致していれば値1を変数に代入し、合致していなければ変数に値2を代入します。

この構文に従って参考1のコードを読み解くと、構文の変数にあたるのが「var seijin」、状態にあたるのが「(age < 20)」、値1は「未成年です」のテキスト、そして値2は「成人しています」のテキストです。
つまり、「(age < 20)」の条件で判定を行い、ageが20未満であれば「未成年です」のテキストを変数seijinに代入し、ageが20以上であれば「成人しています」のテキストを変数seijinに代入します。
この後、変数seijinのテキストを表示させるコードを用意すれば、年齢によって成人か否かを示すアプリケーションが完成します。

条件演算子のメリット

条件演算子を使うメリットは、if文を使うよりもコードを短くできることにあります。
先ほどの参考1のコードを条件演算子を使わず、if文で表現すると参考2のコードになります。

  • 参考2
if (age < 20){
var seijin = "未成年です";
} else {
var seijin = "成人しています";
};

このように、if文で記述すると、参考1に比べてコードが長くなってしまいます。
条件演算子は複雑な条件式には使えませんが、YesかNoかで答えられる簡単な条件式であれば、条件演算子を使ったコードの方がシンプルな記述にできます。