更新日: 2017年03月28日
公開日: 2015年12月05日

ゼロから始めるJavaScript講座VoL06　If文を使った条件分岐の方法

ゼロから始めるJavaScript講座If文を使った条件分岐の方法
ifとは
ifの書き方
if文の条件
「==」と「===」の違い
補足.「==」について
if文と論理演算子
課題

ゼロから始めるJavaScript講座If文を使った条件分岐の方法

ifとは

if文は条件によって処理内容を変更することができ、状況に応じた複雑な処理を行うことができます。まずはお手本にある通り、if文を使ったプログラムを書いてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>if</title>
</head>
<body>
    <script>
        // 0100のランダムな数字を取得
        var rand = Math.floor(Math.random() * 101);

        document.write('<p>rand: ' + rand + '</p>');

        if (rand >= 80) {
            document.write('<p>randは80以上</p>');
        } else if (rand <= 30) {
            document.write('<p>randは30以下</p>');
        } else {
            document.write('<p>randは30より大きく80より小さい</p>');
        }
    </script>
</body>
</html>

Math.random()
0以上1未満の乱数を取得できるメソッド

例) 0.7422

Math.floor()
小数点以下を切り捨てた数値を取得できるメソッドです。

例) Math.ﬂoor(74.9622) → 74

少し難しく感じるかもしれまんが、2つを組み合わせることで「ランダムな正の整数を取得できる」ことを最低限覚えておきましょう。

取得したランダムな数字から「80以上」「30以下」「それ以外」を判定しています。

ifの書き方

以下のような書式で条件分岐を行います。

このように書くことで、条件に一致したかどうかで処理内容を振り分けることができます。

if文において「elseif」や「else」は省略可能で、「if」のみのプログラムや「ifとelse」のプログラムを作成することも可能です。次にそれぞれ例を示します。

上記は「if」のみを利用しており、変数randが60以上の場合は合格と表示されますが、60より小さい場合は何も表示されません。

上記は「ifとelse」を利用しており、0１のランダムな数字を取得し、1の場合は当たりと表示し、それ以外(今回の場合は事実上0の場合)は外れと表示します。

if文の条件

if文は条件により処理を変えることができますが、その条件は「データ型」の講義で説明した論理型(boolean)の true 又は false で判定を行っております。

通常、比較演算子を用い、比較した結果一致する場合はtrue、一致しなかった場合はfalseとなることを利用します。

先ほど作成したif.htmlに以下2行を追記し、比較した結果、trueの条件になった部分が表示されていることを確認しましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>if</title>
</head>
<body>
    <script>
        // 0100のランダムな数字を取得
        var rand = Math.floor(Math.random() * 101);

        document.write('<p>rand: ' + rand + '</p>');
        document.write('<p>rand >=80: ' + (rand >= 80) + '</p>');
        document.write('<p>rand <=30: ' + (rand <= 30) + '</p>');

        if (rand >= 80) {
            document.write('<p>randは80以上</p>');
        } else if (rand <= 30) {
            document.write('<p>randは30以下</p>');
        } else {
            document.write('<p>randは30より大きく80より小さい</p>');
        }
    </script>
</body>
</html>

以前紹介したように、比較演算子には「===」(厳密に等しい)、「!== 」(厳密に等しくない)、「<=」(以上)、「>」(未満)など、様々な比較の例がありますが、どれも比較した結果は、true 又は false となります。

「==」と「===」の違い

どちらも左辺と右辺が等しいか比較しますが、この2つはデータ型を比較するかしないかとなります。

===

型と値を比較

値のみで型を比較をしない ※厳密には異なり、詳細は「補足」を参照

データ型説明の際に作成したcompare.htmlにて、値は同じでデータ型が異なるものを「==」と「===」でそれぞれ比較しました。


<script>
    var num = 123;
    var str = '123';

    document.write(num == str);  // true
    document.write(num === str); // false
</script>

「数値型の123」と「文字列型の123」を比較した場合、データ型まで比較を行う「===」はfalse、行わない「==」はtrueとなります。

比較において「==」と「===」のどちらを使うべきかですが、基本的には「===」を使うべきです。

型の比較を行わない「==」はバグの原因になりやすいなど理由は様々ありますが、ひとまず本講義では変数の型を意識してもらう意味も含めて、「===」を使ってプログラムを書くようにしましょう。

補足.「==」について

「==」は型の比較をしないと説明しましたが、厳密には「型を片方に合わせるよう変換した後に比較する」が正しくなります。

例えば文字列型と数値型を「==」で比較した場合は、数値型を文字列型に自動で変換した後に、比較を行います。

「==」は型の比較をしないと説明しましたが、厳密には「型を片方に合わせるよう変換した後に比較する」が正しくなります。

例えば文字列型と数値型を「==」で比較した場合は、数値型を文字列型に自動で変換した後に、比較を行います。

型の自動変換
演算	変換
文字列と数値	文字列に変換
数値と論理	数値に変換
文字列と論理	文字列に変換

上記のように型の変換はJavaScriptで定義されている一定の法則で行われています。

データ型を変換した後の値にも法則があり、例えば数値型と論理型を比較した場合、論理型は数値型に変換されますが、trueとfalseはそれぞれ「true → 1」「false → 0」となります。

また型の自動変換は比較演算子だけでなく、+(プラス)による加算 or 文字列の結合など、演算子全般に適用されます。

実際に型が自動で変換される例について、プログラムを作成してみましょう。。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>型変換</title>
</head>
<body>
    <script>
        var bool = true; // 論理型
        var num = 1;     // 数値型

        if (bool == num) {
            document.write('<p>bool == num is true</p>');
        } else {
            document.write('<p>bool == num is false</p>');
        }

        document.write(bool + num);  // 2
    </script>
</body>
</html>

「==」で比較を行っているため「true == 1」が型の自動変換(論理型→数値型)により「1 == 1」となり、if文の結果がtrueとなります。

また+(プラス)による加算も同様に「true+1」が型の自動変換(論理型→数値型)により「1+1」となり、結果として2となります。

型を自動で変換して比較してくれるのは便利なように思えますが、JavaScriptの細かな仕様を全て把握していないと予期せぬ動作を起こしてしまう可能性があります。このため、より厳密にプログラムを書くことが、遠回りなようで一番の近道となることが多くあります。

なお型の変換は自動ではなく、プログラム内で意図的に行うことも可能です。

Number()により数値型へ、String()により文字列型へ変換することが可能です。

型を変換することで、上記のように意図的に異なる結果を導くことも可能です。

型の変換方法はこの他にも用意されていますので、必要になったら調べて使うようにしましょう。

if文と論理演算子

if文の条件に論理演算子を利用することで、より複雑な条件を指定することができます。まずはお手本にある通りプログラムを書いてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>if&amp;論理演算子</title>
</head>
<body>
    <script>
        var rand1 = Math.floor(Math.random() * 101);
        var rand2 = Math.floor(Math.random() * 101);
        var sum = rand1 + rand2;

        document.write('<p>rand1: ' + rand1 + '</p>');
        document.write('<p>rand2: ' + rand2 + '</p>');
        document.write('<p>sum: ' + sum + '</p>');

        // 合計が160以上またはrand1かrand2が100
        if (sum >= 160 || rand1 === 100 || rand2 === 100) {
            document.write('<p>特待生</p>');
        // 合計が120以上かつrand1とrand2が40以上
        } else if (sum >= 120 && rand1 >= 40 && rand2 >= 40) {
            document.write('<p>合格</p>');
        // 合計が110以上
        } else if (sum >= 110) {
            document.write('<p>補欠合格</p>');
        // 条件外
        } else {
            document.write('<p>不合格</p>');
        }
    </script>
</body>
</html>