【JavaScript】条件分岐・繰り返しの使い方を解説｜Webの基礎

記事内には広告が含まれます

2026年9月11日

はじめに

前回の記事では、関数（Function）の基本的な使い方を解説しました。

今回は、条件によって処理を分ける条件分岐（if文・switch文）と、同じ処理を何度もくり返す繰り返し処理（for文・while文）の基本的な使い方を解説します。どちらもプログラムの中で最も使う頻度が高い構文で、配列の操作を解説した記事のforEachやmap、フォーム（formタグ）の操作を解説した記事の入力チェックでも、実はこの仕組みが土台になっています。

条件分岐とは？（if文の基本）

条件分岐とは、ある条件が成り立つかどうかで実行する処理を切り替える仕組みです。JavaScriptではif文を使います。

const score = 75;

if (score >= 60) {
    console.log("合格です");
}

if (条件)の条件の部分がtrue（真）のときだけ、続く{}の中の処理が実行されます。条件がfalse（偽）のときの処理も指定したい場合はelseを使います。

const score = 45;

if (score >= 60) {
    console.log("合格です");
} else {
    console.log("不合格です");
}

VBAのIf ... Then ... Else ... End Ifと同じ発想です。VBAでは条件をThenの前に書き、ブロックの終わりをEnd Ifで示しますが、JavaScriptでは条件を()（丸括弧）で囲み、ブロックの範囲を{}（波括弧）で示します。

複数の条件を分ける（else if）

条件が3つ以上に分かれる場合は、else ifをつなげて書きます。

const score = 75;

if (score >= 80) {
    console.log("優");
} else if (score >= 60) {
    console.log("良");
} else if (score >= 40) {
    console.log("可");
} else {
    console.log("不可");
}
// "良"

ifから順番に条件を確認していき、最初にtrueになった条件のブロックだけが実行されます。scoreが75の場合、score >= 80はfalseなので次のscore >= 60を確認し、これがtrueなので”良”が出力され、それ以降のelse if・elseは確認されずに処理が終わります。条件を書く順番によって結果が変わるため、範囲が重なる条件は数値が大きい方（または厳しい方）から先に書くのが基本です。

switch文で分岐を整理する

1つの値に対して分岐が多い場合は、ifの連続よりもswitch文を使うほうが見通しがよくなります。

const day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = "月曜日";
        break;
    case 2:
        dayName = "火曜日";
        break;
    case 3:
        dayName = "水曜日";
        break;
    default:
        dayName = "不明な曜日";
        break;
}

console.log(dayName); // "水曜日"

switch (day)の値と一致するcaseの処理が実行されます。どのcaseにも一致しなかった場合はdefaultが実行されます（VBAのCase Elseにあたります）。

各caseの最後にbreakを書き忘れると、一致したcase以降の処理が次のcaseにも続けて実行されてしまいます（フォールスルーと呼ばれる仕様です）。VBAのSelect Caseは各Caseが独立していて次のCaseに流れ込むことはないため、VBAに慣れていると特にハマりやすいポイントです。breakを書き忘れていないか必ず確認しましょう。

繰り返し処理とは？for文の基本

繰り返し処理とは、同じ処理を指定した回数だけくり返す仕組みです。JavaScriptで最もよく使うのがfor文です。

for (let i = 0; i < 5; i++) {
    console.log(i);
}
// 0
// 1
// 2
// 3
// 4

for (初期化; 継続条件; 増分)の3つを;（セミコロン）区切りで指定します。上の例では「iを0から始めて、iが5未満の間くり返し、1周ごとにiを1増やす」という意味になり、結果として0〜4までの5回くり返されます。

VBAのFor i = 1 To 5 ... Nextとほぼ同じ発想ですが、書き方に違いがあります。VBAは1 To 5のように開始・終了の値を書きますが、JavaScriptは「継続条件」と「増分」を自分で指定します。また、配列の添字（インデックス）は0から始まるため、配列の要素を先頭から末尾までくり返す場合はi = 0・i < 配列.lengthと書くのが定番です。

なお、配列の操作を解説した記事で紹介したforEach・map・filterは、配列の要素を1つずつ処理する場合に特化した書き方です。添字そのものを使いたい場合や、配列以外の回数指定の繰り返しには、今回のfor文を使います。

while文（条件が続く間くり返す）

くり返す回数があらかじめ決まっていない場合は、while文を使います。

let count = 0;

while (count < 3) {
    console.log(count);
    count++;
}
// 0
// 1
// 2

while (条件)の条件がtrueである間、{}内の処理がくり返されます。VBAのDo While ... Loopにあたります。

count++のように、ループの中で条件に関わる値を必ず更新することを忘れないでください。更新を書き忘れると条件がいつまでもtrueのままになり、無限ループに陥ってブラウザが固まってしまいます。

break・continueで繰り返しを制御する

繰り返しの途中で処理を止めたり、一部だけ飛ばしたりしたい場合はbreak・continueを使います。

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // iが5になったらループを抜ける
    }
    if (i % 2 === 0) {
        continue; // 偶数のときは以降の処理を飛ばして次の周へ
    }
    console.log(i);
}
// 1
// 3

breakはループそのものを終了し、continueはその周の残りの処理だけを飛ばして次の周に進みます。switch文のbreakと名前は同じですが、for・whileの中で使うと「ループを抜ける」という意味になります。

実務サンプル（入力フォームの必須項目チェック）

これまでに解説したfor文・if文・continueを使って、フォーム（formタグ）の操作を解説した記事で扱った入力チェックを、複数項目をまとめてチェックできる形に書き直してみます。

HTML

<form id="entryForm">
    <p><label>お名前：<input type="text" id="name"></label></p>
    <p><label>メールアドレス：<input type="text" id="email"></label></p>
    <p><label>電話番号：<input type="text" id="phone"></label></p>
    <div id="errorBox"></div>
    <button type="submit">送信</button>
</form>

JavaScript（main.js）

document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById("entryForm");

    form.addEventListener("submit", (event) => {
        event.preventDefault();

        const requiredFields = [
            { id: "name", label: "お名前" },
            { id: "email", label: "メールアドレス" },
            { id: "phone", label: "電話番号" },
        ];

        const errors = [];

        for (let i = 0; i < requiredFields.length; i++) {
            const field = requiredFields[i];
            const value = document.getElementById(field.id).value.trim();

            if (value === "") {
                errors.push(`${field.label}を入力してください`);
                continue; // 空欄なら次の項目のチェックへ進む
            }
        }

        const errorBox = document.getElementById("errorBox");

        if (errors.length > 0) {
            errorBox.innerHTML = errors.map((msg) => `<p>${msg}</p>`).join("");
        } else {
            errorBox.innerHTML = "";
            alert("送信しました（実際の送信処理はここに書きます）");
        }
    });
});

requiredFieldsの配列をfor文で1件ずつ確認し、値が空欄ならerrorsにエラーメッセージを追加してcontinueで次の項目へ進みます。最後にerrors.lengthをif文で確認し、文字列の操作を解説した記事のtrimや配列の操作を解説した記事のmap・joinと組み合わせて、エラーがあればまとめて表示しています。

よくある質問・エラー対処

Q. for文とforEachはどちらを使えばいいですか？

→ 配列の要素を先頭から1つずつ処理するだけなら、配列の操作を解説した記事で紹介したforEachのほうが短く書けます。添字（インデックス）そのものを計算に使いたい場合や、配列以外の回数指定の繰り返しにはfor文を使うと考えるとよいでしょう。

Q. switch文のbreakを忘れるとどうなりますか？

→ 一致したcaseから下の処理が、次のcaseのラベルに関係なくそのまま実行され続けます（フォールスルー）。意図的にフォールスルーを使うケースもありますが、基本的には各caseの最後に必ずbreakを書くようにしましょう。

Q. while文で無限ループになってブラウザが固まってしまいました。どうすればいいですか？

→ ループの中で条件に関わる変数を更新し忘れていないか確認してください。実行中にブラウザが固まった場合は、タブを閉じるか、ブラウザの「ページを応答なしにする処理を停止」の案内に従って停止する必要があります。開発中は、まずfor文のように回数の上限がはっきり決まった書き方でループを組み、動作を確認してからwhile文に置き換えると安全です。