プログラミングをするうえで、条件分岐は必須の知識。
JavaScriptにおいても条件分岐としてif文とswitch文が使われていますが、以下のように感じたことはありませんか?

「if文とswitch文の違いがわからない。」
「switch文の使いどころがわからない。」

一般的によく目にするのがif文ですが、場合によってはswitch文を使う方が可読性が上がることがあります。

今回はswitch文の基本や、if文との区別をわかりやすく解説していきます。この記事を通してswitch文を深く理解していきましょう。if文の基本を理解したいという方は、以下の記事を参考にしてください。

switch文とは

switch文とは、プログラミングで使われる制御文の一つです。JavaScriptには「if文」と「switch文」が条件分岐として使われていて、どちらも条件によって処理を分岐させることができます。

条件を真(true)と偽(false)に分けて、それぞれ処理を与えるのがif文ですが、複数条件がある場合には、switch文を使うことでコードがシンプルで読みやすくなるメリットがあります。それではswitch文の書きかたをみていきましょう。

switch文の基本形

まずはswitch文の基本構文を抑えましょう。

switch文

 switch (式(変数)) {
  case 値1:
    実行する処理; //式が値1に当てはまる場合に実行される
    break;
  case 値2:
    実行する処理; //式が値2に当てはまる場合に実行される
    break;
  case 値3:
    実行する処理; //式が値3に当てはまる場合に実行される
    break;
} 

switchの直後にある () の中に式を記述します。
そしてswitchの下にcase(条件)とそれぞれ実行する処理を記述します。
例えば、「値1に該当する場合は1の処理を実行、値 2に該当する場合は2の処理を実行…」のように、細かく条件を設定することができます。

各caseのブロックの最後にbreakが記述されていることがわかります。
breakを記述することで、条件に当てはまる処理の実行を終えると、switch文を終了することができます。
反対に、breakの記述をしなければ、合致する処理以降のすべての処理が行われるため注意しましょう。

サンプルコード

 let fruit = 'orange';

switch (fruit) {
  case 'orange':
    console.log('オレンジです');
    break;
  case 'banana':
    console.log('バナナです');
    break;
  case 'melon':
    console.log('メロンです');
    break;
} 

実行結果
javascript switch

switchの式には、”fruit”という変数が入っています。
式に基づき一致する値を探し、該当するcaseに記述されている処理が実行される流れです。
この場合、”orange”という値に一致するため、実行結果は「オレンジです」となります。

breakの記述をしない場合

各caseの最後にbreakの記述をしなければ、合致する処理以降のすべての処理が行われると説明しましたが、その場合の実行結果をみていきましょう。

サンプルコード

 let animal = 'elephant';

switch (animal) {
  case 'panda':
    console.log('パンダです');
  case 'elephant':
    console.log('ゾウです');
  case 'rabbit':
    console.log('ウサギです');
} 

実行結果
javascript switch

switchの式には、”animal”という変数が入っているため、値2の “elephant” と一致します。しかし、breakを記述していないことにより、 その先の処理も実行されることになります。

breakの記述の有無や場所を変更することにより、より複雑な条件分岐を行うことができますが、まずはbreakの記述をすることで処理が終了されることを覚えましょう。

default

defaultは、if文のelseのような役割があり、すべての条件に当てはまらない場合に最終的に実行される処理です。
defaultの記述は必須ではありませんが、該当しない場合の処理を設定したい場合に、defaultの記述をするといいでしょう。

サンプルコード

 let country = 'Japan';

switch (country) {
  case 'Canada':
    console.log('カナダです');
    break;
  case 'Russia':
    console.log('ロシアです');
    break;
  case 'Germany':
    console.log('ドイツです');
    break;
  default:
    console.log('どれも日本ではありません');
} 

実行結果
javascript switch

‘Japan’ という変数に一致する値がないため、全ての条件を通り抜け、defaultに記述されている処理が実行されます。

このようにdefaultを記述することは必須ではありませんが、一致する条件がなくdefaultの記述もない場合は、なにも実行されないため注意してください。

switch文とif文の使いわけ

上記のswitch文の例をif文を使って記述するとどうなるかみていきましょう。

サンプルコード

 let country = 'Japan';

if (country === 'Canada') {
  console.log('カナダです');
} else if (country === 'Russia') {
  console.log('ロシアです');
} else if (country === 'Germany') {
  console.log('ドイツです');
} else {
  console.log('どれも日本ではありません');
} 

実行結果
javascript switch

switch文は一つの式をもとに条件分岐させているのに対し、if文は複数の式をもとに条件分岐させています。

実行結果はswitch文もif文も同じですが、switch文の方が可読性が高いと感じるのではないでしょうか。このように複数の条件がある場合には、switch文を使用することで簡潔に、パッとみてわかりやすいコードを書くことができます。

条件が2つ3つですむ場合にはif文を、さらに複数の条件がある場合はswitch文を採用することが、使いわけのポイントです。

まとめ

条件分岐には、if文とswitch文を使う記述方法がありますが、JavaScriptでプログラミングを行う際に、switch文を使いこなせるようになると非常に便利です。

多くの条件を設定するときにはswitch文を取り入れることで、メンテナンス性や可読性を上げることができます。また、if文と組み合わせてより細かい条件分岐を行うことができるようになります。

if文で書いた条件分岐をswitch文に書きかえてみることで、switch文の理解をより深めることができるので、ぜひ練習してみてください。
switch文の基本をおさえてから、条件分岐のテクニックを磨いていきましょう。