プログラミングの作成において必ず必要となるのが「条件分岐」です。条件分岐とは「もし〇〇であればこの処理」「そうでなければこの処理」というように条件によって処理を分けることです。プログラムは多くの条件分岐によって複数の条件を処理し、さまざまな機能を実行しています。JavaScriptでは条件分岐を「if」文または「switch」文で行ないます。一般的に良く目にするのがif文ですが、場合によってはswitch文を使う方が可読性が上がることがあります。この記事では、switch文の書き方や、どういった場合にif文と使い分けるのかについて解説します。
JavaScriptのIF文については、下記の記事で詳しく解説しています！
switch文とは
switch文はif文と同様に条件や値によって処理を分岐させ、一致する場合の処理と、一致しない場合の異なる処理を記述するための方法です。
例えば
- もし変数の中身がAであれば、処理1を実行する
- もし変数の中身がBであれば、処理2を実行する
というように、複数の処理をどのように実行するかを判定することができるようになります。
switch文もif文もどちらも条件によって処理を分岐させる構文ですが、switch文は、複数の値の中のいずれかと一致するか調べ、一致する場合は処理を分岐させて、異なる処理を実行する構文です。そのため特定の物事に対して複数の選択肢がある場合は、条件の定義が煩雑になりやすいif文よりも、switch文を使うほうが簡単に、そして見やすいコードを記述することが可能です。
switch文の基本的な書き方
前述した通りswitch文を使用することにより「もし〇〇であればこの処理」「そうでなければこの処理」ということが簡単に実現できます。それではswitch文の具体的な書き方について解説します。
基本的な構文は次のようになります。
switch (式){
case 値A：
式が値A の場合に実行する処理;
break;
case 値B:
式が値B の場合に実行する処理;
break;
case 値C:
式が値C の場合に実行する処理;
break;
default:
式の値がいずれのcaseとも一致しない場合に実行する処理;
}
switchの直後に記述する（）内の式を参照し、値がcaseと一致する場合、条件が分岐されて特定の処理が行われます。実行する処理の後にbreak文を記述します。式には値や変数を直接記述するほかに、計算式を記述できます。
また、値がいずれのcaseとも一致しなかった場合、defaultに記述した処理を実行します。defaultは処理が必要ない場合は省略することができます。この構文を使用して実際にコードを記述してみると次のようになります。
const data = 1;
switch (data) {
case 1:
console.log(‘1です’);
break;
default:
console.log(‘1ではありません’);
}
//実行結果は「1です」となります
このサンプルでは変数dataが「1」であるため、値がcaseと一致して「1です」と表示されます。もし変数dataが「1」ではない場合は「1ではありません」と表示します。
switch文の応用的な書き方
switch文は、幅広い記述方法があります。複数のcaseで同じ処理を実行させる書き方から、比較演算子を使用した書き方、複雑な分岐を作る際の入れ子（ネスト）させる書き方まで、さまざまなケースに柔軟に対応できます。それではそれらの記述方法について解説していきます。
複数のcaseで同じ処理を実行する書き方について
switch文で、複数の異なる値に対して同じ処理を実行することができます。
実際のコードの記述は次のようになります。
const number = 6;
switch (number){
case 1:
case 3:
case 5:
case 7:
case 9:
console.log(‘奇数です’);
break;
case 2:
case 4:
case 6:
case 8:
console.log(‘偶数です’);
break;
default:
console.log(‘奇数でも偶数でもありません’);
break;
}
//実行結果は「偶数です」となります
このサンプルでは変数numberが「6」のため「偶数です」と表示されます。switch文では値が一致するcaseが見つかった場合、break文またはswitch文の最後まで順に処理が実行されます。そのため変数numberが1、3、5、7、9のときは、「奇数です」と表示し、2、4、6、8のときは、「偶数です」と表示します。
このように、break文の有無や記述場所を調整することで、複数のcaseで同じ処理を実行できます。
比較演算子を使用した書き方について
以上や以下といった比較演算子を使用してswitch文を記述することができます。switch文の式にtrueを挿入し、switch(true)と記述することで、case部分に式を記述できます。caseに記述された式によって処理を分岐することが可能であるため、単純な変数の参照とは違って複雑な条件分岐が可能です。
実際のコードの記述は次のようになります。
const number = 11;
switch (true){
case number>=10:
console.log(’10以上です’);
break;
}
//実行結果は「10以上です」となります
このサンプルでは変数numberが「11」のため、number>=10が「true」となります。そのため条件が一致して「10以上です」と表示されます。
JavaScriptの比較演算子については、下記の記事で詳しく解説しています！
入れ子(ネスト)させる場合の書き方について
ネスト（入れ子）して記述することで、複数の要素を組み合わせて条件を分岐させることができます。また、ネストは、switch文に対してif文やwhile文などを設定でき、複雑な条件の組み合わせを作ることが可能です。
実際のコードの記述は次のようになります。
const weather = ‘曇り’;
const temperature = 28;
switch (weather){
case ’晴れ’:
console.log(’本日は晴れです’);
break;
case ’曇り’:
switch (true){
case precipitation >= 25:
console.log(’本日は曇りですが、気温は高いです’);
break;
case precipitation < 25:
console.log(’本日は曇りなので、気温は低いです’);
break;
}
break;
case ’雨’:
console.log(’本日は雨です’);
break;
}
//実行結果は「本日は曇りですが、気温は高いです」となります
このサンプルコードは変数weatherで1つめののcase条件を作成し、変数temperatureで2つめのcase条件を作成しています。天気が’曇り’で気温が28度なので、本日は曇りですが、気温は高いです」と表示されます。
if文との使い分けについて
if文とswitch文は可読性によって使い分けることがポイントです。if文は条件の数が増えるとコードが煩雑になりやすく、可読性やメンテナンス性が低下します。一方でswitch文は、条件分岐が複数のパターンになる場合にif文よりも簡潔に記述でき、可読性を維持しながら短いコードを書くことができます。実際にif文で記述したコードとswitch文で記述したコードを比較してみましょう。
if文で記述したコードは次のようになります。
const signal = ‘blue’;
if (signal == ‘red’) {
console.log(‘止まれ’);
}else if(signal == ‘yellow’){
console.log(‘一旦停止’);
}else {
console.log(‘進め’);
}
//実行結果は「進め」となります
このコードをswitch文で記述すると次のようになります。
const signal = ‘blue’;
switch (signal){
case ‘red’:
console.log(‘止まれ’);
break;
case ‘yellow’:
console.log(‘一旦停止’);
break;
default:
console.log(‘進め’);
break;
}
//実行結果は「進め」となります
このように特定の変数やデータ値に対して多くの比較値でチェックする場合は、if文よりswitch文の方が簡潔に書けます。
使い分けの目安として、条件分岐が3パターンであればif…elseif…elseで済むため、if文が良いでしょう。一方で条件分岐が4パターン以上になる場合や、複数の要素を組み合わせ、複雑な分岐を行なう場合はswitch文のほうが適しています。どちらかの構文に偏らずswitch文で書くと可読性が上がる場合はswitch文を使う方がよいでしょう。
まとめ
この記事では、switch文の書き方や、どういった場合にif文と使い分けるのかについて解説しました。switch文を使いこなすことで条件分岐の記述方法が広がります。switch文には多くの条件定義の方法があり、if文と組み合わせることでより細かな条件分岐と処理が行なえます。if文が条件分岐を基本として、switch文はプログラミングコードの可読性を上げるための１つのオプションとしてしっかりマスターしましょう。この記事を参考に、JavaScriptにおけるswitch文を習得していただければと思います。
JavaScriptを短期間かつ効率的に学びたい方は
「独学だと分からないことが多すぎる」「プログラミングをより現場に近い形で学びたい」「学んだ後にどう収益に繋げればいいの？」と考えている方も多いでしょう。
そんな方には、現役エンジニア講師在籍/案件獲得サポートもあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、体系立てて学ぶことで短期間かつ効率的にプログラミングを習得することが可能です。
「即戦力になれる！稼いでいけるようになれる！」プログラミングスクールを紹介した記事をこちらに記載しておきますので、是非ご覧ください。
コメント