【初学者必見！】【JavaScript】演算子 == と=== の違いと使い方を解説

どうも、こんにちは！ピコっそです！！
今回は JavaScriptで頻出する演算子「==」と「===」の違いについて解説します。

プログラミングを学んでいると、この2つの演算子を頻繁に見かけますよね。
しかし「どっちを使えばいいの？」「何が違うの？」と疑問に思ったことはありませんか？

この記事では、初心者でもわかる具体的な例を使いながら、
== と === の動作の違いを丁寧に解説します。
この記事を読み終えるころには、もう迷わずに使い分けられるようになります！

== と === の違いとは？

== と === の違いは結論からいいますと、、、

「==」は値だけを比較する演算子

「===」は値と型の両方を比較する演算子

という違いになります。

==では比較する要素が一つしかないのに対し、===は二つの要素を比較することから、

==は「ゆるい比較」（型を変換してから比べる形式）とも言われ、

===は「厳密な比較」（型も同じでないと同一と見做さない形式」

とも言われています。

実際のコードを見て比較してみましょう。

console.log(5 == "5");   // true
console.log(5 === "5");  // false

まず== の場合、右側の “5”（文字列）が自動的に数値 5 に変換されるため、trueになります。

そして、===の場合、数値と文字列も比較対象になるため、同一の値とはならずfalseになります。

他の例も見てみましょう。

console.log(true == 1);   // true
console.log(true === 1);  // false

この例では、true は 1 に、false は 0 に変換される（これを「暗黙的な型変換」と呼ぶ）

しかし、このコードでも===の場合では型も比較の対象となるため、falseとなっております。

続いて、==と===のよくある間違えた使い方について実例をもとに解説します。

console.log(0 == false);   // true
console.log(0 === false);  // false

console.log("" == false);  // true
console.log("" === false); // false

上記のコードのようにJSでは、自動で型変換を行うため、０や””（空文字）がfalseと同じ扱いを受けているのがわかります。

これによって、意図しないバグやエラーを引き起こす可能性があります。

これの対策として

迷ったら===を使うようにする

これを心がければこのようなエラーは発生しないと私は考えます。

== と === の違いについても触れましたが、初学者の場合は基本的に迷ったら、

===を使うことをお勧めします。

理由としては、==を使うことによって意図しないエラーやバグを引き起こす可能性があるからです。

0 == false      // true
"" == false     // true
null == undefined // true

上記のコードでは==を使って比較した結果を出力しておりますが、いずれも「true」になっております。つまり、==を使うことによって、型がちがう要素も同じものとして扱われる場合があり、これがエラーの根源となっているのです。

ただし、==を使ってもいい場面も中には存在します。

これはかなり限定的な使い方になりますが、条件式でnullとundefinedをまとめて判定したい時には==を使うとコーディングが少し楽になります。（チーム開発でこの使い方をすると混乱する可能性もあるのでおすすめはしません）

if (value == null) {
  // value が null または undefined の場合に実行
}

上記のコードの場合は、このIF文だけでnullかundefined を両方判定してくれるため、コーディングを少なく抑えることができます。

レガシーなJSの場合では、==が標準になっている場合があります（私はそのJSを見たことがないのでわかりませんが）。

しかし、新しくコードを書く際には避けるのが基本となっております。

以上のことから、==は使い方が限定されており、基本的には===を中心に書いていくことが無難だと私は考えます。

今回は、JSにおける==と===の違いについての解説を行いました。
この2つの違いをざっくりまとめると、

==は”何となく同じ”
===は”本当に同じ”

ということを覚えればOKです。

また、== は特殊な場面を除いて使うことはほとんどありません。
迷ったときは === を使う――このシンプルなルールを覚えておくだけで、
JavaScriptのバグはぐっと減ります。

今回の記事で「==と===の違い」を少しでも理解できた人がいたら嬉しいです。

他にも、PHPやJavaScriptの演算子に関する記事をまとめていますので、
ぜひあわせてチェックしてみてください👇

では最後までご覧いただき、ありがとうございました。

今後も初心者でも理解しやすいJavaScript・PHPの基礎シリーズを投稿していきます！