JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの条件分岐とは？if文・else文・else if文の使い方を解説

JavaScriptには、条件に応じて処理を切り替えるための「条件分岐（条件文）」が用意されています。条件式が真（true）か偽（false）かを評価することで、実行するコードを制御できます。代表的な条件文は次の3種類です。

  • if文 − 指定した条件が満たされた場合にのみ、ifブロック内のコードを実行します。最も基本的な条件分岐です。
  • if…else文 − 条件が真の場合と偽の場合で、それぞれ異なる処理を実行したいときに使います。2つのケースを切り替えるのに適しています。
  • if…else if…else文 − 3つ以上の条件を扱いたい場合に使用します。条件を上から順に評価し、最初に一致したブロックだけを実行します。

各条件文の基本構文

if文

if (条件式) {
  // 条件がtrueのときに実行される処理
}

if…else文

if (条件式) {
  // 条件がtrueのときに実行される処理
} else {
  // 条件がfalseのときに実行される処理
}

if…else if…else文

if (条件式1) {
  // 条件式1がtrueのときに実行
} else if (条件式2) {
  // 条件式1がfalseで、条件式2がtrueのときに実行
} else {
  // どの条件にも当てはまらないときに実行
}

実装例：数値が2と3で割り切れるかを判定する

以下は、入力された数値が「2で割り切れる」「3で割り切れる」「その両方」「どちらでもない」かを判定するサンプルコードです。if…else if…else文を使って複数の条件を順番にチェックしています。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptの条件分岐</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptの条件分岐</h1>
<input type="text" class="numInput" />
<button class="Btn">CHECK</button><br />
<div class="result"></div>
<h3>上のボタンをクリックすると、入力した数値が2・3・または両方で割り切れるかどうかが表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let numInputEle = document.querySelector(".numInput");
    BtnEle.addEventListener("click", () => {
        if (numInputEle.value % 2 === 0 && numInputEle.value % 3 === 0) {
            resEle.innerHTML = "この数値は2と3の両方で割り切れます";
        } else if (numInputEle.value % 3 === 0) {
            resEle.innerHTML = "この数値は3で割り切れます";
        } else if (numInputEle.value % 2 === 0) {
            resEle.innerHTML = "この数値は2で割り切れます";
        } else {
            resEle.innerHTML = "この数値は2でも3でも割り切れません";
        }
    });
</script>
</body>
</html>

実行結果

ページを開くと、数値の入力欄と「CHECK」ボタンが表示されます。

JavaScriptの条件分岐とは？if文・else文・else if文の使い方を解説

数値を入力して「CHECK」ボタンをクリックすると、判定結果が画面に表示されます。例えば「6」を入力すれば「2と3の両方で割り切れます」、「4」なら「2で割り切れます」といった具合に、条件に合ったメッセージが出力されます。

JavaScriptの条件分岐とは？if文・else文・else if文の使い方を解説

まとめ

条件文を使いこなすことで、プログラムに状況に応じた判断力を持たせることができます。単純な分岐にはif文やif…else文を、3つ以上の条件がある場合にはif…else if…else文を選ぶのがポイントです。まずは小さなサンプルで動きを確認しながら、実際のコーディングに取り入れてみてください。

  1. JavaScriptのtry文とcatch文の使い方をサンプルコードで解説

    try文とcatch文とはtry文を使うと、コードブロックを実行しながらエラーの有無をテストできます。実行中にエラーが発生した場合、そのエラーはcatch文によって捕捉（キャッチ）され、プログラムが強制終了することなく適切に処理を行うことができます。この仕組みは「例外処理」と呼ばれ、予期しないエラーが発生してもユーザーに分かりやすいメッセージを表示したり、代替処理に切り替えたりする際に非常に役立ちます。JavaScriptにおけるtry文とcatch文のサンプルコード以下は、宣言前に変数へアクセスした際に発生するエラーを、try〜catch文で捕捉して画面に表示する例です。コード例<!D

  2. JavaScriptの条件分岐とは？if文・else文・else if文の使い方を解説

    JavaScriptには、条件に応じて処理を切り替えるための「条件分岐（条件文）」が用意されています。条件式が真（true）か偽（false）かを評価することで、実行するコードを制御できます。代表的な条件文は次の3種類です。 if文 − 指定した条件が満たされた場合にのみ、ifブロック内のコードを実行します。最も基本的な条件分岐です。 if…else文 − 条件が真の場合と偽の場合で、それぞれ異なる処理を実行したいときに使います。2つのケースを切り替えるのに適しています。 if…else if…else文 − 3つ以上の条件を扱いたい場合に使用します。条件を上から順に評価し、最初に一致したブ