【JavaScript入門】比較演算子の使い方まとめ (==/===/OR/AND)
こんにちは、ライターのマサトです！
今回は、2つの値を比較して条件分岐などを行う処理によく使われる「比較演算子」について学習していきましょう！
この記事では、
- 比較演算子とは？
- 基本的な使い方
- 数値の比較
- 文字列の比較
- Booleanの比較
という基本的な内容から、
- 「==」と「=== (イコール3つ)」の違い
- 複数の条件を比較しよう
- nullとundefinedの比較について
などの応用的な使い方に関しても解説していきます。この記事で、比較演算子を楽しく学習して自分のスキルアップを目指しましょう！
この記事の目次
比較演算子とは？
それでは、まず最初に「比較演算子」について基本的な学習から始めていきましょう。「比較演算子」は、IF文やfor文・while文などのループ処理の条件式に使われることが多くて、文字通り2つの値を比較することが目的の演算子です。
JavaScriptの比較において、一般的に利用されている演算子の一覧は次のとおりです！
| 比較演算子 | 意味 | 使用例 | 結果 |
|---|---|---|---|
| > | 左辺が右辺よりも大きい | 8 > 2 | true |
| >= | 左辺が右辺より大きいか同じ | 3 >= 3 | true |
| < | 左辺より右辺が大きい | 7 > 4 | false |
| <= | 左辺より右辺が大きいか同じ | 3 <= 6 | true |
| == | 左辺と右辺の値が同じ | '7' > 7 | true |
| === | 左辺と右辺の値と型がおなじ | '7' === 7 | false |
| !==(!=) | 左辺と右辺が異なる | '7' !== 7 | false |
比較演算子は、2つの値を比較して正しいかどうかを「True / False」で返してくれるのが特徴です。
「>」や「<」については、左辺と右辺の値が大きいか小さいかを比較する時に使われ、「==」や「===」については両方の値が等しいかどうかを比較します。（==と===の違いについては後述します）このような理由から、プログラミングの条件式に「比較演算子」はよく使われるというわけですね。
比較演算子の使い方
基本的な使い方
それでは、比較演算子の種類が分かったところで、簡単な使い方について学んでいきましょう。例えば、左辺が右辺より大きい状態を表す「 > 」を使ったIF文のコード例を見てみます。
if(【値1】>【値2】) {
//値1が大きい場合の処理（trueの処理）
}
else {
//値1が大きくない場合の処理（falseの処理）
}
この例の場合、条件式に「 > 」を使っているので、「値1」が「値2」よりも大きい場合に「true」となります。2つの値を比較することで「true / false」の結果を取得できるので、条件式が必要なプログラムに比較演算子は欠かせない存在となるわけです。
ちなみに、IF文についての基本的な使い方や活用プログラム例、他の比較演算子を使った事例などを次の記事で詳しく解説しているのでぜひ参考にしてみてください！
JavaScriptでIF文の使い方からif…else ifの活用術までを徹底解説
更新日 : 2019年5月5日
数値の比較
それでは、比較演算子を使った具体的なプログラミングを学んでいきましょう！まずは、「数値」を比較した基本的な例です。
var result1 = 10 < 20; var result2 = 7 === 8; var result3 = 3 >= 3; console.log( '10 < 20 → ' + result1 ); console.log( '7 === 8 → ' + result2 ); console.log( '3 >= 3 → ' + result3 );
実行結果
10 < 20 → true 7 === 8 → false 3 >= 3 → true
このサンプルのresult1は、「10 < 20」を比較しており左辺が小さい値なので「true」になります。result2は、「7 === 8」を比較していますがどちらも同じ値ではないので「false」ですね。
そして、result3は少し間違いやすいのですが、「>」ではなく「>=」を使って比較しているので左辺が大きいか両方が等しければ「true」になるという点に注意しましょう。このように「true / false」を結果として得られるので、次のように「IF文」へ組み込むことができます！
var height = 180;
if( height > 170 ) {
console.log( '身長が高いです' );
}
else {
console.log( '普通の身長です' );
}
実行結果
身長が高いです
このサンプルでは、変数「height」の値が170よりも大きい値なので、結果的に「true」と判断されているのが分かります。このような条件分岐は、他にも「for文」「switch文」「While文」などにも有効活用できるでしょう。
文字列の比較
次に、「文字列」を比較してみましょう！基本的な考え方は「数値」を比較した時と同じですが、「文字列」だけの特徴も存在するので詳しく見ていきましょう。
var result1 = 'あ' < 'う'; var result2 = '７' === '８'; var result3 = '太郎' >= '太郎'; console.log( 'あ < う → ' + result1 ); console.log( '７ === ８ → ' + result2 ); console.log( 'Hello >= Hello → ' + result3 );
実行結果
あ < う → true ７ === ８ → false Hello >= Hello → true
result1は「あ < う」を比較しているのですが、数字の「1234…」みたいに文字も「あいうえ…」のように順番に数えていきますよね？このような時に、最初に数えた文字はあとで数えた文字よりも「小さな値」になるので、「あ < う」を比較すると「あ」のほうが小さな値になるので「true」になります。
result2は文字列の数字「７ === ８」を比較しているのですが、これは数値を比較した時と同じ結果となり「false」になります。
result3はアルファベットの文字列を使って「Hello >= Hello」を比較しており、両方が同じ文字列なので結果的に「true」になるわけですね。
Booleanの比較
今度は「Boolean（真偽値）」の「true / false」を比較してみます！比較演算子の結果を「true / false」で取得できるわけですが、それ自体を比較することもできるので知っておくと良いでしょう。
次のコード例を見てください！
var result1 = true === false; var result2 = true < false; var 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は「true === false」を比較していますが、当然ながらどちらも違う値ですので結果は「false」になります。
result2は「true < false」を比較しているのですが、値の大きさとしては「true」の方が大きいので「false」になるという点は覚えておきましょう。
result3の「true !== false」は、否定（!==）の比較なので異なる値が比較されているため「true」になるわけです。「Boolean」の比較は、後述するように複数の条件式を比較する際に必要な知識となってくるので、繰り返し練習しながら意味を理解できるように頑張りましょう。
「==」と「=== (イコール3つ)」の違い
冒頭でご紹介した比較演算子の一覧で、両方の「値」が等しいかどうかを判断するのに「==」と「===」が使われると解説しました。
ところで、この2つは一体何が違うのでしょうか？実は、それぞれ異なる名称を持っており、一般的に「==（等価演算子）」「===（厳密等価演算子）」と呼ばれています。
この2つのポイントは以下の通りです！
- 「== (等価演算子)」：比較する際に「値」だけをチェックする演算子
- 「=== (厳密等価演算子)」：比較する際に「値」と「型」の両方をチェックする演算子
上記の違いを、具体的にプログラムで見てみましょう！
var str = '10'; //文字列の10
var num = 10; //数値の10
//==と===の違いを確認する
var result1 = str == num;
var result2 = str === num;
console.log('「== (等価演算子)」：' + result1);
console.log('「=== (厳密等価演算子)」：' + result2);
実行結果
「== (等価演算子)」：true 「=== (厳密等価演算子)」：false
この例では、文字列の「10」と数値の「10」を比較した例になります。値はどちらも「10」で同じなのですが、型が「文字列型」と「数値型」で異なるために結果が変わっているのが分かります。
実行結果を見ると、「==」は型を考慮しないので「true」となり、「===」は型を考慮して比較するため「false」になっていますね。この2種類の違いは、次のようなプログラムで間違いが起きやすいので覚えておきましょう！
var v1 = 'あいうえお';
var v2 = new String('あいうえお');
var r1 = v1 == v2;
var r2 = v1 === v2;
console.log('「== (等価演算子)」：' + r1);
console.log('「=== (厳密等価演算子)」：' + r2);
実行結果
「== (等価演算子)」：true 「=== (厳密等価演算子)」：false
このサンプルでは、「あいうえお」という文字列を作成しているわけですが、変数「v1」は文字を直接代入しているのに対して、変数「v2」はStringオブジェクトを使っています。
どちらも同じ文字列を作成しているはずなのですが、結果を見ると「===」で比較すると同じではないという判断になっていますね。そこで、両方の文字列の正体を確認してみましょう！
var v1 = 'あいうえお';
var v2 = new String('あいうえお');
console.log( typeof v1 );
console.log( typeof v2 );
実行結果
string object
この例では、「typeof」メソッドを使って、それぞれの変数の「型」を調べています。すると、Stringメソッドを使って作成した文字列は、「String型」ではなく「オブジェクト(Object)型」であったことが判明するわけです。
そのため、値と型を考慮する「===」を使った比較では、結果的に「false」が出力されたというわけです。
このように、2つの値が同じかどうかを比較する際には、「値」だけでなく「型」の存在もあることを忘れないようにしましょう！
複数の条件を比較しよう！
比較演算子は、単体で使用するだけでなく複数の条件式を組み合わせて比較するケースも多いです。例えば、次のプログラムを見てください。
var result1 = 10 < 20; var result2 = 'Hello' === 'World'; console.log( result1 ); console.log( result2 );
実行結果
true false
この例では、「result1」「result2」へ単純な比較の条件式を代入しています。実行結果は「result2」がfalseになっていますが、例えばどちらか1つでもtrueであれば強制的に「trueの処理」を実行したい時はどのようにすれば良いでしょうか？
そんな時に利用したいのが、次の項目で紹介する「論理演算子」です！
OR( || )について
「論理演算子」と聞くとなんだか難しそうですが、ここで覚えるのは「OR( || )」と「AND( && )」の2つだけです。
まず最初に、「OR( || )」の使い方から学習していきましょう！「OR( || )」は、文字通りどちらかの値がtrueであれば結果的に「true」を返してくれる演算子になります。先ほど使ったコード例をもう一度見てみましょう。
var result1 = 10 < 20; var result2 = 'Hello' === 'World'; console.log( result1 ); console.log( result2 );
実行結果
true false
この例では、「result1」がtrueで「result2」がfalseなのですが、これを「OR( || )」で書き換えると次のようになります。
var result = 10 < 20 || 'Hello' === 'World'; console.log( result );
実行結果
true
2つあった条件式を1行で書けるようになり、実行結果もtrueになっているのが分かりますね。異なる条件式の間に「 || 」を挿入することで「OR」を使えるのですが、この条件式は読み替えると「result = true || false」ということになりますよね。
つまり、「OR( || )」は2つの条件式がどちらも「false」でない限り「true」を返してくれるという点を覚えておきましょう！ORの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。
【JavaScript入門】すぐわかる！or演算子の使い方
更新日 : 2019年5月27日
AND( && )について
次に、「AND( && )」について学習しましょう！と…、言っても実は簡単で、先ほどの「OR( || )」演算子の反対が「AND( && )」になるからです。
「OR( || )」は両方の条件式が「false」の場合のみ「false」を返すのですが、「AND( && )」は両方の条件式が「true」の場合のみ「true」を返すことになります。
実際にプログラムを見てみましょう！
var result = 10 < 20 && 'Hello' === 'Wrold'; console.log( result );
実行結果
false
この例は、先ほど「OR」の時に「true」となったコードですが、「AND」の場合だと「false」になっているのが分かります。
異なる条件式の間に「 && 」を挿入することで「AND」が使えるのですが、この例を読み替えると「result = true && false」になるため最終的にfalse扱いになります。つまり、「AND」は2つの条件式がどちらも「true」でない限り「false」を返すという点を覚えておきましょう！
nullとundefinedの比較について
JavaScriptには、「null」と「undefined」という特殊な値が用意されています。簡単に解説すると、nullは「空っぽの状態」を表す値で、undefinedは「未定義の状態」を意味しています。
そのため「null」と「undefined」は意味合いが違うわけですが、両者を比較演算子を使って比べてみるとどうなるでしょうか？次のサンプルで見てみましょう！
var value1; //これはundefined var value2 = null; //これはnull console.log( value1 == value2 ); console.log( value1 === value2 );
実行結果
true false
「value1」は定義されただけで中身が無いので「undefined」になり、「value2」は中身が無いことを明確にするため「null」が代入されています。
実行結果を見ると、等価演算子（==）は両方同じ値と判断されていますが、厳密等価演算子（===）で比較すると異なる値であると判断されています。これは、「null」がオブジェクト型であり「undefined」と「型」が異なるためです。
この「null」と「undefined」の関係性や、より詳しい活用方法などは次の記事で分かりやすく解説しているのでぜひ参考にしてみてください！
【JavaScript入門】null・undefinedの代入・判定・変換まとめ！
更新日 : 2019年5月19日
比較の使い方総まとめ
文字列の比較について「文字と数字」の関係性や「大文字と小文字」の比較についてなど、さまざまな手法を次の記事で詳しく解説しているので参考にしてみてください！
【JavaScript入門】文字列を「比較」する演算子の使い方まとめ！
更新日 : 2019年3月29日
まとめ
今回は、比較演算子についてさまざまなケースを学習しました！今回のポイントを最後にもう一度おさらいしておきましょう。
これらの内容を踏まえて、ぜひ自分のプログラムにも取り入れながら積極的に活用してスキルアップを目指していきましょう！
JavaScriptには他にも利用頻度が高い演算子が多くあります。その他の演算子について知りたい方は以下の記事にまとめていますので参考にしてくださいね。
【javaScript入門】誰でも分かる演算子の使い方と種類について
更新日 : 2019年1月22日
