条件によって処理を分岐させるにはどうしたらいいの？
複数のIF文を条件分岐させる方法が分からない
elseとかelse ifとかってどんな時に使えばいいの？
プログラミングをするうえで避けては通れないのが条件分岐処理（IF文）です。何らかの条件によって処理Aを実行したり、もしくは処理Bに移行するような条件分岐はプログラムを作成する時に必ず必要になってきます。
そのうえパフォーマンスにも影響を与える可能性が高いので、基本的な知識は必要不可欠です。
ただ、どこから勉強を始めたら良いのか分からないという人も少なくないでしょう。
こんにちは！ライターのマサトです。
この記事では、初心者でも今日からIF文をマスターして条件分岐処理を書けるようになる方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。この記事はこんな人のために書きました。
- 条件分岐の基礎をマスターしたい方
- IF文（else if）の実践的な使い方を学びたい方
- 論理演算子を活用した複数の条件分岐法を知りたい方
IF文とは？
英語のIFを日本語に訳すと「もしも」ですね。実は、プログラムの世界もこの英訳の通り「もしも◯◯だったら〜」という分岐処理を行うためにIFを使うのです。このIF文を使うことで…
- もしも変数の中身が1だったら、処理Aを実行する
- もしも変数の中身が2だったら、処理Bを実行する
というように、複数の処理をどのように実行するかを判定することができるようになります。一般的な構文は以下の通りです。
if( 条件式 ) {
//trueの場合の処理を書く
}
条件式の部分は、どのような状態になったら処理をするのかという判断基準を記述します。その条件に当てはまる場合のみ、任意の処理が実行されるわけです。IF文には他にもelse if、elseという仲間が存在するので、それぞれ細かく見ていきましょう。
elseifで別の条件分岐を作成する
else ifは、IF文のあとに記述されるのが一般的です。ifで指定した条件に当てはまらないが、別の指定した条件に当てはまるときに処理が実行されます。
if( 条件式 ) {
//trueの場合の処理を書く
} else if( 条件式 ) {
//ifの条件式がfalseでelse ifの条件式がtrueの場合の処理を書く
}
else ifは最初のIF文に当てはまらない時の処理なので、必ずifのあとに書かれるという点に注意しておきましょう。
elseですべての条件に当てはまらない処理を作成する
ifやelse ifで指定した条件に当てはまらない場合に実行される処理です。次のサンプル例を見てください！
if( 条件式 ) {
//trueの場合の処理を書く
} else if( 条件式 ) {
//ifの条件式がfalseでelse ifの条件式がtrueの場合の処理を書く
} else {
//if、else ifの条件式にいずれも当てはまらない場合の処理を書く
}
どの条件にも当てはまらなかったら実行するということなので、IF文の一番最後にしか書かれることはありません。ちなみに、最初のIF文の条件式がtrueで実行された場合には、else ifやelseが実行されることはありません。
IF文の使い方
この章では、IF文を使った実際のプログラミング手法について見ていきましょう！主に、基本的な書き方からelse ifによる複数分岐、入れ子にする方法について学んでいきます。
IF文を書いてみよう
ここからは、実際のコード例を見ながらIF文の基本を理解していきましょう！例えば、体重が65kgよりも少ないか多いかで、違うメッセージを表示するプログラムを作ってみます。
var weight = 58; // 現在の体重
// 現在の体重が「65kg」よりも少ないか？
if( weight < 65 ) {
console.log('ダイエット成功です！');
} else {
console.log('もっと努力が必要です！');
}
出力結果は…
ダイエット成功です！
となります。上の例では、IF文の条件式が「58 < 65」となり、65よりも小さい値なのでtrueの処理を実行するという意味になります。そのため、もし変数「weight」に65以上の大きな数字を代入すれば、falseの処理が実行されるというわけです。
このサンプルのように、一般的にIF文の条件式には「○ < ○」「○ === ○」「○ >= ○」のような比較演算子が使われます。
しかし、次のようにtrueやfalseを直接指定する方法もよく使われるので覚えておきましょう！
var flag = false;
if( flag ) {
console.log('trueの処理です');
} else {
console.log('falseの処理です');
}
このサンプルでは、変数「flag」にfalseが代入されているため、IF文の条件式ではダイレクトにfalseの処理が実行されるというわけです。
else ifの処理は実行順序に注意する
if文を扱う上で一番重要なのは、実行される順番です。先ほど作った体重のサンプルコードを例にして見てみましょう。
var weight = 68; // 現在の体重
if(weight < 65) {
console.log('ダイエット成功です！');
} else if(weight < 70){
console.log('あともう少しです！');
} else {
console.log('もっと努力が必要です！');
}
上の例では、「65kgよりも少なかった場合」に加えて「70kgよりも少なかった場合」という条件が増えているのがわかります。このようにelse ifは、追加すればするほど新しい条件を増やしていくことができます。
ただし、注意しなければいけないポイントは、IF文は最初に合致した条件の処理を実行したら終了するという点です。例えば、次のコードは期待通りの動作になるでしょうか？
var weight = 60;
if(weight < 70) {
console.log('あともう少しです！');
} else if(weight < 65){
console.log('ダイエット成功です！');
} else {
console.log('もっと努力が必要です！');
}
このサンプルは、「65よりも少ない場合」と「70よりも少ない場合」の条件を入れ替えたコードになっています。
そして、出力結果は…
あともう少しです！
と表示されてしまいます。変数「weight」に代入されているのが「60」なので、本来は「ダイエット成功です！」というメッセージが欲しいところです。ところが、このサンプルでは最初に合致する条件が「70よりも少ない場合」という条件のため、こちらの処理が先に実行されて終了してしまったわけです。
このようなIF文の仕様を知らないでプログラムを書いてしまうと、エラーが発生しないためにどこを誤って書いたか理解できない…といったケースが起きますので注意しましょう！
if elseで条件分岐を入れ子にして繰り返す方法
ここでは、IF文を入れ子で使う方法を解説します。IF文に中へさらにIF文を入れることで、入れ子にして複数の条件分岐をすることができます。次のプログラムで確認してみましょう。
var num = 12;
var result;
if (num > 10) {
if (num > 20) {
result = '20より大きい数値です';
} else {
result = '10～20の数値です';
}
} else {
if (num < 5) {
result = "5より小さい数値です";
} else {
result = "5～10の数値です";
}
}
console.log(result);
実行結果
10～20の数値です
このサンプル例では、変数の値が10よりも大きい場合にさらに追加の条件分岐で20よりも大きいかどうかを判定していますね。反対に変数の値が10よりも小さい場合はさらに5よりも小さいかどうかの条件分岐を処理しています。
このようにIF文を入れ子にすることで、複数の条件を利用して分岐処理をさせることができるわけです。
IF文の活用
この章では、IF文をさらに活用したプログラミングについて見ていきましょう！主に、ダイアログの条件分岐とSwitch文との比較について学んでいきます。
ダイアログの条件分岐を作ろう
Webアプリなどを開発している際に、ユーザーに判断を促すために確認用のダイアログを表示するケースがあります。これにより、ユーザーがOK・キャンセルボタンをクリックして任意の処理を実行していきます。基本的な例として、confirm()メソッドを使ったサンプルを作ってみましょう！
confirm()メソッドは実行するだけで画面にダイアログを表示してくれるのですが、ユーザーがクリックしたボタンに応じてtrue / falseを返り値として取得できます。
const result = confirm(任意のメッセージ);
引数に任意のメッセージを設定するとダイアログに表示することができます。これらの仕組みを活用すると、返り値をIF文の条件式にすることで分岐処理を作ることが出来るわけです。
const result = confirm('これはサンプルダイアログです');
if(result) {
console.log('OKがクリックされました');
} else {
console.log('キャンセルがクリックされました');
}
ユーザーがOKボタンをクリックすると返り値はtrueになるので、IF文の真の処理が実行されるというわけです。ちなみに、ダイアログをJavaScriptで制御するための基本から応用までを次の記事で体系的にまとめているのでぜひ参考にしてみてください！
Switch文に置き換えて比較してみる
IF文によく似た条件分岐処理を作ることができるメソッドとして、Switch文があるのをご存じでしょうか？
IF文もSwitch文も同じように条件分岐処理が作れるのですが、どのように使い分けたら良いのか悩むことも少なくありません。そこで、サンプル例として次のプログラムを見てください。
const weather = '晴れ';
if(weather === '曇り') {
console.log('今日は曇りです');
} else if(weather === '雨') {
console.log('今日は雨です');
} else if(weather === '晴れ') {
console.log('今日は晴れです');
} else {
console.log('今日の天候は要注意');
};
この例では、3つの条件分岐とelse処理がプログラムされています。これとまったく同じ処理をSwitch文に書き換えてみましょう！
switch(weather) {
case '曇り':
console.log('今日は曇りです');
break;
case '雨':
console.log('今日は雨です');
break;
case '晴れ':
console.log('今日は晴れです');
break;
default:
console.log('今日の天候は要注意');
break;
}
Switch文でプログラムした方がソースコードの見通しが良くなりましたよね？
さらに条件分岐が10個や20個と増えていけば、IF文で記述したプログラムは非常に読みづらくなります。つまり、分岐が多くなることが予想されるのであれば、IF文よりもSwitch文の方が好ましいというわけです。
実際に、Switch文は複数の条件分岐を想定して作られたメソッドです（処理速度も若干ですが高速です）。このSwitch文をさらに応用的に活用する方法については、次の記事で詳しくまとめているのでぜひ参考にしてみてください！
論理演算子で複数の条件分岐を作成する
この章では、論理演算子を活用して複数の条件式を作る方法について見ていきいましょう！主に、and / or / notを使った条件式の作り方を学んでいきます。
and（&&）を使った条件分岐の方法
まずは、and(&&)を使って複数の条件式を作る方法について見ていきましょう！and(&&)は、複数の条件式のいずれか1つでも「false」があれば結果が「false」になる特性があります。
例えば、次のサンプル例を見てください。
console.log(true && true); console.log(true && false); console.log(false && false);
実行結果
true false false
この例では、「true && true」のようにすべての条件がtrueもしくはfalseの場合は結果もそのままtrue / falseを返すことが分かります。
しかし、「true && false」のようにいずれかの条件にfalseが含まれていた場合は必ず結果もfalseになるのが特徴なのです。次のサンプル例を見てください。
var num = 30;
if(num > 0 && num < 50) {
console.log('0よりも大きくて50より小さい');
} else {
console.log('条件に当てはまりません');
}
この例では、数値「30」に対して複数の条件を利用しているのが分かりますね。条件式の意味としては、変数「num」が0よりも大きくてなおかつ50よりも小さい場合にのみtrue判定になります。
論理演算子を使うとこのような細かい条件を活用できるので、コードの効率化にも繋がるわけです。
or（||）を使った条件分岐の方法
次に、and(&&)とよく似た論理演算子であるor(||)について見ていきましょう！or(||)は、複数の条件式のいずれか1つでも「true」があれば結果が「true」になるという特性があります。
次のサンプル例を見てください！
console.log(true || true); console.log(true || false); console.log(false || false);
2つ目の条件式に注目してください！「true || false」と記述することで、1つでもtrueがあれば結果もtrueになるわけです。and(&&)はその逆で1つでもfalseがあれば結果がfalseになりましたよね？
このようにand / orはペアで覚えておくと理解しやすいでしょう。ちなみに、orの演算子について基本から応用技までを次の記事で解説しているのでぜひ参考にしてみてください！
not（!）を使った条件分岐の方法
今度はnot(!)について見ていきましょう！not(!)は少し特殊な演算子で、条件の結果であるtrue / falseを逆にする特徴があります。次のサンプル例を見てください！
console.log(!true); console.log(!false);
実行結果
false true
true / falseそれぞれの前にnotを意味する「！」を付与しているのが分かりますね。これによりnotが適用されて、実行結果のように条件の結果が逆になるというわけです。使い方として、例えばtrueが格納された変数があった時に「false」の処理を記述したい場合を考えてみます。
var state = true;
if(state) {
//trueの処理
} else {
//falseの処理
}
普通ならこのように「trueの処理」「falseの処理」という順番で記述しますよね？
しかし、notを使うと以下のように1行で記述できるわけです。
if(!state) //falseの処理
「!state」と条件式を作ることで条件が「false」の時と同じことになるので、そのままfalseの処理を記述できるというわけです。使い方次第でコードの効率化に繋がるので覚えておくと便利ですよ。
JavaScriptにおける演算子の使い方については次の記事ですべてまとめているので、合わせて参考にしてみてください！
2種類の比較演算子(==/===)の違い
if文の条件式で比較を行う時に、よく使う例として==や===が存在します。
しかし、この2つは同じようでまったく違う比較をおこなっています。これは一般的に、==（等価演算子）===（厳密等価演算子）と呼ばれており、if文においてバグの原因にもなりやすいのでよく覚えておきましょう！
例えば、次のコードを見てください！
if('1' === 1)
console.log('同じです！');
else
console.log('違います！');
出力結果は…
違います！
と表示されます。このサンプルで注目すべきは、条件式が文字列の「1」と数値の「1」を比較している点です。どちらも「1」ではありますが、「文字」と「数値」という「型」が違うために同じではないという判断をしているわけです。
さらに詳しい比較演算子の使い方や活用技については、下記の記事で詳しく解説していますのでぜひ参考にしてみてください！
falseになる条件の注意点
条件式に記述する<、===、>=などの比較演算子は、trueになるかfalseになるかをイメージしやすいでしょう。
しかしながら、JavaScriptには少し変わったfalseの条件がいくつか存在しています。ここで全部まとめて確認しておきましょう！
＜falseになる5つの条件＞
- 0（数値の0）
- null（値が空であることを示す型）
- NaN（数値ではないことを示すプロパティ）
- undefined（値が未定義であることを示す型）
- “”（空の文字列）
上記の値をif文の条件式で使うとすべてfalseと判断されます。試しにちょっと使ってみましょう。
if( 0 || NaN || "" || undefined || null )
console.log('trueの処理');
else
console.log('falseの処理');
このコードの出力結果は…
falseの処理
となります。
省略形の書き方を覚えよう
if文は、プログラミングにおいてよく使う構文でもあるため、いくつかの省略形が存在します。これらの用法を覚えることで、プログラムをシンプルで効率よく記述することも可能です。基本を理解できているならば、ぜひ活用できるようになっちゃいましょう！
elseを省略してみよう
if文は、trueの処理falseの処理を分岐させて実行できる構文でした。
ただし、場合によってはtrueの処理だけを書いておけば問題ないケースもあります。そんな時は、わざわざelseによる分岐処理を書かなくてもエラーにはなりません。
if( 5 < 10 ) {
console.log('trueの処理');
}
このようにelseは書かずtrueの処理だけを書いておけば、もしfalseの場合にはIF文を飛ばして実行されるようになります。
{}を省略できる基準とは？
これまでのif文には、処理を分岐させるために{ }を使ってブロックを作っていましたが、処理が1行しかない場合は{}を省略することができます。
if( 5 < 10 ) console.log('trueの処理');
上の例では、{}だけでなくelseも省略して、スッキリと1行で完結できているのがわかりますね。もちろん、条件式を「5 !== 10」などにしておけば、falseの処理を1行で書くことも可能です。
条件演算子で条件分岐を1行にまとめる
JavaScriptには条件（三項）演算子を使って、if文と同じ働きをする条件分岐を作ることも可能です。基本的な構文は次のとおりです。
条件式 ? trueの処理 : falseの処理
「?」と「:」を使って処理を分岐させるようにします。例えば、体重のプログラムを条件演算子を使って書いてみましょう！
var weight = 60;
weight < 65 ? console.log('成功！') : console.log('失敗！');
出力結果は…
成功！
と表示されます。このように、簡単なif文を書く時に覚えておくと非常に便利ですね。下記の記事では、さまざまなケースにおいてさらに効率よくプログラミングできるテクニックを体系的にまとめているので、ぜひ合わせて学習に役立ててください！
IF文の使い方まとめ
最後に、IF文の基本的な使い方についてまとめておきます。IF文は引数に条件式を設定して、true / falseの処理に分岐させるのが基本的な使い方になります。
if(0 < 10) {
console.log('trueです');
}
この場合、条件式が「0 < 10」なので正しい式となりtrueの処理が実行されます。また、複数の条件を連結させて実行することも可能です。
if( 条件式 ) {
//trueの処理
} else if( 条件式 ) {
//trueの処理
} else {
//どの条件式にも当てはまらない場合の処理
}
最初にIF文でfalseになった場合に「else if()」を使うことで、もう一度新しい条件式で処理を行うことができます。「else」だけで利用すると、すべての条件式に当てはまらなかった場合に実行される処理を記述できるわけです。
条件式に論理演算子を使うことで、より効率よく複数の条件式を処理することもできます。
var num = 50;
if(num < 100 && num > 10 ) {
console.log(true);
} else {
console.log(false);
}
条件式に「and(&&)」の論理演算子を使っていますが、or(||)やnot(!)なども利用することができます。また、比較演算子として「==」や「===」があり、より厳密に比較できるのが「===」になります。
if('1' === 1) {
console.log('同じです！');
} else {
console.log('違います！');
}
この場合、文字列の「１」と数値の「1」を比較しており、「===」を利用すると値と型の両方を厳密に比較することになります。ちなみに、IF文は省略して記述することも可能で代表的な書き方として条件(三項)演算子があります。
var weight = 60; weight < 65 ? console.log(true) : console.log(false);
条件式に続けて「?」を記述して「trueの処理 : falseの処理」という順番で1行に処理をまとめることができるので便利です。
まとめ
今回は、if文の基本的な使い方から、いくつかの応用的な活用法まで学習しました。もう一度、簡単にまとめると次のようになります！
- if文は条件式によってtrueやfalseで処理を分岐させる
- else ifは実行の順番に注意する必要がある
- 比較演算子の違いを理解しておこう
- 少し変わったfalseになる条件が5つ存在する
- if文はいくつかの省略形を活用することができる
上記内容を理解することでif文の活用範囲が大きく広がりますので、ぜひ参考にしてみてください！
