![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
[JavaScript] 超入門：if文を使った条件分岐の書き方
markleaps.com
JavaScriptで、条件に応じて処理の分岐を行う「条件分岐」を使いこなせるようになると、ユーザーの入力に応じてページの動作を変えたり、処理を柔軟にコントロールできるようになります。
本記事では、switch文 を使った条件分岐の使い方を、初心者にもわかりやすく解説します。
条件分岐とは？
条件分岐とは、「もし～なら～する」というように、設定した条件に応じて、実行するプログラムの処理を変える仕組みです。
switch文 は、特定の値に応じて処理を分けたい場合に使われる、条件分岐の基本的な構文です。
switch文：値によって処理を分ける
switch文 は、あらかじめ決められた値（選択肢）に応じて処理を分岐させたいときに使います。
基本的な書き方は次の通りです。
|
1 2 3 4 5 6 7 8 9 10 |
switch (値) { case 値1: // 値が値1の場合に実行する処理 break; case 値2: // 値が値2の場合に実行する処理 break; default: // どの値にも当てはまらない場合に実行する処理 } |
case・break・default の役割
- case：比較する値を指定する
- break：処理を終了し、switch文 を抜ける
- default：どの case にも一致しなかった場合の処理
break を書かない場合、次の case の処理まで実行されてしまいます。
この挙動を「フォールスルー」と呼ぶため、基本的には break を書くようにしましょう。
switch文 の使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const fruit = "apple"; switch (fruit) { case "apple": console.log("りんごです"); break; case "banana": console.log("バナナです"); break; default: console.log("その他の果物です"); } |
fruit の値に応じて、表示される内容が切り替わります。
if文とswitch文、どう使い分ける？
条件分岐には if文 と switch文 の2種類がありますが、用途に応じて使い分けることでコードが読みやすくなります。
- 選択肢が固定で明確なとき：switch文 が向いている
- 数値の範囲や複雑な条件を扱うとき：if文 が向いている
if文が向いている例
|
1 2 3 |
if (score >= 90) { console.log("評価：A"); } |
switch文が向いている例
|
1 2 3 4 5 |
switch (color) { case "red": console.log("赤です"); break; } |
if文については、以下の記事で解説しています。
まとめ
- switch文 は、特定の値に応じて処理を分岐させたい場合に使う条件分岐の構文
- case で条件となる値を指定し、break で処理を終了する
- どの case にも一致しない場合は、default が実行される
- 条件の種類によって、if文 と switch文 を使い分けることが大切