JavaScriptでは、何らかの値を比較し、結果によって処理を振り分けることが多くなっていきます。条件分岐にはif文とswitch文の2つの構文があり、理解することでできることが大幅に増えますので、一緒に学んでいきましょう。
- if文、else文、else if文を使った条件分岐
- switch文を使った条件分岐
条件分岐の基本：if文
if文とは「if」の文字が表すように、「もし〜だったら、〜を実行する」といった条件分岐を行う構文となります。
多くのサイトに導入されているスクロールと連動するフェードインもif文を利用して、「要素が画面内に入ったら、表示する」といった処理を行なっています。
if文はJavaScriptのほかにも、様々なプログラミング言語に用意されています。構文が異なることもありますが考え方は同じですので、こちらのセクションで基本をしっかりと学んでいきましょう。
雛形解説
雛形について解説します。
if文の他に、else文やelse if文も存在しますので、順に見ていきましょう。
if文
if (条件){
//条件がtrueだった場合に実行する処理
}上記が、if文の構文です。
if文は、真偽値(true or false)を元に処理の振り分けを行いますので、「真偽値が返される条件式」を指定します。「JavaScriptの基礎文法を学ぼう」の記事内で解説した、比較演算子や論理演算子を組み合わせ、条件を指定することが多いです。
条件式の結果がtrueだった場合のみ、{}内の処理が実行されます。
else文
if (条件){
//条件がtrueだった場合に実行する処理
} else {
//条件がfalseだった場合に実行する処理
}else文は上の例のように、if文と同時に使用します。else文内の処理は、ifの条件式が成り立たなかった際に実行されます。
else文の特徴は次のとおりです。
- 単体では利用できない
- 同一if文内に一つのみ
- 最後に記述する
- 省略可
else if文
if (条件A){
//条件Aがtrueだった場合に実行する処理
} else if(条件B) {
//条件Aがfalseで、条件Bがtrueだった場合に実行する処理
} else {
//条件A、条件Bともにfalseだった場合に実行する処理
}else if文は、elseの役割とifの役割を併せ持つ構文です。if文と同時に使用します。
else if文を利用することで複数の条件を指定することが可能になります。
else if文の特徴は次のとおりです。
- 単体では利用できない
- 同一if文内に複数記述可
- if文より後に記述する
- 省略可
実装
年齢によって料金を振り分け、コンソールに表示するプログラムを組んでみましょう。
| 年齢 | 料金 |
|---|---|
| ~ 18歳 | 子供料金 |
| 19 ~ 60歳 | 一般料金 |
| 61歳 ~ | シニア料金 |
const old = 20;
if (old > 60){
console.log('シニア料金です');
} else if(old > 18) {
console.log('一般料金です');
} else {
console.log('子供料金です');
}変数oldには、年齢が入ります。
if 文の処理
if文の処理は、「年齢が60歳より上」だった場合に実行されます。
設定した年齢は20歳ですので結果はfalseとなり、こちらの処理は実行されません。
else if文の処理
else if文の処理は、「年齢が19~60歳」だった場合に実行されます。
したがって、こちらの処理が実行され、コンソールには「一般料金です」と表示されます。
else文の処理
else文の処理は、「年齢が19歳より下」だった場合に実行されます。
else if文の処理が実行されたため、こちらの処理は実行されません。
３つの構文を組み合わせることで、複雑な条件分岐の処理を実現することができるようになります。
switch文
こちらのセクションでは、switch文を利用して条件分岐を行う方法を学んでいきます。
switch文も、条件分岐の際に使用できる構文です。if文と比較して、一つの値を複数の値と比較して条件分岐を行う際に適しています。
switch文で実行できる処理はif文でも実行できるため利用機会はあまり多くありませんが、if文よりもスッキリ記述できるといったメリットもあります。こちらのセクションで基本をしっかりと学んでいきましょう。
雛形解説
雛形について解説します。
swich(式){
case 比較対象1:
//式が比較対象1と一致した場合に実行する処理
break;
case 比較対象2:
//式が比較対象2と一致した場合に実行する処理
break;
case 比較対象3:
case 比較対象4:
//式が比較対象3または比較対象4と一致した場合に実行する処理
break;
default:
//どのcaseにも一致しなかった場合に実行する処理
break;
}式
switch(式){}の式には、比較基準となる値を指定します。
case
caseには、式と比較する値を指定します。式とcaseの値が一致した際にcase ~ breakまでの処理が実行されます。
注意点として、switch文の比較は厳密に行われることを理解しておきましょう。switch文では、1と'1'は別物として扱われます。
また、caseは比較対象3,4のように続けて記述することも可能です。上記の場合、比較対象3または比較対象4と一致した場合に処理が実行されます。
break
switch文は「一致したcase ~ 次に現れるbreakまで」の処理が実行される仕組みとなっています。
breakを書き忘れると以降のcaseまで実行されてしまいますので注意してください。また、break文はreturnに置き換えることも可能です。
一般的ではありませんが、breakは省略可能で、省略した記法をフォールスルーといいます。フォールスルーは理解しづらく、バグを招くきっかけにもなりますので、if文に置き換えるなどして利用を控えることをおすすめします。
default
defaultは、省略可能です。
defaultに指定した処理は、どのcaseにも一致しなかった場合に実行されます。
実装
以下の条件に従って、コンソールに挨拶を表示する処理をswitch文を使って実装してみましょう。
- 定数languageがjpだった場合、「こんにちは」と表示する。
- 定数languageがenだった場合、「Hello」と表示する。
- 定数languageがjpでもenでもなかった場合、「そのような言語はありません」と表示する。
const language = 'en';
swich(language){
case 'jp':
console.log('こんにちは');
break;
case 'en':
console.log('Hello');
break;
default:
console.log('そのような言語は存在しません');
break;
}定数languageにはenが格納されていますので、コンソールには「Hello」が表示されます。
switch文と関数を一緒に使用する
switch文を関数と一緒に使用するパターンをご紹介します。
function language(lang) {
switch (lang) {
case 'jp':
return 'こんにちは';
case 'en':
return 'Hello';
default:
return 'そのような言語は存在しません';
}
}
console.log(language('jp'));関数の中の処理として、switch文を使ってbreakの代わりにreturnを使用しています。returnを使用することで、関数の返り値として返却されるようになり処理も終了します。
switch文で紹介しましたが、if文でも同様にできますので、このやり方もできるようにしておきましょう。
まとめ：処理の実行順に注意しよう
今回の記事では、条件分岐について解説しました。内容を簡単にまとめます。
if文とswitch文まとめ
- if文：条件が正しいとき、特定の操作を行う。
- else文：if文の条件が正しくないとき、別の操作を行う。
- else if文：複数の条件を順番にチェックし、正しい条件の操作を行う。
- switch文：与えられた値によって、いくつかの選択肢から一つの操作を選ぶ。
条件式に指定した条件は、指定順や実行順によって結果が変わってしまいますので注意しましょう。指定順や実行順に関しては、実装しながら把握していくのがおすすめです。
