[ JavaScript : 基礎学習講座 Ⅲ ] 条件分岐 (if, switch)

本記事では、JavaScriptの構文の一つである条件分岐(if文, switch文)を用いた条件に応じた処理の書き方についてご紹介させて頂きます。
サンプルコードも掲載させて頂いておりますので、学習や使い方の参考にして頂ければ嬉しいです。

ソースコードエディタをまだ準備できていない方は、
こちら ⬇️
https://utubou-tech.com/2021/05/21/942/

✅   条件分岐が分かる
✅   構文 : if文の活用方法が分かる
✅   構文 : switch文の活用方法が分かる
✅   break文の活用方法が分かる

学習用のファイルを準備

まず、内容に入っていく前に今回使用するファイルの準備をしましょう。
HTMLファイルを準備しますので、以下のコードをコピペしたファイルを作成してください。

※ JSコードは、HTMLに埋め込みながら動作させていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js_sample3</title>
    </head>
    <body>
        <script>
            <!-- ここにJSコードを記述していきます。 -->
        </script>
    </body>
</html>

比較演算子と論理演算子

条件分岐を学習する上で、必ず覚えておいた方がいい演算子が2種類あります。
それが、比較演算子と論理演算子になります。

こちらも各構文ごとのサンプルコードに含ませて頂いておりますので、参考にしてもらえればと思います。

比較演算子

論理演算子

条件分岐とは??

例えば、ある果物がりんごかどうかを判別するためのプログラムを書きたいとします。
その果物が、もし、りんごであれば画面に「はい、りんごです。」と出力し、違う場合は、「いいえ、違います。」と出力するようにしたいとなると
以下のようなイメージになります。

果物は、オレンジですので今回は、NOになり、「いいえ、違います。」と出力されるのが正しいですね！
このように、「値がAの時は、C, Bの時は、D」といった感じで、条件や式に応じて処理を分岐させること条件分岐と言います。

if文

if文を用いることで、「もし～ならばAを実行し、そうでなければBを実行する」というプログラムを書くことが出来ます。
単体/複数の条件を指定することで、処理を分岐するプログラムを書けるようになっていきましょう。

単一の条件を指定(true or false)

単一の条件、つまり条件式を1つのみ指定するif文になります。

[ サンプル ]

// 定数の指定
const numX = 20;
// if文を定義し、条件分岐を実施 : numX内の値が20以下であるかを調べる。
if(numX <= 20) {
    // 条件式がtrue場合の処理
    console.log("numの値が20以下である。")
} else {
    // 条件式がfalse場合の処理
    console.log("numの値が20より大きい値です。");}

[ 結果 ]

複数の条件を指定

続いて、複数の条件式を指定する場合のコードの記述方法について確認していきます。

[ サンプル ]

// 変数(num, num2)を定義
let num = 10;
let num2 = 12;
// 変数 numとnum2を乗算し、変数 kakeに代入
let kake = num * num2;
// 変数 numとnum3を乗算し、変数 kake2に代入
let kake2 = num * num2;

// 複数の条件式によるif文を定義 : 2件目以降の条件式は、else if文 を使用する
// 条件式 : kakeが120以上かつkakeが150より大きい
if(kake >= 120 && kake > 150) {
    console.log("kakeは、" + kake + "である。");
// 
// 条件式 : kake2が120以上又はkake2が100未満
} else if(kake2 >= 120 || kake2 < 100) {
    console.log("kake2は、" + kake2 + "である。");
} else {
    console.log("どちらもfalseです。");
}

[ 結果 ]

switch文

複数の値とマッチしているかどうかを調べたい場合は、switch文という構文を使用することも考えていきましょう。
比較対象の値をcase文で指定し、どの値とも一致しなかった場合の処理は、default：で指定します。

if文と違う箇所としては、式の結果(値)によって処理を分岐させる点になります。

[ サンプル ]

// 変数(n, n2)を定義
let n = 10;
let n2 = 2;

// switch文を定義
switch(n * n2) {
    // n * n2の計算結果が10の時に処理を実行
　　case 10 :
　　    console.log("値は10です。");
　　　　 break;
    // n * n2の計算結果が20の時に処理を実行
    case 20 :
　　　　　console.log("値が20です。");
　　　　　break;
    // n * n2の計算結果が10の時に処理を実行
    case 30 :
　　　　　console.log("値が30です。");
　　　　　break;
    // どの値にも一致しなかった場合の処理を記述
    default :
　　　　　console.log("どの値とも一致しませんでした。");
}

[ 結果 ]

break文の必要性

break文ってなんだ..と思われた方も多いのではないかと思いますが、最後にその必要性ともし、付けなかった場合の問題について、確認していきたいと思います。

[ 付けなかった場合の例 : case 20 : 内のbreak文を削除]

// 変数(n, n2)を定義
let n = 10;
let n2 = 2;

// switch文を定義
switch(n * n2) {
    // n * n2の計算結果が10の時に処理を実行
　　case 10 :
　　    console.log("値は10です。");
　　　　 break;
    // n * n2の計算結果が20の時に処理を実行
    case 20 :
　　　　　console.log("値が20です。");
　　　　　
    // n * n2の計算結果が10の時に処理を実行
    case 30 :
　　　　　console.log("値が30です。");
　　　　　break;
    // どの値にも一致しなかった場合の処理を記述
    default :
　　　　　console.log("どの値とも一致しませんでした。");
}

[ 結果 ]