2.6 比較演算子と論理演算子

JavaScriptには、比較演算子と論理演算子がある。比較演算子は、データ型まで厳密に比較を行う厳密等価と厳密不等価が用意されている。
数値の範囲で判断するときには、比較演算子と論理演算子を組み合わせて使う。

サンプル・プログラム

比較演算子：Number型

JavaScriptには、値の大小を比較する比較演算子が用意されている。
比較演算子は a operator b のような式になる2項演算子で、結果は Boolean型で、成立すればtrueを、不成立ならfalseを返す。
イコール1文字 = は代入演算子だったが、2文字 == になると等価演算子となる。

比較演算子
演算子	意味
==	等価
!=	不等価
===	厳密等価
!==	厳密不等価
>	より大きい
>=	以上
<	より小さい
<=	以下

まず、Number型の比較結果を見ていこう。

comp1.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let a = 3, b = 2;
  23:     let c;
  24:     document.getElementById('ret1').innerHTML = 'a = ' + a.toString();
  25:     document.getElementById('ret2').innerHTML = 'b = ' + b.toString();
  26:
  27:     c = a > b;
  28:     document.getElementById('ret3').innerHTML = 'a > b ... ' + c.toString();
  29:     c = a < b;
  30:     document.getElementById('ret4').innerHTML = 'a < b ... ' + c.toString();
  31:     c = a == b;
  32:     document.getElementById('ret5').innerHTML = 'a == b ... ' + c.toString();
  33:     c = a != b;
  34:     document.getElementById('ret6').innerHTML = 'a != b ... ' + c.toString();
  35: }
  36: </script>

比較演算子：String型

次に、String型の比較結果を見ていこう。

comp2.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let a = 'abc', b = 'abd';
  23:     let c;
  24:     document.getElementById('ret1').innerHTML = 'a = ' + a.toString();
  25:     document.getElementById('ret2').innerHTML = 'b = ' + b.toString();
  26:
  27:     c = a > b;
  28:     document.getElementById('ret3').innerHTML = 'a > b ... ' + c.toString();
  29:     c = a < b;
  30:     document.getElementById('ret4').innerHTML = 'a < b ... ' + c.toString();
  31:     c = a == b;
  32:     document.getElementById('ret5').innerHTML = 'a == b ... ' + c.toString();
  33:     c = a != b;
  34:     document.getElementById('ret6').innerHTML = 'a != b ... ' + c.toString();
  35: }
  36: </script>

String型ではUnicodeを用い、標準的な辞書順に基づいて比較が行われる。ここで辞書順というところが曲者で、実際には、String型では大小比較は用いず、等価または不等価のみにとどめた方がいい。

比較演算子：厳密等価と厳密不等価

イコールが3文字 === は厳密等価演算子と呼び、オペランドの値もデータ型も揃って等しいときにtrueとなる。厳密不等価演算子 !== はその逆だ。

comp3.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let a = 123, b = '123';
  23:     let c;
  24:     document.getElementById('ret1').innerHTML = 'a = ' + a.toString() + '...' + typeof a;
  25:     document.getElementById('ret2').innerHTML = 'b = ' + b.toString() + '...' + typeof b;
  26:
  27:     c = a > b;
  28:     document.getElementById('ret3').innerHTML = 'a > b ... ' + c.toString();
  29:     c = a < b;
  30:     document.getElementById('ret4').innerHTML = 'a < b ... ' + c.toString();
  31:     c = a == b;
  32:     document.getElementById('ret5').innerHTML = 'a == b ... ' + c.toString();
  33:     c = a != b;
  34:     document.getElementById('ret6').innerHTML = 'a != b ... ' + c.toString();
  35:     c = a === b;
  36:     document.getElementById('ret7').innerHTML = 'a === b ... ' + c.toString();
  37:     c = a !== b;
  38:     document.getElementById('ret8').innerHTML = 'a !== b ... ' + c.toString();
  39: }
  40: </script>

"comp3.html" は、数値 123と文字列 '123' を比較するプログラムだ。
「2.2 データ型 - 動的型付け」で紹介したように、JavaScriptでは動的型付けが行われるため、等価演算子 123 == '123' はtrueになる。厳密等価演算子を使うとfalseになる。
予期しないバグの温床になるため、JavaScriptで等価比較を行う際は、厳密等価演算子を用いた方が無難である。

論理演算子

これまで見てきたように、IE11はブラウザとしては旧式で、JavaScriptプログラムが期待通りの動きをしない場合がある。そこで、IE11を識別するプログラムを作ってみることにする。
IE10以前では、ユーザーエージェント（navigator.userAgent）に 'MEIE' という文字列が含まれている。IE11では、これが 'Trident' という文字列に替わる。
これをプログラムにしたものが "logic1.html" である。

logic1.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let ua = navigator.userAgent.toUpperCase();     //大文字変換
  23:     let res;                                        //判定結果
  24:
  25:     //ユーザーエージェントで判定
  26:     if (ua.indexOf('MSIE') > -1) {
  27:         res = 'IEです';
  28:     } else if (ua.indexOf('TRIDENT') > -1) {
  29:         res = 'IEです';
  30:     } else {
  31:         res = 'IEではありません';
  32:     }
  33:
  34:     //結果表示
  35:     document.getElementById('res').innerHTML = res;
  36: }
  37: </script>

toUpperCase() は文字列を大文字にするメソッド。indexOf() は、文字列に指定した部分文字列を含むかどうかを調べるメソッドである。部分文字列がなければ -1 が返る。
これを、あとで説明するif～else if～else文を使って場合分け判別している。
ただ、1つめのif文と、2つめのelse if文は、いずれも「IEである」場合だ。これを1つにまとめた方が、プログラムが短くなるし、バグを減らす効果もある。

こういうときに使うのが論理演算子である。
2つ以上の式がすべて成り立つか（論理積）、いずれか1つ以上が成り立つか（論理和）、1つも成り立たないか（論理否定）の3種類がある。

論理演算子
演算子	意味
&&	論理積（AND）
\|\|	論理和（OR）
!	論理否定（NOT）

logic2.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let ua = navigator.userAgent.toUpperCase();     //大文字変換
  23:     let res;                                        //判定結果
  24:
  25:     //ユーザーエージェントで判定
  26:     if ((ua.indexOf('MSIE') > -1) || (ua.indexOf('TRIDENT') > -1)) {
  27:         res = 'IEです';
  28:     } else {
  29:         res = 'IEではありません';
  30:     }
  31:
  32:     //結果表示
  33:     document.getElementById('res').innerHTML = res;
  34: }
  35: </script>

"logic2.html" は論理積を使って、IEである条件を1つの式にまとめたものだ。

比較演算子と論理演算子の組み合わせ

値の範囲で判断するとき、比較演算子と論理演算子の組み合わせを用いる。
たとえば、1980年代生まれかどうかを判断するプログラムが "comp3.html" である。生年は乱数 Math.random() を使って発生させる。

comp4.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let year = Math.floor(1950 + Math.random() * 70);
  23:     let a = '';
  24:     document.getElementById('year').innerHTML = year.toString();
  25:
  26:     if ((year >= 1980) && (year <= 1989)) {
  27:         a = 'です';
  28:     } else {
  29:         a = 'ではありません';
  30:     }
  31:     document.getElementById('ret').innerHTML = a;
  32: }
  33: </script>

生年を代入した変数 year が1980以上かつ1989以下なら1980年代生まれだと判断する。

comp5.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let year = Math.floor(1950 + Math.random() * 70);
  23:     let a = '';
  24:     document.getElementById('year').innerHTML = year.toString();
  25:
  26:     if ((year < 1980) || (year > 1989)) {
  27:         a = 'ではありません';
  28:     } else {
  29:         a = 'です';
  30:     }
  31:     document.getElementById('ret').innerHTML = a;
  32: }
  33: </script>