JavaScript ifの基本的な書き方とは？論理演算子・比較演算の使い方も紹介！

JavaScriptにおいても条件分岐の処理を行うif文というのは大きな役割を持っています。

条件分岐と言うと難しく聞こえるかもしれませんが、「○○ならば□□をする」というように、条件に合致した場合に行う処理であり、それほど難しくはありません。

if文をマスターするためには比較演算子や論理演算子などについても理解する必要があるため、今回はJavaScriptにおける条件分岐式の使い方について詳しく紹介していきます。

if文の基本的な書き方とは？

こちらではJavaScriptにおけるif文の書き方について紹介します。

主なポイントとしては「1つの条件分岐処理をするif文」と「複数の条件分岐処理をするelse if文」の2つを覚えておくことです。

if文とは？

ifという英単語は日本語に直訳すると「もしも」とか「もし～だったら」というように訳されます。

JavaScriptにおけるif文も同じようになっており、if文の条件式が成立した場合に処理が実行されるという仕組みです。

・if文の基本的な書き方

if文の基本的な書き方は下記の通りです。

---------------------------------------------------------------------------------------
if(条件式){

//条件式が成立した場合の処理

}
---------------------------------------------------------------------------------------

このように、ifの後ろに（）を付け、（）の中に条件式を記入し、条件が成立する場合は｛｝の中の処理を行うのがif文の基本です。

それでは、具体的なif文の書き方について紹介しましょう。

---------------------------------------------------------------------------------------
var speed = 58; 　//変数（speed）に58を挿入

if(speed<60){　//変数speedは60未満なのか？

console.log(‘適正速度です。 ’);　//出力結果として「適正速度です。」を表示 }
---------------------------------------------------------------------------------------

今回は、speedという変数を用意して、その中に58の数値を挿入し、条件分岐式（if文）で「speedは60未満なのか？」という処理を行いました。

そして、speedという変数の中に入っている数値は58なので、60未満という条件が成立し、if文の中にある「適正速度です。

」を表示させるという処理をしています。

こちらの処理をもう1段階だけ進歩させると下記のような記述になります。

---------------------------------------------------------------------------------------
var speed = 58; 　//変数（speed）に58を挿入

if(speed<60){　//変数speedは60未満なのか？

console.log(‘適正速度です。 ’);　//出力結果として「適正速度です。」を表示

} else { //条件式に合致しなかった場合

console.log(‘適正速度ではありません。

’); //出力結果として「適正速度ではありません。」を表示

}
---------------------------------------------------------------------------------------

こちらでは「else」というコードが新しく登場しました。

このelseというのは「ifの条件式に合致しなかった場合」という処理になります。

今回のケースだと、「speedの変数が60未満ではなかった場合」となり、60 未満でなかった場合は「適正速度ではありません。」と表示させる処理をしています。

if文の処理をする場合は、「条件式」・「条件式が成立した際の処理」・「条件式が成立しない場合の処理」の3つを考えて使うと良いでしょう。

else if文とは？

if文では複数の条件式を追加することも出来ます。

それが「else if文」となっていて、else if文を使用することで、複雑な条件の処理をすることが可能になります。

それでは、具体的に説明していきましょう。

---------------------------------------------------------------------------------------
var speed = 68; 　//変数（speed）に68を挿入

if(speed<60){　//変数speedは60未満なのか？

console.log(‘適正速度です。’);　//出力結果として「適正速度です。」を表示

} else if(speed < 70) {　//変数speedは70未満なのか？

console.log(‘もう少しスピードを落としましょう。’);　 //出力結果として「もう少しスピードを落としましょう。」を表示

} else { //2つの条件式に合致しなかった場合

console.log(‘適正速度ではありません。’);　 //出力結果として「適正速度ではありません。」を表示

}
---------------------------------------------------------------------------------------

これがelse if文の基本的な使い方です。

こちらの処理を詳しく紹介していくと下記のようになります。

1. speedに68という数値を挿入する
2. if文で「speedは60未満なのか？」という条件を当てはめる
3. speedは68なので、条件処理としては「No」となり、次のelse if文の条件式へと移る
4. 次のelse if文の条件式では「speedは70未満なのか？」という条件となっていて、speedは68のため、こちらの条件には合致する
5. 出力結果として「もう少しスピードを落としましょう。」と表示される

このような流れになります。

例えばですが、始めに変数speedに挿入される数字が71以上になった場合はelse ifでの条件式にも「No」という結果となってしまうために、その場合はelseの「適正速度ではありません」という結果が表示されます。

if文の注意点

JavaScriptでif文を使用する際の注意点は、「条件は上から順番に処理をされる」ということです。

そして、if文は条件が合致した時点で処理が実行されるという仕組みになっています。

そのため、else if文を使用して複数の条件式を出している状態でも上の条件式に当てはまっていれば上の処理が優先されてしまいます。

具体例としては下記のようなケースです。

---------------------------------------------------------------------------------------
var speed = 58;

if(speed<70){

console.log(‘もう少しスピードを落としましょう。’);

} else if(speed < 60) {

console.log(‘適正速度です。’);

} else {

console.log(‘適正速度ではありません。’);

　 }
---------------------------------------------------------------------------------------

こちらの記述では、変数のspeedが70未満の場合は「もう少しスピードを落としましょう。」と出力して、60未満の場合は「適正速度です。」と出力する処理を目指していました。

speedの変数の中に入っている数字は58のため「適正速度です。」と出力をしたかったということです。

しかし、始めの条件式である「speed < 70」の条件に合致しているため、その中の処理である「もう少しスピードを落としましょう。」が出力されています。

なお、こちらの記述ではエラーが発生しないタイプのミスとなるため、「どこで誤った処理をしているのか分からない」という状態に陥りがちです。

そのため、if文を使用する際には仕様をキチンと理解してから使うようにしてください。

if else文の論理演算子・比較演算子の書き方とは？

if文やelse if文を使用する場合には、論理演算子や比較演算子を使用します。

こちらでは、論理演算子や比較演算子をどのように使用するのかということについて詳しく紹介していきます。

論理和（OR）

OR演算子の特徴は「〇〇もしくは△△」というように、どちらか一方の条件を満たした場合に処理が実行されるというものです。

JavaScriptでのOR演算子は「||」と表記して使用します。

それでは、具体例を紹介しましょう。

----------------------------------------------------------------------------------------
var kokugo = 40;

var suugaku = 60;

var rika = 70;

var shakai = 80;

var eigo = 90;

if (kokugo > 50 || suugaku > 50) {

console.log(‘合格！’);

} else {

console.log(‘不合格’);

}
----------------------------------------------------------------------------------------

こちらの記述では、国語・数学・理科・社会・英語という変数にそれぞれの点数が入力されていて、if文では「国語もしくは数学の数値が50を超える場合」という処理をしています。

今回のケースだと数学の点数が50を超えていますので、出力結果は「合格！」となります。

論理積（AND）

OR演算子とセットで覚えてもらいたいのがAND演算子です。

AND演算子は「&&」と表記し、これは「複数の条件が全て合致する」という処理となります。

上記の例を使って説明すると下記のようになります。

----------------------------------------------------------------------------------------
var kokugo = 40;

var suugaku = 60;

var rika = 70;

var shakai = 80;

var eigo = 90;

if (kokugo > 50 && suugaku > 50) {

Console.log(‘合格！’);

} else {

Console.log(‘不合格’);

}
----------------------------------------------------------------------------------------

こちらの処理では「国語と数学の両方が50点を超える場合」というif文の処理をしていて、国語が40点のため「不合格」と出力されます。

AND演算子もOR演算子も複数の条件を合わせることが出来ます。

AND演算子で複数の条件に設定すると下記のようになります。

----------------------------------------------------------------------------------------
var kokugo = 40;

var suugaku = 60;

var rika = 70;

var shakai = 80;

var eigo = 90;

if (kokugo > 50 && suugaku > 50 && rika >50) {

console.log(‘合格！’);

} else {

console.log(‘不合格’);

}
----------------------------------------------------------------------------------------

こちらのケースだと、「国語と数学と理科の点数が50点を超える場合」という処理なのです。

そのため、国語の点数が足りず「不合格」と出力されます。

論理否定（NOT）

NOT演算子の特徴は「前の条件を反転させる」という効果がありますが、他の論理演算子と比較すると少し特殊な仕組みになっているので注意が必要です。

NOT演算子の記述は「!」を使用することになります。

NOT演算子を使った場合の記述は下記のようになります。

----------------------------------------------------------------------------------------
var kokugo = 50;

var suugaku = 60;

var rika = 70;

var shakai = 80;

var eigo = 90;

if (suugaku >! 50) {

console.log(‘50未満だったら表示’);

} else {

console.log(‘50を超える場合は表示’);

}
----------------------------------------------------------------------------------------

このようになり、NOT演算子が無い状態だと「数学の点数が50を超える場合」という処理になりますが、NOT演算子によって条件が反転しますので、「数学の点数が50未満の場合」という条件に切り替わります。

実際にプログラミングコードを見ていても見逃しやすい「!」の表記なので、その点に気をつけて使うと良いでしょう。

比較演算子

比較演算子はif文を使うときに最も使われる演算子です。

「A>B」や「A<=B」のように、「AはBよりも大きい」や「AはB以下である」というように、2つの値を比較するのが比較演算子の特徴となります。

注意点としては「==」と「===」の違いとなりますが、その違いについて具体例を使って紹介しましょう。

----------------------------------------------------------------------------------------
if (‘10’==10)

{ console.log(‘同じです’);

} else {

console.log(‘違います’);

}
----------------------------------------------------------------------------------------

今回のケースでは、条件式の左辺と右辺が同じ値の場合にTrue（真）となり条件式が成立します。

「==」の場合は型が違っていても、値が同じならばTrueを返しますので条件成立となります。

それでは、「===」のケースも見てみましょう。

----------------------------------------------------------------------------------------
if (‘10’===10) {

console.log(‘同じです’);

} else {

console.log(‘違います’);

}
----------------------------------------------------------------------------------------

「===」の場合は、「値」の他に「型」も同でないと条件式は成立しません。

そのため、文字列の「10」と数字の「10」では「値」が同じでも「型」が違うために、今回は「違います」と出力されます。

「==」と「===」は「=」の数が1個違うだけなので、見逃しやすい比較演算子です。

そのため、実際の現場でも見落とされがちな記述となるため、使用する場合は十分に気をつけてください。

Falseになる条件の注意点

JavaScriptでは、特殊な条件下でFalseとなってしまうケースがあります。

こちらでは、条件の紹介とともに具体例を紹介します。

Falseになる5つの条件

JavaScriptのif文を使用する際に、条件に合っていてもFalseとなってしまう5つを紹介します。

・ 0（数値のゼロ）
・ null（値が存在しない）
・ NaN（数値ではないことを示す）
・ undefined（値が未定義）
・ “”（空の文字列）

これらの条件を使用すると、条件が成立していてもFalseとなるため、エラーは出ませんが求めていた出力ができません。

それでは、具体例を紹介しましょう。

----------------------------------------------------------------------------------------

var ABC = 0;

if (ABC==0) {

console.log(‘同じです’);

} else {

console.log(‘違います’);

}
----------------------------------------------------------------------------------------

例えば、「ABC」という変数があったとして、その中に「0」を挿入し、if文の条件式で「ABCは0と同じなのか？」としたとします。

この場合に、ABCに入っているのは「0」なため、条件式が成立するように見えます。

しかし、JavaScriptでは、数値の「0」が入っている場合、Falseを返すことになりますので、出力される結果は「違います」と表示されます。

まとめ

今回はJavaScriptで使用されるif文について紹介しました。

if文はJavaScriptでプログラムを構築する際に必ずと言ってもいいほど頻繁に使用されるコードです。

しかし、JavaScript の扱いに慣れている人でも、ミスをしがちな箇所です。

特に演算子については、プログラミングの上級者でも時々再確認をしておくとミスを防げるでしょう。

定期的に見直すことで、プログラミングスキルをより向上させることに繋がります。

JavaScriptでのプログラミングのスキルが向上し、プログラム構築をスムーズに行えるようになったあと、よりスキルアップを図るためには、フリーランスエンジニアとして独立といのも一つの手段です。

フリーランスとして活動する際には、当然のことながら「案件を受注して仕事をする」ということが必要になります。

そのため、「安定して案件を獲得することができるか」「自分の希望に合致する案件を見つけることができるか」と思う人もいるでしょう。

それを解決できるのが「HiPro Tech」です。

当社が運営するこのサービスは、企業と直接契約をすることが出来るフリーランスのITエンジニアの専門エージェントです。

数多くの案件の中から、スキルや希望に合致する案件の紹介を受けることができます。

エンドユーザー直請けの案件も豊富に扱っているため、よりコアな部分のシステム開発や最先端技術に触れることができるプロジェクトに参画できる可能性を高めることができます。

JavaScriptのスキルを活かし、スキルアップ、キャリアアップを図りたいと考えている人は、ぜひ登録をし、案件探しに活用してください。

( 関連記事：Javaの案件について、業務内容や単価相場、案件獲得方法を紹介 )