こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptの分岐について説明します。プログラムにおいて、ある条件によって異なる処理が必要な場面は出てきます。しかし、言語によってIf文でいいのか、または違う書き方があるかなどと迷ってしまうことがありますよね。
JavaScriptの分岐について、基本構文や実際のコード例を用いて説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
そもそも分岐って？
プログラムにおける分岐とは、主に「条件分岐」のことを表します。条件分岐は、ある条件を満たしている時だけ、変更や処理の実行を加えたいときに用います。例えば、変数aに格納されている値があったとして、”aが5より大きいときと小さいとき”で処理を変えたり、配列bについて”bに値が格納されているときとされてないとき”で処理を変えたりすることができます。
条件分岐を正しく使うことで、プログラムの実行内容に違いを加えることができるだけでなく、エラーなどを防ぐこともできるため、使用頻度の高い処理です！
JavaScriptの条件分岐
では、JavaScriptで条件分岐はどのように記述すればいいのでしょうか。
JavaScriptでも、C言語などと同様に「if文」や「switch文」を用います！ここでは、if文とswitch文について、基本的な構文の説明から、実際のプログラムを用いた解説を行います。
if文
if文は、条件式によって変数や配列を比較し、条件を満たしているかどうかで処理内容を分岐したいときに用いられます。基本構文を見てみましょう。
基本構文
|
1 2 3 |
if (条件){ // 処理① } |
if文は、ifの直後の括弧（）内に条件を設定します。その条件を満たしている場合、中括弧｛｝内の処理①が実行されます。条件を満たしていない場合は、中括弧内の処理は無視されて、以降に書かれているプログラムへと移ります。
また、複数条件を設けて、それぞれ違う処理を実施したい場合は次のように記述します。
|
1 2 3 4 5 6 7 |
if (条件①){ // 処理①：条件①を満たしていたら実行 } else if(条件②){ // 処理②：条件①は満たしていなく、条件②を満たしていたら実行 } else { // 処理③：条件①,②を満たしていなかったら実行 } |
複数条件を設けたい場合は、“else if”を用います。上のように使い、条件①を満たしていないが、条件②を満たしているときの処理を指定することができます。さらに、“else”を用いることで、条件①と②を満たしていないときの処理内容を指定できます。もっと、条件を増やして処理内容を変えたい場合は、”else if”を増やせばプログラムが書けます！
注意点として、プログラム言語によっては、”elseif”とelseとifの間にブランクを入れないこともありますが、JavaScriptでは入れるので注意してください！
- ifの直後の括弧（）に条件を書く
- else ifを使うと複数の条件が書ける
- “elseif”じゃなくて”else if”
実践プログラム例
実践の用途を想定したプログラム例を見てみましょう。ここでは、月によって商品の値段が変わるプログラムを書いてみます。
|
1 2 3 4 5 6 7 8 9 10 11 |
// 変数をそれぞれ定義 var price = 500; // 商品の定価priceを定義 var month = 6; // 購入月を定義 if (month < 4) { // 1～3月に購入した場合 price = price * 0.7; // 定価30%OFF } else if (month < 8) { // 4～7月に購入した場合 price = price * 0.8; // 定価20%OFF } else { // それ以外(8～12月に購入) price = price * 0.9; // 定価10%OFF } |
2行目で商品の定価を表す変数price、3行目で購入月を表すmonthを定義してます。今回、monthに格納される値を6としたため、5行目に書かれているif文の最初の条件の（month < 4）は満たしません。そのため、次のelse if文に移ります。
次の条件の（month < 8）は、最初の条件を満たしていないことを前提としているため、（4 ≦ month < 8）という条件式になります。この条件は今回満たしているので、変数priceに0.8が乗算されて、priceは定価から20%OFFとなる400と上書きされます。
条件は、論理演算子などと組み合わせるで、より高度な条件分岐を作成することができます！
switch文
switch文は、変数の値によって処理内容を変えたいときに用います。switch文で記述する内容は、if文でも書けますが、条件によっては使用する演算子などが減り、プログラムの見た目をシンプルにできます。
基本構文
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
switch (変数や式) { case 値①: // 処理① break; case 値②: // 処理② break; case 値③: // 処理③ break; default: // 処理④ } |
switch文では、switchの他にcaseやbreak、defaultを使います。switchの次にある括弧（）内に、変数や式を代入し、その値によって処理内容が決まります。変数の値がcaseのあとにある値①と一致したら処理①が実行されます。その次にあるbreakによって、switch文から抜け出します。caseはいくつでも書けます。
breakがなかった場合や、値①～③どれとも一致しなかった場合、default:以下の処理④が実行されます。defaultは記述しなくても構いません。しかし、defaultもbreakもない場合はエラーとなるので注意してください。
- switchの直後の括弧（）に変数や式を書く
- 分岐を増やしたい場合はcaseを用いる
- switch文を抜け出すためにはdefaultかbreak記述が必要
実践プログラム例
実践の用途を想定したプログラム例を見てみましょう。ここでは、オーダーによって商品の値段を表示するプログラムを書いてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 変数を定義 let item = "Egg"; // 商品名を表す変数itemに"Egg"を格納 switch (item){ case "Meat": var price = "300"; break; case "Fish": var price = "200"; break; case "Milk": var price = "150"; break; case "Egg": var price = "120"; break; default: var price = "500"; } console.log(price); |
2行目で定義している変数itemに、文字列の”Egg”を格納しました。4行目から定義されているswitch文の変数にはitemを代入しているので、”Egg”という文字列と一致するかどうかで、処理内容が変わってきます。今回は、14行目にあるcaseと条件が一致するので、変数priceには”120″が定義され、21行目で表示されます。
このように、if文とswitch文の特徴をそれぞれしっかり理解することで、プログラム内容に沿った分岐文を書くことができます！
まとめ
いかがでしたでしょうか？今回は、JavaScriptの条件分岐で用いられるif文とswitch文について説明しました。
条件分岐は、使い方を間違えると、データによっては希望していない処理を実施することになり、後々の結果に大きく響いてしまうことがあります。ぜひ、JavaScriptの分岐方法ついて正しく理解し、Webサービス作成やシステム構築に活かしてください。
