初心者必見！JavaScript if~elseが即わかる！andやor…

プログラミング言語JavaScriptにおけるif文（if~else）の基礎を解説する記事です。

if文を使えば、「条件分岐」が実現できます。

本記事では、JavaScriptのif~else文の基本だけでなく、初心者でも知っておきたい論理演算子（or/and/not）やネスト（入れ子）についても解説していきます。

ぜひ最後まで読んで、JavaScriptのif文を理解してください。

INDEX

JavaScript if〜elseの書き方
JavaScript if〜elseの例
JavaScript if〜elseにおける論理演算子or（||）
JavaScript if〜elseにおける論理演算子and（&&）
JavaScript if〜elseにおける論理演算子not（!）
JavaScriptでネスト（入れ子）をしたif文の使い方

JavaScript if〜elseの書き方

ある条件に基づいて処理を変えたいときは「if〜else文」を使いましょう。「もし、〜であるなら〜しなさい。それ以外であれば〜しなさい」が簡単に実現できます。

if〜else文の書き方

if(条件式){
    文A // 条件式が真の場合に実行する。
}else{
    文B　　　// 条件式が偽の場合に実行する。
}

if(条件式){

文A // 条件式が真の場合に実行する。

}else{

文B　　　// 条件式が偽の場合に実行する。

}

・if 条件式が正しい(true)場合には文Aを実行。
・elseそれ以外であれば文Bを実行。

※else文はオプションです。

更に条件を加えたい時は下記のように「else if」文を追記して条件を追加しましょう。

if(条件式A){
    文A // 条件式Aが真の場合に実行する。
}else if(条件式B) {
    文B // 条件式Aが偽のときで、もし条件式Bが真の場合に実行する。
}else{
    文C　// 条件式がすべて偽の場合に実行する。
}

if(条件式A){

文A // 条件式Aが真の場合に実行する。

}else if(条件式B) {

文B // 条件式Aが偽のときで、もし条件式Bが真の場合に実行する。

}else{

文C　// 条件式がすべて偽の場合に実行する。

}

ただし、if文の条件が増えてしまうと見やすさ、管理のしやすさという点で困る状況もでてきます。そういった場合は、Switch文を使うことも検討してみましょう。　

＼21万以上のオンラインコースから選べる！／

Udemyで講座を探す

JavaScript if〜elseの例

先ほど学習したif 〜else文を使った例サンプルコード1を見てみましょう。

①もし、（サイコロの）数字が6の時「あたり」を出力
②もし、（サイコロの）数字が5の時「惜しい、はずれです。」を出力
③それ以外の場合は「はずれです。」を出力する。

//サンプルコード1
var number = 6;
if(number==6){
    console.log("おめでとうございます。あたりです。"); //numberが6の時「あたり」を表示する。
}else if(number==5){
    console.log("惜しい。はずれです。"); //numberが5の時「惜しい。はずれです。」を表示する。
}else{
    console.log("はずれです。"); //それ以外の条件のとき　「はずれ」を表示する。
}

//サンプルコード1

var number = 6;

if(number==6){

console.log("おめでとうございます。あたりです。"); //numberが6の時「あたり」を表示する。

}else if(number==5){

console.log("惜しい。はずれです。"); //numberが5の時「惜しい。はずれです。」を表示する。

}else{

console.log("はずれです。"); //それ以外の条件のとき　「はずれ」を表示する。

}

//サンプルコード1の実行結果
惜しい。はずれです。

1 2	//サンプルコード1の実行結果惜しい。はずれです。

この様に、受け取った値に応じて出力する結果を変更することができました。

JavaScript if〜elseにおける論理演算子or（||）

先ほどのifで「もし〜または〜のとき〜しなさい」という条件をつけたい時は、どのようにしたら良いでしょうか？こちらの項では、論理演算子or「||」を紹介していきます。

if文の条件式に論理演算子を用いることで複数の条件を付け加える事ができます。

次のサンプルコード2は、「もし〜または〜のとき〜しなさい」を実現するためにif文の条件式に論理演算子or「||」を追加しています。

サイコロの値が 6のときに「あたり」を出し、それ以外は「はずれ」を出します。その条件に加えて、スペシャルゲストの場合は必ず「あたり」をだすようなプログラムを想定しています。

//サンプルコード2
var num = 3;　　　　　　　//判定に使う数字
var special = true; //スペシャルゲストかどうかを判断するフラグ
if (num ==　6 ||special == true){
    console.log("おめでとうございます。あたりです。");
        //numが6の時またはspecialがtrueの時「あたり」を表示する。
}else{
    console.log("はずれです。");
        //ifの条件に当てはまらない時に「はずれ」を表示する。
}

//サンプルコード2

var num = 3;　　　　　　　//判定に使う数字

var special = true; //スペシャルゲストかどうかを判断するフラグ

if (num ==　6 ||special == true){

console.log("おめでとうございます。あたりです。");

//numが6の時またはspecialがtrueの時「あたり」を表示する。

}else{

console.log("はずれです。");

//ifの条件に当てはまらない時に「はずれ」を表示する。

}

//サンプルコード2の実行結果
おめでとうございます。あたりです。

1 2	//サンプルコード2の実行結果おめでとうございます。あたりです。

この様に論理演算子を用いることで、判定条件式に追加の判定条件を増やすことができます。

JavaScript if〜elseにおける論理演算子and（&&）

先ほどは、論理演算子or「||」を用いてif文に「または」の条件を追加しました。

続いては論理演算and(&&)をもちいて条件に「かつ」を追加してみましょう。「もし、〜かつ〜なら〜しなさい。それ以外であれば〜しなさい」を実現することができます。

次のサンプルコード3では、女性限定のキャンペーンという設定で、女性がサイコロを振って６を出したら「あたり」それ以外であれば「はずれ」を出すサンプルです。

//サンプルコード3
var num = 1;
var s = "女性";
if(num==6&amp;&amp;s=="女性"){
    console.log("おめでとうございます。あたりです。");
        //numが6かつ「女性」の時「あたり」を表示する。
}else{
    console.log("はずれです。");
        //ifの条件に当てはまらない時に「はずれ」を表示する。
}

//サンプルコード3

var num = 1;

var s = "女性";

if(num==6&&s=="女性"){

console.log("おめでとうございます。あたりです。");

//numが6かつ「女性」の時「あたり」を表示する。

}else{

console.log("はずれです。");

//ifの条件に当てはまらない時に「はずれ」を表示する。

}

//サンプルコード3
はずれです。

1 2	//サンプルコード3 はずれです。

この様に、「かつ」の条件を追加することが簡単にできました。

論理演算子or「||」と比較すると、2つの条件がともに真のときしか条件式の結果が真とならないことに注目しましょう。　

JavaScript if〜elseにおける論理演算子not（!）

続いては論理演算子のnot(!)について説明します。

論理演算子notは、bool型の否定した結果を返します。具体的には、実際に実行例を見てみましょう。

console.log(!true);　 // falseと出力される
console.log(!false);　// trueと出力される

1 2	console.log(!true);　 // falseと出力される console.log(!false);　// trueと出力される

この様に、bool型の値に「!」を付けることによって反転した値が出力されます。

それでは論理演算子notを使ったサンプルコードを見てみましょう。

次に示すサンプルコード４は　もし、XXXメンバー会員ではない場合は、「XXXメンバー会員になりませんか？」と出力する。それ以外であれば、XXXメンバー会員ステータスを表示します。

//サンプルコード4
var member = true ; // XXXメンバー会員の場合はtrueを入れる。
if (!member){
    console.log("XXXメンバー会員になりませんか？");//もしXXXメンバー会員ではないときに出力する
}else{
    console.log("現在のXXXメンバー会員ステータス ： ゴールドメンバー会員");
}

//サンプルコード4

var member = true ; // XXXメンバー会員の場合はtrueを入れる。

if (!member){

console.log("XXXメンバー会員になりませんか？");//もしXXXメンバー会員ではないときに出力する

}else{

console.log("現在のXXXメンバー会員ステータス：ゴールドメンバー会員");

}

//サンプルコード4の実行結果
現在のXXXメンバー会員ステータス ： ゴールドメンバー会員

1 2	//サンプルコード4の実行結果現在のXXXメンバー会員ステータス：ゴールドメンバー会員

この様に、論理演算子not「!」を用いることで簡単に現在の条件の否定の意味を表すことができます。

今回は、シンプルな条件の否定です。しかし、条件が複雑になってきたときなどを想像してみてください。論理演算子not「!」を使うことで条件をスッキリと書くことができると思います。このbool型のフラグを処理する場合は、よく使うことになりますので、覚えておきましょう。

最後に、今回でてきた論理演算子について、昔習った気がするけど不安という方いませんか？

下記の図で少し復習しておきましょう。

論理演算子はとっても便利です。複雑な条件も繋げていくことでどんどん書けてしまいます。

ただし、多用しすぎると可読性が下がってしまいます。シンプルな条件分岐を書いていくことをおすすめします。

JavaScriptでネスト（入れ子）をしたif文の使い方

JavaScriptのif文は、if文のなかにif文を入れるネスト（入れ子）構造で利用することもできます。ネストは複雑な条件を実現でき、頻繁に利用されるため覚えておきましょう。

実際にサンプルコードを交えて、ネスト構造がどのようなものか説明します。

ここでは次の4つの条件に従い、それぞれの条件に該当する人材を振り分けるサンプルコードとなっています。

条件1：30歳以上
条件2：中途採用
条件3：プログラミング経験者
条件4：デザイン経験者

//サンプルコード5
age = 33;
mid_career = true;
program_exp = false;
design_exp = true;

if ( age >= 30 &amp;&amp; mid_career) {
	if ( program_exp ) {
		console.log("開発主任候補");
	} else if ( design_exp ) {
		console.log("デザイン主任候補");
	} else {
		console.log("デザインスタッフ");
	}
} else if ( program_exp ) {
	console.log("開発スタッフ");
} else {
	console.log("デザインスタッフ");
}