JavaScriptのifについて初歩から解説！if文の基本的な使い方から応用について紹介

システム
エンジニア

JavaScriptのif文について、基本的なことをもういちど教えてください。

プロジェクト
マネージャー

JavaScriptのif文はプログラミングの基本中の基本と言えます。JavaScriptのif文について、基本的な使い方についてご紹介しましょう。

JavaScriptのifとは？

JavaScriptのif文はプログラミングの基本です。JavaScript以外のほとんどのプログラミング言語にもif文はあるので、if文を知ることがプログラミングの第一歩と言えるでしょう。

if文には「条件分岐処理」という機能があります。具体的に言うと「もし条件がAならば、Bの処理をする」といった機能です。それをJavaScriptで書くと以下のようになります。

簡単なif文の例

以下はJavaScriptのif文のシンプルな例です。htmlファイルに記述してブラウザで開いてみて下さい。

条件式で使う演算子

上のJavaScriptサンプルを実行すると、「aは1です。」と言うポップアップウィンドウが出ます。変数aの中身が1だったので、ポップアップを出すalertが実行されたということです。このようにif文は()の中の条件式が成立する場合、{}の中の処理を実行します。

今回の条件式には「a == b」を使いました。これはaとbが等しいという意味です。==は演算子と言いますが、他に以下のような演算子があります。

a > b aはbより大きい
a < b aはbより小さい
a >= b aはb以上
a <= b aはb以下
a == b aとbは等しい
a != b aとbは等しくない

演算子を使わないif文

JavaScriptのif文の条件式は以下のように演算子を使わない場合もあります。

trueとfalseはBoolean型と言います。実行すると2回ポップアップがでます。演算子無しの場合条件式がtrueならば成立、!のみを付けた場合、条件式がfalseなら成立します。

演算子の無い条件式の詳細

演算子の無い条件式の変数の中身がtrueやfalseではない場合、数値なら1以上、文字列なら1文字以上で成立します。

このサンプルを実行するとポップアップが2回出ます。上のサンプルでif文が成立しないケースは、aの値が以下のどれかの場合になります。

var a = 0; // 0

var a = 0/0; // 0除算などでNaNになる

var a = ”; // 空の文字列

var a = null; // 値無しのnull

var a; // 値が代入されていない

論理演算子について

ここまで条件式は1つの変数についてのみ判断していましたが、論理演算子を使えば、以下のJavaScriptサンプルのように複数の変数について判断することも可能です。

実行すると2回ポップアップが出ます。「a && b」は「aかつb」、「a || b」は「aまたはb」という意味になります。&&はAND（アンド）、||はOR（オア）と読みます。

論理演算子の優先度について

&&と||の優先度はどうなっているのでしょうか。以下のJavaScriptサンプルを見てください。

 

実行すると2回ポップアップが出ます。1つ目のifは「aが0かつbが1、または、cが3」、2つ目のifは「aが1、または、bが0かつcが2」と判断されています。

論理演算子の優先度を変えるには？

つまり||より&&の方が優先度が上で、&&が後ろにあっても先に判定されるということです。左から順ではないということですね。しかしサンプルの2つ目のif文を本当は「aが1またはbが0で、かつ、cが2」としたかったとしたら、そうするにはどうすれば良いのでしょうか。

その場合は以下のように「a || b」の方に()をつければ優先度を上げられます。これで「かつ、cが2」が成り立たないため、ポップアップが出なくなります。

「そうでなければ」という意味のelse

if文には「そうでなければ」という意味のelseというキーワードが使えます。以下が例です。

実行すると「aは0ではありません。」と表示されます。elseはその前のif文の条件式が成り立たない場合に、elseの次の処理が実行されるということです。

「そうでなければ、もし」という意味のelse if

elseの他にelse ifというキーワードもあります。

このJavaScriptサンプルを実行すると「aは0でも1でもありません。」と表示されます。else ifは「そうでなければ、もし」とif文を連ねるを続けることができるのです。

else ifを使う場合と、ifを連ねた場合の違い

else ifでif文を続けた場合と、普通にif文を続けた場合はどう変わるでしょうか。

上のJavaScriptサンプルを実行すると、「aは0です。」「aは0です。」「bは1です。」と3回ポップアップが出ます。else ifだと最初のif文が実行されたら次のelse ifが成立する条件でも実行されず、ifをつなげた場合は両方とも実行されるということです。

そんなの当り前じゃないかと思うでしょうが、実際にプログラミングしていると使い分けを間違えることもあるのです。気を付けましょう。

==と===の違い

JavaScript以外のプログラム言語を知っている人は、ここまで読んで他と同じだと思うでしょう。ところがJavaScriptには===という他ではあまり無い演算子があります。使い方は以下の通りです。

実行すると「aとbは同じです。」だけ表示されます。JavaScriptは数値型変数と文字列型変数を比較しても数が同じなら等しいと判定するのですが、型が違う場合は違うと判定したい場合は、===を使用します。サンプルのbを0にすれば===の方も成立するということです。

!==も使える

演算子の!=に対応する!==もあります。以下がサンプルです。

実行すると「aとbは型も含めて違います。」だけが出ます。数が同じ0でも、数値型と文字列型の違いがあるので!==が成立するということです。

システム
エンジニア

if文はプログラミングの基本なので、もういちどしっかりと復習します。

プロジェクト
マネージャー

そうですね。基本をしっかりと理解して、プログラミングに活かしてください。

if文はJavaScriptプログラミングの基本

JavaScriptのif文を解説しましたが、ご理解頂けましたでしょうか。JavaScriptに限らずif文はプログラミングの基本なので、必ずマスターしましょう。