【JS第4回】条件分岐:if文とswitch文

JavaScript基礎講座 全10回(第4回)

【JS第4回】条件分岐:if文とswitch文

プログラムに「状況に応じた状況判断」をさせましょう。特定の条件に基づいて実行する処理を切り替えるif/else文と、特定の値に基づいて綺麗に処理を仕分けるswitch文を習得します。

📌 JavaScript講座ロードマップ一覧(クリックで移動)

1. もしも〜ならを実行する if 文

JavaScriptで最も頻繁に使用する条件分岐が if(イフ)文 です。条件式が `true` か `false` かによって、実行するコードを分岐させます。

if文は以下の基本形に従って記述します。

  • if (条件式) : 括弧内の条件式が真(true)である場合に、直後の波括弧 `{ }` 内の処理を実行します。
  • else if (別の条件式) : 上の条件が false で、かつこの括弧内の式が true である場合に実行されます(何個でも追加可能です)。
  • else : 上記のすべての条件に合致しなかった(すべて false だった)場合に、最終的な逃げ道として実行されます。

2. 値で仕分ける switch 文

「変数の値が A のとき、B のとき、C のとき…」のように、単一の対象が特定の値であるかによって細かく処理を分岐させたい場合、if文を連発するとコードが見づらくなります。

このような場合には、switch(スイッチ)文 を使用するとすっきりと記述できます。

⚠️ switch文で絶対に忘れてはいけない break

switch文の各ケースの末尾には必ず break; を記述します。これを書き忘れると、合致したケースの下にある処理までブレーキがかからず、突き抜けて実行されてしまうバグ(フォールスルー)が発生します。

3. どちらを使うべきか?使い分けの判断基準

基本的にはすべてif文で記述可能ですが、以下の基準で判断すると美しいコードになります。

  • if文が適している場合: 「20歳以上」「AかつB」といった、比較演算子や論理演算子を含んだ複雑な条件や範囲(大小比較)を判定したい時。
  • switch文が適している場合: 「信号の色が “red”、”blue”、”yellow” のいずれか」のように、特定の変数が「特定の値と一致するか」のみでシンプルに多方向分岐させたい時。

4. 判断処理のコードを体験しよう

以下のコードは、if-else文による大小範囲の判定と、switch文による特定値の判定を組み合わせた実践例です。

script.js
const score = 85;
const rank = "A";

/* ① if-elseによる範囲条件判定 */
if (score >= 90) {
    console.log("優秀な成績です!");
} else if (score >= 80) {
    console.log("良好な成績です。"); /* これが出力される */
} else {
    console.log("がんばりましょう!");
}

/* ② switchによる特定値の判定 */
switch (rank) {
    case "A":
        console.log("ランク報酬:金メダル");
        break; /* ここで処理を終了する */
    case "B":
        console.log("ランク報酬:銀メダル");
        break;
    default:
        console.log("ランク報酬:なし");
}
✍️ 第4回 理解度チェック(問題)

if文の条件式において、式の内容が「真(true)」と判定された時に実行させたい処理の範囲は、どの記号(ブラケット)で囲むルールになっているでしょうか?

※この問題の解答と解説は、ページ最下部(まとめの前)に掲載しています。

5. まとめと次回予告

第4回の講義はお疲れ様でした!今回の重要ポイントを振り返りましょう。

  • if、else if、elseを使用し、条件式が真偽いずれかによってコードを分岐する。
  • 単一変数の値が特定値と一致するかを多方向判定するには switch文が適している。
  • switch文の各caseの末尾には、処理を打ち切るための `break;` が必須。

次回(第5回)は、プログラミングの最大の強みである「自動処理」を体験する「繰り返し処理:for文とwhile文」を学び、同じ処理を何百回も高速ループさせる方法を学習します。お楽しみに!

🔑 第4回 理解度チェックの解答と解説

【解説】

正解は **波括弧 `{ }`** (中かっこ)です。 `if (score >= 80) { console.log(“合格”); }` のように、条件が成立した時に実行させたいステートメントの一連の固まり(ブロック)は、必ず波括弧 `{ }` で囲ってグループ化する必要があります。インデントを揃えて見やすく整えるのも、構文ミスを防ぐためのコーディングマナーです。