【JavaScript】===（イコール3つ）の比較演算子について解説します

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

この記事では、 JavaScriptで===（イコール3つ）の比較演算子について

===（イコール3つ）の比較演算子とは
サンプルプログラム

と、丁寧に解説していきます。

前提条件：実行環境について
===（イコール3つ）の比較演算子とは
===（イコール3つ）の比較演算子を解説するプログラムの概要
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
まとめ：===（イコール3つ）の比較演算子を使ってみよう！

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

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

OS	Windows10

===（イコール3つ）の比較演算子とは

===（イコール3つ）の比較演算子とは、値と型が完全に一致しているかどうかを比較できる演算子です。
正式名称を厳密等価演算子と言います。

返す真偽値は以下の表にまとめました。

値と型どちらも一致した場合	trueを返す
値と型どちらかが不一致だった場合	falseを返す

たとえば

var sample1 = 3;
var sample2 = 3;
var result = sample1 === sample2;

var sample1 = 3;

var sample2 = 3;

var result = sample1 === sample2;

を比較した場合は変数resultにtrueが返りますが

var sample1 = 3;
var sample2 = '3';
var result = sample1 === sample2;

var sample1 = 3;

var sample2 = '3';

var result = sample1 === sample2;

だと変数resultにfalseが返ります。

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

===（イコール3つ）の比較演算子を解説するプログラムの概要

===（イコール3つ）の比較演算子を解説するプログラムでは、

HTML
JavaScript

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

JavaScriptで

値と型どちらも一致の場合
値は一致、型が不一致の場合

のパターンで結果をHTMLに表示させます。

フォルダ構成は以下のようになっています。
===（イコール3つ）の比較演算子を解説するフォルダ構成

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>サンプル</title>
    </head>
    <body>
        <h2>サンプル</h2>
        <div id="sampleTrue"></div>
        <div id="sampleFalse"></div>
        <script src="./js/sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

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

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

JavaScriptサンプルプログラム

var sampleTrue = document.getElementById('sampleTrue');
var sampleFalse = document.getElementById('sampleFalse');

var num1 = 1;
var num2 = 1;

if(num1 === num2){
    sampleTrue.innerHTML = 'num1とnum2は型と値が一致';
}else{
    sampleTrue.innerHTML = 'num1とnum2は型か値どちらかが不一致';
}

var num3 = 2;
var num4 = '2';

if(num3 === num4){
    sampleFalse.innerHTML = 'num3とnum4は型と値が一致';
}else{
    sampleFalse.innerHTML = 'num3とnum4は型か値どちらかが不一致';
}

var sampleTrue = document.getElementById('sampleTrue');

var sampleFalse = document.getElementById('sampleFalse');

var num1 = 1;

var num2 = 1;

if(num1 === num2){

sampleTrue.innerHTML = 'num1とnum2は型と値が一致';

}else{

sampleTrue.innerHTML = 'num1とnum2は型か値どちらかが不一致';

}

var num3 = 2;

var num4 = '2';

if(num3 === num4){

sampleFalse.innerHTML = 'num3とnum4は型と値が一致';

}else{

sampleFalse.innerHTML = 'num3とnum4は型か値どちらかが不一致';

}

getElementByIdメソッド
innerHTMLプロパティ

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

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

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

実行結果

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

値と型どちらも一致しているときのみ、trueを返していることが確認できました。

まとめ：===（イコール3つ）の比較演算子を使ってみよう！

以上がJavaScriptの===（イコール3つ）の比較演算子についての解説でした！

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