JavaScript ifとは？特徴や使い方を実例も用いて解説

「JavaScript ifはどんな時に使われるの？」
「if文を使ったけど思い通りの実行にならない…」
「if文の論理演算子や省略形ってどう書くんだっけ？」

この記事に訪れたあなたはこのような疑問を持っていませんか？

if文はJavaScriptに限らずどのプログラミング言語でも良く使われる構文です。そのためプログラミングができるようになるにはif文をマスターする必要があります。

しかし、はじめて使うときはなかなか理解しづらいものですよね。周りに相談できる人もいなければ独学で習得するのに挫折してしまう方もいるでしょう。

そこで今回は、JavaScript if文の使い方や注意点を紹介！どのような特徴や書き方があるのかをサンプルコードと合わせて解説します。

具体的な内容は以下の通りです。

この記事を読めば、if文の基本的な使い方から応用までマスターできますよ。

JavaScript ifとは？

JavaScript ifは条件分岐をする構文で、if文に書かれた条件を満たしていれば中身の処理を実行してくれます。

JavaScriptを書いていると、「値が10以上の時にこの処理をして、10より低かったら別の処理をしたい…」と感じる場面がよくありませんか？

こういったときにif文が使われているのです。書き方は非常に簡単で、ifを書いた後に条件式と条件を満たしたときの処理を書くだけ。とても簡単ですね。

if( 条件式 ){ … }

ですが、条件式には何を書けばいいのかわかりませんよね。なのでどんな条件式があるのかを見ながら使い方を覚えていきましょう。

比較演算子で比較する

比較演算子とは<=や>=などの二つの値を比較するものです。

let x = 10;
let y = 20;
if(x <= y){
console.log("yはx以上の値である");
}

// 実行結果
yはx以上の値である

上記のコードを見てみると条件式に「x <= y」が記述されていますね。yがx以上であるときに条件を満たして、中身が実行される仕組みになっているんですね。

その他にも以下のような比較演算子がありますので覚えておきましょう。

==や===で比較する

==や===は等価演算子というもので、二つの値が同じなら条件を満たしてくれます。

let x = 10;
let y = 10;
if(x == y){
console.log("yとxは等しい値である");
}

// 実行結果
yとxは等しい値である

上記のコードではxとyが同じ値になっています。そのためx == yの条件式を満たして、中身が実行されたわけなんですね。

ところで===も同じように同じ値なら条件を満たしてくれるのですが、==とは何が違うのでしょうか？

二つの違いは、厳密な等価演算子であるかどうかで違ってきます。いったいどういうことなのか、以下のサンプルコードを見てみましょう。

let x = 10;
let y = "10";
if(x == y){
console.log("==ではyとxは等しい値である");
}
if(x === y){
console.log("===ではyとxは等しい値である");
}

// 実行結果
==ではyとxは等しい値である

今度はyを文字列として10に設定しました。実行してみると==ではxとyは同じ値として条件を満たしましています。一方、===だと違う値だと判断されていますね。

実は==だと数字の文字列も数値として比較します。しかし数字と文字列は等しい値として処理してほしくないので、===が使われることも多いんです。

基本的には===を使っておいた方が無難でしょう。

値がtrueかfalseで判定する

条件式は一つのみの変数で条件を書く方法もあります。

let x = 10;
if(x){
console.log("xはtrueである");
}

// 実行結果
xはtrueである

if文の条件式にはxしか記述されていませんが、条件を満たしているのがわかりますね。条件式で変数を単独で使用した場合、変数がtrueかfalseかで判断されます。

例えば上記のコードだと、ｘは1以上または-1以下の数字でtrueと判断し、0だとfalseと判断されるんですね。xは1以上の数字であるため、条件を満たして中身が実行されました。

他にtrueになる値、falseになる値として以下のようなものがあります。

また変数の前に!をつけると、値がtrueやfalseじゃないときに条件を満たすif文も作れるので、覚えておくといいでしょう。

let x = 0;
if(!x){
console.log("xはfalseである");
}

// 実行結果
xはfalseである

JavaScript ifの特徴

日ごろから良く使うif文にはいろいろな書き方があるんです。中には、「if文は使い慣れているよ！」という人でも知らなかった書き方もあるかもしれませんよ。

if文の特徴には以下のものがあります。

elseで条件に当てはまらなかったときの処理をする
else ifで複数の条件を同時に行う
論理演算子で複数の条件を同時に行う
三項演算子でif文を省略する
論理演算子を使ってif文を省略する

それぞれサンプルコードを載せて詳しく解説しますね。

elseで条件に当てはまらなかったときの処理をする

if文で条件分岐はできましたが、条件を満たさなかったときの処理も欲しいと思いませんか？

そんな時はelseを使えば、条件を満たさなかったときの処理も書けますよ。

let x = 10;
let y = 20;
if(x >= y){
console.log("xはy以上の値である");
}else{
console.log("xはyより小さい値である");
}

// 実行結果
xはyより小さい値である

上記のコードでは、最初のif文で条件に満たさなかったため、elseの中身が実行されているんですね。

elseの注意点はif文の条件に満たされなかった場合、どんな値でもelseが実行されるところ。

上記のコードだと数字がyより小さい前提でコードが書かれていますが、xが文字列でもelseが実行されてしまうんです。

そのため、違う型の値が入られると困る場合には、elseを避けるのが良いですね。

else ifで複数の条件を同時に行う

elseだけではどんな値でも通ってしまうので、「y以上であるか」と「yより小さいか」の二つの条件が必要になってきます。

ではどのようにして複数の条件を同時に行えばよいのでしょうか？

let x = 10;
let y = 20;
if(x >= y){
console.log("xはy以上の値である");
}else if(x < y){
console.log("xはyより小さい値である");
}else{
console.log("xは数字ではない")
}

// 実行結果
xはyより小さい値である

上記のコードを見ると5行目にelse ifがあり別の条件式が書かれていますね。つまりelse ifを使うことで複数の条件を記述できるんです。

xを文字列に変えてみると、どちらの条件式も満たせません。なので、elseが実行されxは数字ではないことがわかるんですね。

else ifは何回でもかけます。xの値が10から19、20から29、30から39…というように、いくつかの場合に分けて実行したいときにとても有効です。

またelseは省略しても大丈夫なので、必要ないと感じたら記述しなくても問題ありません。

let x = 10;
if(10 <= x < 20){ … }
else if(20 <= x < 30){ … }
else if(30 <= x < 40){ … }
else if(40 <= x < 50){ … }

論理演算子で複数の条件を同時に行う

xが10以上でyが20以上であるための処理をしたいと思ったとき、あなたはどのように記述しますか？

複数の条件は以下のようにif文を書けばよいでしょう。

let x = 10;
let y = 20;
if(x >= 10){
if(y >= 20){
console.log("success!");
}
}

// 実行結果
success!

まずはxが10以上であるかの判別式を通り、条件を満たせば中身のyが20以上であるかの判別式にいきます。

すでにxが10以上であるのはクリアしているので、後はyが20以上であるかの条件式を書けばいいということですね。

しかし、なんだかコードが見づらいと感じませんか？if文の中にif文があるので「この部分を1行で表せないかな？」と思いますよね。

1行で複数の条件を記述するなら論理演算子が有効です。論理演算子はANDやORのことで、2つの条件をどっちも満たせば通るのがAND、どちらかが満たせば通るのがORなんですね。

ANDは「&&」で、ORは「||」で記述できます。サンプルコードを見てみましょう。

let x = 10;
let y = 20;
// 「x >= 10」「x >= 20」どちらも満たせば中身が実行される
if(x >= 10 && y >= 20){
console.log("success!");
}
// 「x >= 10」「x >= 20」どちらか満たせば中身が実行される
if(x >= 10 || y >= 20){
console.log("success!");
}

// 実行結果
success!
success!

if文が一つだけになったのでかなり見やすくなりましたね。このように複数の条件を使いたい場合には、論理演算子を使いましょう。

三項演算子でif文を省略する

「elseで条件に当てはまらなかったときの処理をする」では、xとyを比較してどちらが大きいかによって、処理を変えていました。

elseを使って6行くらいのコードを書いていましたが、「そのコードをもっと簡潔に書きたい！」と思いますよね。

条件を満たしたときと満たさなかったときにそれぞれ違う処理をするコードは、三項演算子を使うともっと簡単に書けます。

let x = 10;
let y = 20;
let comp = (x <= y) ? "xはyより小さい" : "xはyより大きい";
console.log(comp);

// 実行結果
xはyより小さい

上記のコードを見ると3行目に見慣れない書き方をしている部分がありますよね。この部分が三項演算子と言われるものです。

「?」の前に条件式を書き、条件を満たせば「:」の左側が処理されます。逆に条件を満たさなかったら「:」の右側が処理されるんですね。

三項演算子を使えば6行のコードが1行に収められ、非常に見やすい形になりましたね。使うときは、短い処理でないと見づらいコードとなってしまいます。

上記のコードのような短い処理で済む場合に三項演算子を使いましょう。

論理演算子を使ってif文を省略する

if文には論理演算子を使って省略する方法もあります。以下のコードを見てみましょう。

let x = 10;
let y = 20;
let comp = (x <= y) && "xはyより小さい";
console.log(comp);

// 実行結果
xはyより小さい

3行目の部分に注目すると、三項演算子に似た形のコードがありますね。この部分は「&&」の左側に書かれた条件式を満たせば、右側の処理をしてくれます。

一方で「||」と記述した時は条件式を満たさなかった時に右側の処理をしてくれるんですね。

3行目の部分は条件を満たした場合のみ、満たさなかった場合のみの処理を書きたいときに便利です。

ただしこのような条件分岐は、以下のような省略形の方がわかりやすいかもしれませんね。

let x = 10;
let y = 20;
if(x <= y) console.log("xはyより小さい");

// 実行結果
xはyより大きい

JavaScript ifの使い方

次はif文を使って例題を解いてみましょう。

「わからないところがあって、解けなかった…」という人は、解説をよく読んで処理がどのように動いているのか理解してみてください。

使用例1：値が奇数の要素を2倍にする

配列[1,2,3,4,5,6]を、値が奇数の要素だけ2倍にして出力するコードを書いてみましょう。

考え方としては奇数の要素だけを2倍にすればいいので、値が奇数であるかの条件を作ればよさそうですね。

では値が奇数であるかの条件は、どのように書けばいいのでしょうか？

まずは奇数の特徴を抑えておきましょう。奇数は1,3,5…などの数で、2で割り切れない性質を持っていました。

つまり2で割った余りが0ではないということになるので、条件式は「（要素の値）%2 != 0」と書けばいいんですね。

「!=」は二つの値が等しくない場合に条件を満たす論理演算子です。偶数の反対は奇数というように、対になる条件は「!=」が有効なので覚えておきましょう。

完成したサンプルコードを載せますので、自分が作ったコードと比べてみてください。

let list = [1,2,3,4,5,6];
for(let i=0; i<list.length; i++){
if(list[i]%2 != 0) list[i] *= 2;
}
console.log(list);

// 実行結果
[ 2, 2, 6, 4, 10, 6 ]

使用例2：月日が誕生日ならお祝いの言葉を表示する

誕生日を12月31日として、現在時刻が誕生日なら「happy birthday」と表示されるコードを作成してみましょう。

まずは現在時刻を使うのでDateオブジェクトが必要になります。そして月と日を取り出して、それぞれ誕生日の月日と一致するかの条件式を書けばいいわけなんですね。

条件式は「12月であるか」と「31日であるか」が必要になります。しかし、論理演算子を使えば1つの条件式で記述できそうですね。

以上の事を踏まえて作成したコードが以下のものになります。

let time = new Date();
if(time.getMonth()+1 == 12 && time.getDate() == 31){
console.log("happy birthday");
}

// 実行結果
happy birthday

「なぜか条件が通らない…」と躓いていた人は、getMonth()で取得する値の範囲が0~11であることに注意しましょう。

12月はgetMonth()で11を返すので、1を足してあげると条件が通るようになりますよ。

使用例3：nameキーがあるオブジェクトのみを出力する

以下のような配列を使って、nameキーがあるオブジェクトのみを出力してみましょう。

let food = [{name:'barger',kcal:600},{name:'potato',kcal:400},{kcal:800}];
// 表示したいもの
barger:600kcal
potato:400kcal

配列の要素を見ると3つ目のオブジェクトにはnameキーが無いことがわかります。

表示させたいものにはnameキーとkcalキーの値が使われているため、nameキーがあるオブジェクトのみを出力したいわけですね。

nameキーが存在するかの条件式は「値がtrueかfalseで判定する」で解説しました。

条件式を「リスト名.name」とすると、nameキーが無い3つ目のオブジェクトは条件を満たしません。つまりnameキーが存在するオブジェクトだけを使えるようになるんですね。

作成したコードは以下のようになります。

let food = [{name:'barger',kcal:600},{name:'potato',kcal:400},{kcal:800}];
for(let i=0; i<food.length; i++){
if(food[i].name) console.log(food[i].name+":"+food[i].kcal+"kcal");
}

// 実行結果
barger:600kcal
potato:400kcal

JavaScript ifの注意点

if文については慣れてきましたか？次はif文を使う上で、気を付けなければいけない注意点を紹介していきます。

「なんだか思い通りに実行できないな…」と感じたら、以下の2点を破っていないか確かめてみましょう。

if文の中で変数を定義すると、外では使えない
一度条件が通ると後の条件else ifは無視される

それぞれ解決法を載せながら解説していきます。

注意点1：if文の中で変数を定義すると、外では使えない

if文の中身では、変数を定義して様々な処理ができますよね。ところが中で定義した変数を外で使うとエラーが起きてしまいます。

let x = 10;
if(x > 0) let y = 20;
console.log(y);

// 実行結果
if(x > 0) let y = 20;
^^^
SyntaxError: Lexical declaration cannot appear in a single-statement context

エラーが起きてしまう原因は、if文の外と中ではスコープが違ってくるからなんですね。

スコープとは、変数を扱える範囲のことです。if文の外で定義した変数は中でも扱えて、if文の中で定義した変数は外では扱えません。

しかし例外もあります。以下のコードを見てみましょう。

let x = 10;
let y = 30;
if(x > 0){ let y = 20; var z = 40; }
console.log(y);
console.log(z);

// 実行結果
30
40

上記のコードには2つの例外がありますが、わかりますか？一つ目はif文の中でvarとして定義した場合、外でも使えてしまうんです。

一見便利そうに見えますが、思いもよらないエラーを引き起こす原因にもなります。なるべくvarを控えてletを使うようにしましょう。

もう一つはif文の中と外でyを定義した場合、外にあるyが出力されます。一つ目の例外と違って、if文の中で定義した変数を出力するわけではありません。

しかしコードが見づらくなってしまうので、同じ名前の変数を作ってしまうのは避けた方が無難ですね。

注意点2：一度条件が通ると後の条件else ifは無視される

コードを書いていると、「値が100以下だったらこの処理をして、更に80以下だったらこの処理をして…」と値によって複数の処理をしたい場面がありますよね。

そんな時にelse ifを使ってしまうと、実装できなくて躓いてしまいます。なぜなのか、以下のコードを見てみましょう。

let x = 10;
if(x <= 100) console.log("xは100以下の数字");
else if(x <= 80) console.log("xは80以下の数字");
else if(x <= 50) console.log("xは50以下の数字");
else if(x <= 20) console.log("xは20以下の数字");