条件によって処理を切り替える
プログラムは、常に同じ処理を実行するだけでは実用的とは言えません。
状況や入力内容によって、実行する処理を変えたい場面は多くあります。
たとえば数値が一定以上なら表示する、条件に合わなければ別の処理を行うといったように、条件によって処理の流れを分ける仕組みが必要になります。
条件に合う場合だけ処理を行う
if文は、指定した条件がtrueの場合に処理を実行するための構文です。
比較演算子で判定した結果をもとに、処理を実行するかどうかを決めます。
この条件に当てはまるなら実行するという判断をコードで表現できるのがif文です。
構文
if(条件){
処理;
}
ifの後ろに書いた条件がtrueの場合のみ、ブロック{}で囲まれた中の処理が実行されます。
falseの場合は、ブロックの中の処理は一切実行されず、そのまま次の処理へ進みます。
コード例
//if1.js
let num = 10;
if(num > 5){
alert('5より大きい数値です');
}動作例
※このボタンは動作確認用です
変数numに10を代入しています。
if文では、numが5より大きいかどうかを判定しています。
numは10なのでtrueとなり、ブロック内のalertが実行されます。
もしnumが5以下であれば、alertは表示されず、何も起こりません。
コード例
//if2.js
let num = 2;
if(num > 5){
alert('5より大きい数値です');
}
alert(num + 'は5より小さい数値です');動作例
※このボタンは動作確認用です
変数numに2を代入しています。
if文では、numが5より大きいかどうかを判定しています。
numは2なのでfalseとなり、if文内のalertは実行されません。
そのため、if文の外に書かれたalertだけが実行されます。
しかし、このようにalertをif文の外に書いていると、
trueでもfalseでも同じ処理が実行されてしまいます。
その結果、条件判定と表示内容のつじつまが合わなくなることがあります。
このような場合に使うのがelseです。
2つの条件で処理を分ける
if～else文は、trueの場合と、falseの場合で処理を分けるための構文です。
if文がtrueのときだけ処理を行うのに対し、if～else文ではfalseの場合の処理も同時に定義できます。
条件によって必ずどちらかの処理が実行される点が特徴です。
構文
if(条件){
trueのときの処理;
}else{
falseのときの処理;
}
ifの後ろに書いた条件がtrueの場合は、ifのブロック内の処理が実行されます。
falseの場合は、elseのブロック内の処理が実行されます。
if～else文では、どちらか一方のブロックだけが実行されます。
コード例
//ifElse.js
let score = 80;
if(score >= 75){
alert('合格です');
}else{
alert('不合格です');
}動作例
※このボタンは動作確認用です
この例では、scoreという変数に80を代入しています。
if文の条件では、scoreが75以上かどうかを確認しています。
条件がtrueの場合は合格ですと表示されます。
条件がfalseの場合は、else側の不合格ですと表示されます。
このようにif～else文を使うことで、条件の結果に応じて処理を明確に分けることができます。
どちらかの処理が必ず実行されるため、何もしない状態を作りたい場合にはif文のみを使うほうが適切です。
また、elseは必ずifとセットで使い、単体では使用できません。
複数の条件で処理を分ける
if～else if～else文は、条件が複数ある場合に処理を分けるための構文です。
if～else文では条件は1つだけでしたが、else ifを使うことで、複数の条件を順番に判定できます。
trueとなった最初の処理だけが実行され、それ以降の条件は判定されません。
構文
if(条件1){
条件1がtrueのときの処理;
}else if(条件2){
条件2がtrueのときの処理;
}else{
いずれもfalseだったときの処理;
}
最初にifの条件が確認されます。
条件1がtrueならば、その時点で処理が実行され、以降の判定は行われません。
条件1がfalseならば、else ifの条件が確認されます。
これを上から順番に繰り返し、最初に条件がtrueになったブロックが実行されます。
すべての条件がfalseの場合は、最後のelseの処理が実行されます。
コード例
//ifElseIfElse.js
let score = 75;
if(score >= 80){
alert('よく頑張りました');
}else if(score >= 60){
alert('頑張りました');
}else{
alert('もう少し頑張りましょう');
}動作例
※このボタンは動作確認用です
この例では、scoreに75を代入しています。
最初にscoreが80以上かどうかを確認しますが、falseとなり次の処理に移ります。
続く処理でscoreが60以上かどうかを確認し、trueとなるため、頑張りましたと表示されます。
この時点で処理が確定するため、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は一致しません。
そのためfalseと判定され、else側の処理が実行されます。
コード例
//ifRelational2.js
const tax = '食品';
if (tax == '食品') {
alert('消費税は8％です');
} else {
alert('消費税は10％です');
}動作例
※このボタンは動作確認用です
この例では、変数taxに食品という文字列を代入しています。
if文では、比較演算子を使って、taxの値が食品と等しいかを判定しています。
trueの場合は消費税は8％ですと表示され、falseの場合はelse側の消費税は10％ですと表示されます。
このように比較演算子や条件分岐は、数値だけでなく文字列の比較にも使用できます。
実務では、型の違いによる思わぬ挙動を防ぐため、基本的には===を使うことが推奨されます。
また、JavaScriptでは0や空文字、null、undefinedなどもfalseとして扱われるため、条件式は===を使って明示的に書くことを心がけましょう。
真偽値をトリガーとして扱う
真偽値はtrueまたはfalseのどちらか1つの値しか持ちません。
そのため、プログラムでは処理を実行するかどうかを決めるトリガーとして扱われることが多くあります。
では、実際にどのように使用され、どのような結果になるのかを見ていきましょう。
コード例
//ifBoolean.js
let trigger = true;
let num = 4;
if (trigger) {
num++;
trigger = false;
} else {
trigger = true;
}
alert(num);
alert(trigger);動作例
※このボタンは動作確認用です
この例では、真偽値をトリガーとして扱い、条件によって値を切り替えています。
if文の条件がtrueの場合、numを増やしたあとでtriggerをfalseに変更しています。
ただし、このコードではif文は1度しか実行されないため、triggerをfalseに変更しても、このコードではその結果を再度判定する処理がないため、この場では影響しません。
真偽値はこのように次の処理を動かすかどうかを決めるための状態として使われます。
初期変数をfalseにすると、numの数値は変わりませんが、triggerはtrueに切り替わります。
このような使い方は、繰り返し処理と組み合わせる場面でよく登場します。
真偽値は、処理の結果として切り替えられ、次の判断に使われる状態として保持されるため、トリガーとして頻繁に利用されます。
条件を重ねた分岐の考え方
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で基準を満たしているかを判定します。
この条件がtrueの場合のみ、次にmath >= 90という別の条件を確認します。
どちらの条件もtrueときだけ合格が表示され、どこか1つでもfalseならば不合格になります。
このようにif文を重ねることで、複数の条件を段階的に組み合わせた分岐を表現できます。
間違いではないのですが、複数条件を重ねることで冗長になり、管理が難しく拡張性がないという点は否定できません。
そこで複数条件を重ねるときに便利なのが、次ページで紹介する論理演算子です。
値によって処理を分岐させる
if文では、条件式がtrueかfalseかによって処理を分けてきました。
一方で、同じ値をもとにして処理を切り替えたい場面も多くあります。
たとえば、入力された値がどれに当てはまるかによって、実行する処理を変えたい場合です。
そのようなときに使われるのが、switch文です。
switch文は、1つの値を基準にして、あらかじめ用意した分岐の中から処理を選択します。
構文
switch(式){
case 値1:
処理;
break;
case 値2:
処理;
break;
default:
処理;
}
switch文は、値によって処理を変えるために使います。
caseは、値が該当条件を満たしているかを判断し、条件に一致すればその処理を実行します。
上から順に評価され、条件に当てはまるcaseが見つかるまで次のcaseを確認します。
caseの処理の最後にbreakを書いた場合、処理終了後にswitch文を抜けます。
breakがない場合は、その下のcaseの処理も続けて実行されます（フォールスルー）。
どの条件にも当てはまらなかった場合は、default内の処理が実行されます。
defaultは必須ではなく、条件に当てはまらなかった場合の処理が不要であれば省略できます。
また、最後のcaseにはbreakは必要ありませんが、フォールスルーや可読性の面で安全です。
コード例
//ifSwitch1.js
let dice = 4;
switch(dice){
case 1:
alert('サイコロの目は1です');
break;
case 2:
alert('サイコロの目は2です');
break;
case 3:
alert('サイコロの目は3です');
break;
case 4:
alert('サイコロの目は4です');
break;
case 5:
alert('サイコロの目は5です');
break;
case 6:
alert('サイコロの目は6です');
break;
}動作例
※このボタンは動作確認用です
サイコロをイメージしてください。
diceに4が代入されています。
switch文でdiceの値を評価するように設定します。
caseでそれぞれ1～6のどの値かによって処理が変わるようにしています。
diceは4なので、case 4であるサイコロの目は4ですとalertで表示されます。
なお、サイコロは1～6までと決まっているため、defaultを省略しました。
このようにcaseは基本的に値が等しいかどうかを判定するために使います。
これにより、任意の数だけcaseを用意できます。
ただし、いくつ以上いくつ未満のような範囲条件や複雑な条件判断をしたい場合は、switch文は向きません。
処理を抜ける
プログラムでは、すべての処理を最後まで実行したいとは限りません。
条件を満たした時点で、それ以上の処理を行わずに途中で終了したい場面もあります。
そのような場合に使われるのが、breakです。
breakは、現在実行している処理の流れをそこで止めるための命令です。
switchでbreakが出てきましたが、breakを書かないとフォールスルーが起こり、次のcaseの処理まで続けて実行されてしまいます。
そのため、条件に合った処理だけを実行してswitch文を抜けるためにbreakが必要になります。
なお、breakはswitch専用の機能ではありません。
繰り返しや関数でも使用でき、実行中の処理を途中で終了するために使われます。