条件分岐

プログラムは通常上から下に実行されていきます。 しかし社会には「赤信号であったら横断歩道はわたってはいけない」であるとか、「3000円以上ご購入の方限定でくじが引けます」のように「〜であるときにXXX」のような場面に遭遇します。

このように「〜のときにXXXをする」あるいは逆に「〜ではないときにYYY」などのように処理を分岐する用の構文が多くのプログラミング言語では用意されています。 この処理のことを「特定の条件のときに分岐する」ことであるから「条件分岐」と言います。

if文

JavaScriptで代表的な条件分岐にif文があります。

if文は次のような構文が基本形となります。

条件式の内容が成り立っている、すなわちtrueや真のときに{}で囲われた中身が実行されます。

if (条件式) {
    条件式がtrueのときに実行する文;
}

例えば先程の青信号の例ではこのようになります

if (信号が青であったら) {
    横断歩道を渡る;
}

真偽値

条件式の結果は常に成り立っているか成り立たないかのどちらかとなります。 この値のことを真偽値(Boolean)と言います。

真偽値は次の2つの値のどちらかを持ちます。

• 成り立っている
  • true, 真
• 不成立
  • false, 偽

また条件式には真偽値以外に数値や文字列も利用することができます。 JavaScriptに限らずプログラミング言語では、trueである値は無数にあるので、falseになる値を覚えるのが現実的です。

JavaScriptでfalseになる値は次の通りです

• false
• undefined
• null
• 0
  • 数値としての0
• 0n
  • nをつけると巨大な数値(BigInt)という意味になる
• NaN
• ''
  • 空文字列

これ以外の値はtrueとして扱われます。

比較演算子

ではプログラムで「信号が青であったら」のような条件はどのようにして表現するとよいでしょうか。

JavaScriptに限らずプログラミング言語では比較演算子が用意されており、これを利用するとこのような条件が判定できます。

厳密等価演算子

厳密等価演算子(===) は左右の値を比較し、一致していればtrueを返します。

console.log( 1 === 1);
console.log( "青" === "青");

console.log( "青" === "赤");

また、一見すると一致しているが数値と文字列を比較した場合はデータ型で比較されます。

console.log( 1 === "1");

厳密不等価演算子

厳密不等価演算子(!==) は左右の値を比較し、一致していなければtrueを返します。 これに限らずプログラミング言語では一般的に先頭に!がついていると、続く内容の反転を意味することが多いです。

console.log( 1 !== 1);
console.log( "青" !== "青");

console.log( "青" !== "赤");
console.log( 1 !== "1");

等価演算子

等価演算子(==)は厳密等価演算子と同じように左右の値を比較して一致していればtrueを返します。

しかし左右の値の型が違う場合は型変換を挟むという特性があります。

console.log( 1 == 1);
console.log( "青" == "青");

console.log( 1 == "1");
console.log( false == 0);

console.log(undefined == null);

このように結果がややマジカルなので、基本的にJavaScriptでは==は使ってはいけないとされています。 (他のプログラミング言語では==でだいたいの比較ができるため、JavaScriptの特徴の1つとなっています)

例外的に == を使って良いとき

唯一使っていい例外としてはnullまたはundefinedとの比較の場合です。

console.log(undefined == null);

==を使うとundefinedとnullは同じであると判定されので、値が未定義かどうかを調べる際に利用します。

const value = ???;
if (value != undefined) {
   console.log("nullでもundefinedでもないよ");
}

練習問題

以下は「信号(signal)が青(blue)の場合」は「ヨシ!!!」と表示するプログラムです。 続きを書いてみましょう。

const signal = "blue";

数値系の比較演算子

「3000円以上お買い上げの方」のような条件を調べるには、数値の大小を見る必要があります。 まとめて紹介します。

<  // 右辺より左辺が小さいならば「真」
>  // 右辺より左辺が大きいならば「真」

<= // 右辺が左辺以上ならば「真」
>= // 左辺が右辺以上ならば「真」

console.log( 10 < 42 ); 
console.log( 10 > 42 ); 

console.log( 10 <= 10 ); 
console.log( 10 >= 9 );

else文

条件式が成り立たなかった場合は続いてelse文を使うと表現できます

const bar = 10;
if ( 42 < bar) {
    console.log(`${bar}は42より大きいよ`);
} else {
    console.log(`${bar}は42より小さいよ`);
}

else if文

とはいえ必ずしも常に条件が2つだけとは限りません。 例えば「テストの点が80点以上であればA、20点以上であればB, それ以下であればF」のような場合を考えてみます。

if と elseだけで書くと次のようになります。

const score = 10;
if (score >= 80) {
    console.log("A");
} else {
    if (score >= 20 ) {
        console.log("B");
    } else {
        console.log("F");
    }
}

やりたいことはできたのですが、これだとif文の中にif文が入ってしまう(入れ子、ネスト)ため、ややコードが複雑になります。

JavaScriptに限らずプログラミング言語では「最初の条件を満たさなければ、次の条件を満たしているか見る」というふうに数珠つなぎに条件を書くことができます。 JavaScriptでは 次のように書きます。

if (最初の条件式) {

} else if (2つめに見る条件式) {

} else {
    // 上2つを満たさなかった場合に実行される
}

else ifはいくらでも繋いでいいので次のようにもかけます

if (最初の条件式) {

} else if (2つめに見る条件式) {

} else if (3つめに見る条件式) {

} else if (4つめに見る条件式) {

} else {
    // 上4つを満たさなかった場合に実行される
}

ということを踏まえると、先程の例は次のように書き直せます

const score = 10;
if (score >= 80) {
    console.log("A");
} else if (score >= 20 ) {
    console.log("B");
} else {
    console.log("F");
}

練習問題

以下は次のようなプログラムの最初の部分です

• 「信号(signal)が青(blue)の場合」は「ヨシ!!」と表示
• 「黄色(yellow)の場合」は「まぁヨシ!!」
• 「赤(red)の場合」は「ダメ!!!」と表示
• 「それ以外の場合」は「故障!!!!!!!!」と表示

続きを書いてみましょう。

const signal = "yellow";

複雑な条件式

次は「年齢が 20以上30歳未満の方限定 」のような条件を考えます。

複数のif文で書くと次のようになります

const age = 21;

if ( 20 <= age ) {
    if ( age < 30 ) {
        console.log("20代!!!");
    }
}

我々が知りたい条件は1つだけだったのですが、2つもif文を使ってしまいました。

これをif文1つで表現するには論理演算子を使います

AND

AND(かつ、&&)とは両方の条件がtrueのときにtrueを返す演算子です。

console.log( (1 === 1) && ( 1 < 2));
console.log( (1 === 2) && ( 10 < 2));
console.log( ("青" === "青") && ( 2 === 3));

console.log( ("青" === "赤") && ( 1 === 1));

例えば先程の20代を表現するには次のように書きます。

const age = 21;

if ( (20 <= age)  && ( age < 30) ) {
    console.log("20代!!!");
}

ちなみにこう書いてもエラーにはならないのですが意図と反した挙動をします。

const age = 21;

if ( 20 <= age < 3 ) {
    console.log("おかしい!!!");
}

OR

OR(または、||)とは両方の条件のいずれかがtrueのときにtrueを返す演算子です。

console.log( (1 === 1) || ( 1 < 2));
console.log( (1 === 2) || ( 10 < 2));
console.log( ("青" === "青") || ( 2 === 3));

console.log( ("青" === "赤") || ( 1 === 1));

練習問題2

事前準備

新しくif-practiceというディレクトリを作って以下のファイルを作ってください。

example.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <script src="./script.js"></script>
</body>
</html>

script.js

const number = Number(prompt());

console.log(number);

これを書いたらhtmlを表示してみましょう。 すると突然文字入力が求められると思います。何かしらの数値を半角でいれてみましょう。

管理者ツールからコンソールを開くと数値が表示されています。 これはprompt()がブラウザから入力を求める命令となっていて、それをNumber()で数値に変換しています。

課題

入力された数値によって以下の挙動をするプログラムを書いてみましょう。

• その数字が 3 で割り切れるなら Fizz と表示する。
• その数字が 5 で割り切れるなら Buzz と表示する。
• その数字が 3 でも 5 でも割り切れるなら FizzBuzz と表示する。
• その数字が 3 でも 5 でも割り切れないなら その数字 を表示する。

ヒント: 割り算のあまりを求めるには % を使います。