#目次
1.はじめに
2.おさらい:比較演算子とは？
3.比較演算子の使い方
4.「==」と「=== (イコール3つ)」の違い
5.複数の条件を比較
6.論理演算子
7.nullとundefinedの比較について
8.まとめ
9.おわりに
##1. はじめに
これまで記事にしてきたJavaScriptの学習に関して、抜けがあった分を記載する。
今回は「JavaScriptにおける様々な演算子や真偽値」に関して記述していく。
以前[「if / if else /else if」](https://qiita.com/Stack_up_Rising/items/ee1c7dc7053d3b8d20c6#5-%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90)で記事にした際に比較演算子に関して少しだけ触れたが、その詳細を書いていなかったので、今回は様々な演算子や真偽値に関して深堀りして書いていきたい。 ##2. おさらい:比較演算子とは？ ###概要 :::note 2つの値を比較することが目的の演算子のこと。 ::: :::note if文やfor文・while文などのループ処理の条件式に使われることが多い。 ::: ###JavaScriptにおける演算子の一覧 JavaScriptにおいて、一般的に使用される演算子の一覧は以下の通り。
| 比較演算子 | 意味 | 使用例 | 結果 |
|---|---|---|---|
| > | 左辺が右辺よりも大きい | 8 > 2 | true |
| >= | 左辺が右辺より大きいか同じ | 3 >= 3 | true |
| < | 左辺より右辺が大きい | 7 > 4 | false |
| <= | 左辺より右辺が大きいか同じ | 3 <= 6 | true |
| == | 左辺と右辺の値が同じ | '7' > 7 | true |
| === | 左辺と右辺の値と型がおなじ | '7' === 7 | false |
| !==(!=) | 左辺と右辺が異なる | '7' !== 7 | false |
| :::note warn | |||
| 2つの値を比較して正しいかどうかを「true / false」で返してくれるのが特徴。 | |||
| ::: | |||
| :::note warn | |||
| 「>」や「<」については、 | |||
| 左辺と右辺の値が大きいか小さいかを比較する時に使われ、 | |||
| 「==」や「===」については | |||
| 両方の値が等しいかどうかを比較する時に使われる。 | |||
| ::: | |||
| ##3. 比較演算子の使い方 | |||
| ###基本的な使い方 | |||
| 比較演算子の簡単な使い方を記載する。 | |||
| 下記は簡単な例題。 |
if(【値1】>【値2】) {
//値1が大きい場合の処理（trueの処理）
} else {
//値1が大きくない場合の処理（falseの処理）
}
例の場合、条件式に「 > 」を使っているので、「値1」が「値2」よりも大きい場合に「true」となる。
2つの値を比較することで「true / false」の結果を取得できるので、条件式が必要なプログラムに比較演算子は欠かせない存在となる。
###数値の比較 ####数値の比較に関しての例題〜変数の定義からコンソールへ出力 「数値」を比較した基本的な例を下記に記載する。
let result1 = 14 < 18;
let result2 = 7 === 8;
let result3 = 5 >= 5;
console.log( '14 < 18 → ' + result1 );
console.log( '7 === 8 → ' + result2 );
console.log( '5 >= 5 → ' + result3 );
【実行結果】
14 < 18 → true
7 === 8 → false
5 >= 5 → true
#####例題に関してのアンサー
#####result1
:::note warn
「10 < 20」を比較しており、左辺が小さい値なので「true」になる。
:::
#####result2
:::note warn
「7 === 8」を比較しており、どちらも同じ値ではないので「false」になる。
:::
#####result3
:::note warn
「>」ではなく「>=」を使って比較しているので、左辺が大きいか両方が等しければ「true」になる。
:::
###数値の比較に関しての例題〜if文
次にif文を使って例題を記載する。
let height = 183;
if( height > 175 ) {
console.log( '身長が高いです' );
} else {
console.log( '普通の身長です' );
}
【実行結果】
身長が高いです
####例題に関してのアンサー
:::note warn
変数heightの値が170よりも大きい値なので、結果的に「true」と判断されている。
:::
###文字列の比較 次に文字列の比較に関しての例題を記載する。
let result1 = 'あ' < 'い';
let result2 = '７' === '８';
let result3 = '三郎' >= '三郎';
console.log('あ < い → ' + result1);
console.log('７ === ８ → ' + result2);
console.log('Hello >= Hello → ' + result3);
【実行結果】
あ < う → true
７ === ８ → false
Hello >= Hello → true
####例題に関してのアンサー
#####result1
:::note
「あ < い」を比較しているが、これは数字の「1234…」みたいに文字も「あいうえ…」のように順番に数えている。
:::
↓
このように、最初に数えた文字はあとで数えた文字よりも「小さな値」になるので、
「あ < い」を比較すると「あ」のほうが小さな値になるので「true」になる。
#####result2
:::note warn
文字列の数字「７ === ８」(分かりづらいが全角表記)を比較しているのだが、
これは数値を比較した時と同じ結果となり「false」になる。
:::
#####result3
:::note warn
アルファベットの文字列を使って「Hello >= Hello」を比較しており、
両方が同じ文字列なので結果的に「true」になる。
:::
###Boolean(真偽値)の比較 今度は「Boolean（真偽値）」の「true / false」を比較してみる。 ####真偽値の例題
let result1 = true === false;
let result2 = true < false;
let result3 = true !== false;
console.log('true === false → ' + result1);
console.log('true < false → ' + result2);
console.log('true !== false → ' + result3);
【実行結果】
true === false → false
true < false → false
true !== false → true
####例題に関してのアンサー
#####result1
:::note warn
「true === false」を比較しているが、
当然ながらどちらも違う値なので結果は「false」になる。
:::
#####result2
:::note warn
「true < false」を比較しているが、
値の大きさとしては「true」の方が大きいので結果は「false」になる。
:::
#####result3
:::note warn
「true !== false」は、否定（!==）の比較なので、
異なる値が比較されているため「true」になる。
:::
##4. 「==」と「=== (イコール3つ)」の違い
冒頭でご紹介した比較演算子の一覧で、
両方の「値」が等しいかどうかを判断するのに「==」と「===」が使われると解説した。
ただし、「==」と「===」の違いがよく分かりづらい。
なので、その違いについて記載していく。
###等価演算子と厳密等価演算子 ==を等価演算子、===を厳密等価演算子という。 ####等価演算子 :::note 比較する際に、「値」だけをチェックする演算子を指す。 ::: ####厳密等価演算子 :::note 比較する際に、「値」と「型」の両方をチェックする演算子を指す。 ::: ####等価演算子と厳密等価演算子を使った例題 実際に双方に対し、例題を使って解説する。
let str = '14'; //文字列の10
let num = 14; //数値の10
//==と===の違いの確認
let result1 = str == num;
let result2 = str === num;
console.log('「== (等価演算子)」：' + result1);
console.log('「=== (厳密等価演算子)」：' + result2);
【実行結果】
「== (等価演算子)」：true
「=== (厳密等価演算子)」：false
#####例題に関してのアンサー
この例では、文字列の「10」と数値の「10」を比較した例になる。
値はどちらも「10」で同じなのだが、
型が「文字列型」と「数値型」で異なるために結果が変わっていく。
####String型とObject型 [等価演算子と厳密等価演算子](https://qiita.com/Stack_up_Rising/items/981098061164cb776bb4#%E7%AD%89%E4%BE%A1%E6%BC%94%E7%AE%97%E5%AD%90%E3%81%A8%E5%8E%B3%E5%AF%86%E7%AD%89%E4%BE%A1%E6%BC%94%E7%AE%97%E5%AD%90)の続きになるのだが、双方の演算子の変数を調べる「型」がある。 それがString型と、Object型の2つである。 ([後述の例題](https://qiita.com/Stack_up_Rising/items/981098061164cb776bb4#%E7%AD%89%E4%BE%A1%E6%BC%94%E7%AE%97%E5%AD%90%E3%81%A8%E5%8E%B3%E5%AF%86%E7%AD%89%E4%BE%A1%E6%BC%94%E7%AE%97%E5%AD%90%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E4%BE%8B%E9%A1%8C%E8%A9%B3%E7%B4%B0 )で、例題を使って更に記載していく。) #####String型 :::note Stringを訳すると文字列という意味になる。 ::: :::note 詳細に書くと、多くのプログラミング言語やデータベース管理システム（DBMS）に用意されている基本データ型の一つで、文字列を格納するためのもの。 ::: #####Object型 :::note 簡潔に言うと、プロパティ（値）とメソッド（操作）の集まりのことを指す。 :::
###等価演算子と厳密等価演算子を使った例題:詳細 等価演算子と厳密等価演算子に関して、もっと深堀りしていきたいと思う。
let v1 = 'ABCDE';
let v2 = new String('ABCDE');
let r1 = v1 == v2;
let r2 = v1 === v2;
console.log('「== (等価演算子)」：' + r1);
console.log('「=== (厳密等価演算子)」：' + r2);
【実行結果】
「== (等価演算子)」：true
「=== (厳密等価演算子)」：false
####例題に関してのアンサー
この例題は「ABCDE」という文字列を作成しているわけだが、
「v1」は文字を直接代入しているのに対し、「v2」はStringオブジェクトを使用している。
双方ともに同じ文字列を作成しているはずだが、
結果を見ると「===」で比較すると同じではないという判断になっている。
###String型とObject型を使った型の調査 [先程の例題](https://qiita.com/Stack_up_Rising/items/981098061164cb776bb4#%E7%AD%89%E4%BE%A1%E6%BC%94%E7%AE%97%E5%AD%90%E3%81%A8%E5%8E%B3%E5%AF%86%E7%AD%89%E4%BE%A1%E6%BC%94%E7%AE%97%E5%AD%90%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E4%BE%8B%E9%A1%8C%E8%A9%B3%E7%B4%B0)の続きであるが、なぜあのような結果となったのかを調査していく。
let v1 = 'ABCDE';
let v2 = new String('ABCDE');
console.log(typeof v1);
console.log(typeof v2);
【実行結果】
string
object
####例題に関してのアンサー
この例では、「typeof」メソッドを使って、それぞれの変数の「型」を調べている。
例題内でStringメソッドで作った文字列は、
「String型」ではなく「オブジェクト(Object)型」であったことが判明する。
↓
そのため、
値と型を考慮する「===」を使った比較では、結果的に「false」が出力された
ということになる。
このように、2つの値が同じかどうかを比較する際には、
「値」だけでなく「型」の存在もあることを忘れないようにすること。
##5. 複数の条件を比較
比較演算子は、単体で使用するだけでなく複数の条件式を組み合わせて比較するケースも多い。
以下例題。
let result1 = 10 < 20;
let result2 = 'Hello' === 'World';
console.log(result1);
console.log(result2);
【実行結果】
true
false
この例では、「result1」「result2」へ単純な比較の条件式を代入している。
実行結果は「result2」がfalseになっている。
例えばどちらか1つでもtrueであれば強制的に「trueの処理」を実行したい時はどのようにすればよいか？ その処理は次項の論理演算子で解説する。 ##6. 論理演算子 ###論理演算子とは？ :::note プログラミング言語などに用意された、論理演算を表す記号や符号などのこと。 ::: :::note 真(true)と偽(false)の二値からなる真偽値(真理値/ブール値)に対して演算を行うことができる。 ::: :::note warn 論理否定(NOT)、論理和(OR)、論理積(AND)、排他的論理和(XOR)のそれぞれについて、 「&&」といった1～2文字記号の組み合わせや、「and」などの符号を演算子として用いる。 ::: :::note warn 否定論理積(NAND)や否定論理和(NOR)などの演算子が用意されている場合もある。 ::: ここでは、より使用頻度の高いOR( || )とAND( && )について記載していく。
###OR( || ) ####ORの概要 :::note どちらかの値がtrueであれば結果的に「true」を返してくれる演算子になる。 ::: 実際に例を挙げて解説していく。 ####例(書き換え前)
let result1 = 10 < 20;
let result2 = 'Hello' === 'World';
console.log(result1);
console.log(result2);
【実行結果】
true
false
この例では、「result1」がtrueで「result2」がfalseなのだが、
これを「OR( || )」で書き換えると下記のようになる。
####例(OR書き換え後)
let result = 10 < 20 || 'Hello' === 'World';
console.log(result);
【実行結果】
true
#####書き換え後のコード解説
:::note
2つあった条件式を1行で書けるようになり、実行結果もtrueになっているのが分かる。
:::
:::note
異なる条件式の間に「 || 」を挿入することで「OR」を使えるのだが、
この条件式は読み替えると「result = true || false」ということになる。
:::
つまり、
「OR( || )」は2つの条件式がどちらも「false」でない限り「true」を返してくれる
ということになる。
###AND( && ) ####ANDの概要 :::note 基本的に「OR( || )」とは逆の解釈の仕方で、 条件式の双方が「true」出ない限り「true」と返してくれない。 ::: 実際に例を挙げて解説していく。 ####例(AND書き換え前) コードは[OR( || )](https://qiita.com/Stack_up_Rising/items/981098061164cb776bb4#%E4%BE%8B%E6%9B%B8%E3%81%8D%E6%8F%9B%E3%81%88%E5%89%8D)で書いたものと同様になるが、一応記載しておく。
let result1 = 10 < 20;
let result2 = 'Hello' === 'World';
console.log(result1);
console.log(result2);
【実行結果】
true
false
先ほど「OR」の時に「true」となったコードだが、
「AND」の場合だと「false」になっているのが分かる。
####例(AND書き換え後)
let result = 10 < 20 && 'Hello' === 'Wrold';
console.log(result);
【実行結果】
false
#####書き換え後のコード解説
:::note
異なる条件式の間に「 && 」を挿入することで「AND」が使えるのだが、
この例を読み替えると「result = true && false」になるため、
最終的にfalse扱いになる。
:::
つまり、
「AND」は2つの条件式がどちらも「true」でない限り「false」を返す
ということになる。
##7. nullとundefinedの比較について
JavaScriptには、「null」(ヌル)と「undefined」(アンディファインド)という
特殊な値が用意されている。
簡単に解説すると、
nullは「空っぽの状態」を表す値で、
undefinedは「未定義の状態」
を意味している。
全然関係ない話だが、世界的に大ヒットしたPSのFINAL FANTASY Ⅷのゲーム内で、 ミニゲームのカードの特殊ルールでnullというルールがある。 意味としては今まで継承してきたルールをチャラにするというもの。
(「だから何？」って話だが…)
###nullとundefined
実際に両者を比較演算子を使って比べてみる。
####nullとundefinedの例
let value1;
let value2 = null;
console.log(value1 == value2);
console.log(value1 === value2);
【実行結果】
true
false
#####例題に関してのアンサー
#####value1
:::note
定義されただけで中身が無いので「undefined」となる。
:::
#####value1
:::note
中身が無いことを明確にするため「null」が代入されている。
:::
実行結果を見ると、 等価演算子（==）は両方同じ値と判断されているが、 厳密等価演算子（===）で比較すると異なる値である と判断されている。 これは、
null」がオブジェクト型であり「undefined」と「型」が異なる
ためである。
##8. まとめ
今回は、比較演算子について様々なことを書いてきた。
かなり長ったらしく書いてしまったので、最後におさらいの意味も込めて簡潔にまとめる。
比較演算子は、2つの値を比較して「true / false」を返してくれる。
比較演算子はif文などの条件式で便利に活用できる。
==と===は「型」を考慮するかどうかで異なる。
比較演算子を使った条件式は複数組み合わせることも可能。
nullとundefinedは型が違うことに注意する。
##9. おわりに
様々な比較演算子や真偽値に関してかなりの長文となったが、まだまだ覚えることだらけ。
また気づきがあれば追記して書いていきたい。