JavaScript【 if 】 ～ 単純な条件分岐

「もし○○○なら●●●をする」というような、ある条件を満たすかどうかで処理の内容を決めるプログラミングを、条件分岐といいます。
今回は、条件分岐の中で最も簡単な構造のif文を紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. if 文とは

if文とは、ある条件を満たす場合と満たさない場合とで、処理内容が二分される条件分岐です。

条件を満たす場合をtrue、満たさない場合をfalseといいます。

JavaScriptで実現可能な条件分岐の中には、「ある値が1の場合はAの処理をして、2の場合はBの処理をして、3の場合はCの処理をして、…」のようなものもありますが、if文は、結果が単純に二分されます。

if文は、次のように記述します。

if ( 条件 ) {
　　条件が true の場合の処理内容
}

カッコ内に条件式を記述して、条件を満たす場合（true）は中カッコ内の処理が実行され、条件を満たさない場合（false）は中カッコ内の処理が実行されません。

この書き方では、falseの場合は特に処理は行われません。

これに対して、falseの場合はtrueの場合と違う処理を実行させたい時は、次のように記述します。

if ( 条件 ) {
　　条件が true の場合の処理内容
} else {
　　条件が false の場合の処理内容
}

条件がtrueの場合はifの処理内容、falseの場合はelseの処理内容が実行されます。

▲目次へ戻る

2. if 文の使い方

次のサンプルは、入力された数値が奇数か偶数かを判別して表示するプログラムです。
実際に、数値を入力してＯＫボタンをクリックしてみて下さい。

　
　
ソースは次の通りです。

<script type="text/javascript">
function judge() {
    let num = document.sample.dat.value;

    if (num % 2 == 0) {
        alert(num + "は偶数です！");
    } else {
        alert(num + "は奇数です！");
    }
}
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form name="sample">
        数値を入力してＯＫボタンをクリックして下さい！　
        <input type="text" name="dat" size="10">
        <input type="button" value="OK" onClick="judge()">
    </form>
</div>

このサンプルコードでは、if文で条件分岐する処理を、judge()というユーザ定義関数に記述しています。

そして、ＯＫボタンをクリックすると、イベントハンドラのonClickによって、judge()が呼び出される仕組みです。

judge()の中で、画面から入力されたデータを「document.sample.dat.value」として取得して、変数numに代入した後、if文で条件分岐しています。

条件式「num % 2 == 0」は、「変数numの値を2で割った時の余りが0」という意味ですので、この条件式がtrueの場合は変数numは偶数、falseの場合は変数numは奇数となって、処理内容であるアラートの表示内容が決定するという流れです。

▲目次へ戻る

3. else if 文とは

if文は、条件式がtrueの場合とfalseの場合とで処理を分ける条件分岐ですが、この条件式自体を複数設定することもできます。

条件式自体を複数設定する場合、２つ目以降の条件式は「else if」を使って次のように記述します。

if ( 条件１ ) {
　　条件１が true の場合の処理内容
} else if (条件２) {
　　条件２が true の場合の処理内容
} else {
　　条件が全て false の場合の処理内容
}

条件１がtrueの場合はifの処理内容、条件１がfalseの場合で条件２がtrueの場合はelse ifの処理内容、どの条件もfalseの場合はelseの処理内容が実行されます。

else ifを使うと、else if(条件２)、else if(条件３)、…と、いくつでも条件式を追加することができます。

▲目次へ戻る

4. else if 文の使い方

入力データが偶数か奇数かを表示する 先ほどのサンプルプログラムに、else if 文を加えてみます。

先ほどのサンプルは、入力データが偶数でない場合は全て奇数として表示していたため、仮に数値以外の文字データが入力された場合でも、「（入力データ）は奇数です！」とアラート表示される内容でした。

これを、偶数でも奇数でもない場合を想定して作り直してみます。
実際に、数値以外のデータを入力して確認してみて下さい。

　
　
ソースは次の通りです。

<script type="text/javascript">
function judge() {
    let num = document.sample.dat.value;

    if (num % 2 == 0) {
        alert(num + "は偶数です！");
    } else if (num % 2 == 1) {
        alert(num + "は奇数です！");
    } else {
        alert(num + "は数値ではありません！");
    }
}
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form name="sample">
        数値を入力してＯＫボタンをクリックして下さい！　
        <input type="text" name="dat" size="10">
        <input type="button" value="OK" onClick="judge()">
    </form>
</div>

　
条件分岐処理を、judge()というユーザ定義関数に記述し、ＯＫボタンクリック時にイベントハンドラのonClickによって、judge()が呼び出されるという仕組みは、前のサンプルと同じです。

judge()の中で、画面から入力されたデータを「document.sample.dat.value」として取得して、変数numに代入した後、if 文 及び else if 文 で条件分岐しています。

１番目の条件式「num % 2 == 0」は、「変数numの値を2で割った時の余りが0」という意味ですので、この条件式がtrueの場合は変数numは偶数としてアラートの表示内容を決定しています。

１番目の条件式がfalseの場合、２番目の条件式「num % 2 == 1」は、「変数numの値を2で割った時の余りが1」という意味ですので、この条件式がtrueの場合は変数numは奇数としてアラートの表示内容を決定しています。

１番目の条件式も２番目の条件式もfalseの場合、変数numは数値以外のデータとしてアラートの表示内容を決定しています。

▲目次へ戻る