In 'n' Out

条件によって処理を切り替える

プログラムは、常に同じ処理を実行するだけでは実用的とは言えません。
状況や入力内容によって、実行する処理を変えたい場面は多くあります。
たとえば数値が一定以上なら表示する、条件に合わなければ別の処理を行うといったように、条件によって処理の流れを分ける仕組みが必要になります。
JavaScriptでは、このような処理の分岐を行うためにif文を使います。
さらに、複数の条件を組み合わせて判断したい場合には論理演算子を用います。
このページでは、条件をもとに処理を分ける考え方と、if文・論理演算子の基本的な使い方を順に解説します。

条件に合う場合だけ処理を行う

if文は、指定した条件に合っている場合だけ処理を実行するための構文です。
比較演算子で判定した結果をもとに、処理を実行するかどうかを決めます。
この条件に当てはまるなら実行するという判断をコードで表現できるのがif文です。

構文

if(条件){
    処理;
}

ifの後ろに書いた条件が合っている場合のみ、ブロック{}で囲まれた中の処理が実行されます。
条件に合わない場合は、ブロックの中の処理は一切実行されず、そのまま次の処理へ進みます。

コード例

//if1.js
let num = 10;

if(num > 5){
    alert('5より大きい数値です');
}

動作例

変数numに10を代入しています。
if文では、numが5より大きいかどうかを判定しています。
numは10なので条件に合い、ブロック内のalertが実行されます。
もしnumが5以下であれば、alertは表示されず、何も起こりません。

コード例

//if2.js
let num = 2;

if(num > 5){
    alert('5より大きい数値です');
}
       
alert(num + 'は5より小さい数値です');

動作例

変数numに2を代入しています。
if文では、numが5より大きいかどうかを判定しています。
numは2なので条件に合わず、if文内のalertは実行されません。
そのため、if文の外に書かれたalertだけが実行されます。
しかし、このようにalertをif文の外に書いていると、
条件を満たした場合でも満たさなかった場合でも同じ処理が実行されてしまいます。
その結果、条件判定と表示内容のつじつまが合わなくなることがあります。
このような場合に使うのがelseです。

2つの条件で処理を分ける

if～else文は、条件に合っている場合と、合っていない場合で処理を分けるための構文です。
if文が「条件に合ったときだけ処理を行う」のに対し、if～else文では「そうでない場合の処理」も同時に定義できます。
条件によって必ずどちらかの処理が実行される点が特徴です。

構文

if(条件){
    条件にあったときの処理;
}else{
    条件に合わなかったときの処理;
}

ifの後ろに書いた条件が合っている場合は、ifのブロック内の処理が実行されます。
条件に合わなかった場合は、elseのブロック内の処理が実行されます。
if～else文では、どちらか一方のブロックだけが実行されます。

コード例

//ifElse.js
let score = 80;
       
if(score >= 75){
    alert('合格です');
}else{
    alert('不合格です');
}

動作例

この例では、scoreという変数に80を代入しています。
if文の条件では、scoreが75以上かどうかを確認しています。
条件に合っている場合は「合格です」と表示されます。
条件に合っていない場合は、else側の「不合格です」が表示されます。
このようにif～else文を使うことで、条件の結果に応じて処理を明確に分けることができます。
どちらかの処理が必ず実行されるため、「何もしない状態」を作りたい場合にはif文のみを使うほうが適切です。
また、elseは必ずifとセットで使い、単体では使用できません。

複数の条件で処理を分ける

if～else if～else文は、条件が複数ある場合に処理を分けるための構文です。
if～else文では条件は1つだけでしたが、else ifを使うことで、複数の条件を順番に判定できます。
条件に合った最初の処理だけが実行され、それ以降の条件は判定されません。

構文

if(条件1){
    条件1にあったときの処理;
}else if(条件2){
    条件2にあったときの処理;
}else{
    どの条件にもあわなかったときの処理;
}

最初にifの条件が確認されます。
条件1に合っていれば、その時点で処理が実行され、以降の判定は行われません。
条件1に合わなかった場合のみ、else ifの条件が確認されます。
これを上から順番に繰り返し、最初に条件に合ったブロックが実行されます。
すべての条件に合わなかった場合は、最後のelseの処理が実行されます。

コード例

//ifElseIfElse.js
let score = 75;

if(score >= 80){
    alert('よく頑張りました');
}else if(score >= 60){
    alert('頑張りました');
}else{
    alert('もう少し頑張りましょう');
}

動作例

この例では、scoreに75を代入しています。
最初にscoreが80以上かどうかを確認しますが、条件には合いません。
次にscoreが60以上かどうかを確認し、この条件には合っているため「頑張りました」が表示されます。
この時点で処理が確定するため、elseの判定は行われません。
if～else if～else文では、条件の順番が重要です。
上に書いた条件から順に判定されるため、広い条件を先に書くと、後の条件が実行されなくなります。
なお、elseは必須ではなく、すべての条件に合わなかった場合に何もしない構成にすることも可能です。
また、else ifを使える数は決まっていないため、いくつでも追加可能です。

比較演算子を使った条件分岐

if文では、前ページで学んだ比較演算子を使う場面が多くあります。
if文の復習込みでいくつかコードと動作例を見ていきましょう。

コード例

//ifRelational1.js
let num = '10'; 

if (num === 10) {
  alert("条件を満たしました");
} else {
  alert("条件を満たしていません");
}

動作例

この例では、変数numに「10」という文字列を代入しています。
if文では、比較演算子 === を使って10と比較しています。
=== は、値だけでなくデータの種類も含めて比較するため、文字列の「10」と数値の10は一致しません。
そのため条件は満たされず、else側の処理が実行されます。

コード例

//ifRelational2.js
const tax = '食品';

if (tax == '食品') {
    alert('消費税は8％です');
} else {
    alert('消費税は10％です');
}

動作例

この例では、変数taxに「食品」という文字列を代入しています。
if文では、比較演算子を使って、taxの値が「食品」と等しいかを判定しています。
条件に合っている場合は「消費税は8％です」と表示され、合っていない場合はelse側の「消費税は10％です」が表示されます。
このように比較演算子や条件分岐は、数値だけでなく文字列の比較にも使用できます。
また、数値の比較では===、文字列の比較では==を使うといいでしょう。
実務では、型の違いによる思わぬ挙動を防ぐため、基本的には===を使うことが推奨されます。

条件を重ねた分岐の考え方

if文は、1つの条件だけでなく、条件を段階的に組み合わせて判断することもできます。
条件を段階的に確認したり、ある条件を満たした場合にだけ、さらに別の条件を確認するといった「条件を重ねた分岐」も行えます。
これは複数の条件を一度に判断するというよりも、条件を順番に確認しながら処理を絞り込んでいく考え方です。
わかりやすくいうとAとBの条件を満たす場合、どのように書くかということです。
条件を重ねた分岐は、if文の中にさらにif文を書くことで表現できます。

コード例

//ifDuplication.js
let english = 85;
let math = 78;

if (english >= 80) {
    if (math >= 90) {
        alert('合格');
    } else {
        alert('不合格');
    }
} else {
    alert('不合格');
}

動作例

このコードでは、2つの条件を順番に確認して結果を判断しています。
まず、english >= 80で基準を満たしているかを判定します。
この条件に合った場合のみ、次にmath >= 90という別の条件を確認します。
どちらの条件も満たしたときだけ合格が表示され、どこか1つでも条件に合わなければ不合格になります。
このようにif文を重ねることで、複数の条件を段階的に組み合わせた分岐を表現できます。
間違いではないのですが、複数条件を重ねることで冗長になり、管理が難しく拡張性がないという点は否定できません。
そこで複数条件を重ねるときに便利なのが、次ページで紹介する論理演算子です。