[JavaScript講座] 制御構文（if / switch / for / while / break / continue）

2025年11月19日

当ページのリンクには広告が含まれています。

条件分岐：if / else if / else

基本形

const score = 80;

if (score >= 90) {
  console.log("Sランク");
} else if (score >= 70) {
  console.log("Aランク");
} else {
  console.log("それ以外");
}

if (条件) の「条件」は真偽値に評価される
上から順に条件が評価され、最初に true になったブロックだけが実行される

`if` の条件には「真偽値以外」も書ける

const name = ""; // 未入力とする

if (!name) {
  console.log("名前が未入力です");
}

ここで !name は、

name が ""（Falsy） → !name は true
name が “Taro”（Truthy） → !name は false

という動きになるので、「空のときだけ実行」という条件になります。

switch 文：多分岐に使う

基本形

const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("りんご");
    break;
  case "banana":
    console.log("バナナ");
    break;
  default:
    console.log("その他のフルーツ");
}

ポイント：

switch (式) の式の値と、各 case 値 を === で比較するイメージ
一致した case の直後から実行される
break が無いと、その下の case になだれ込む（fallthrough）

`break` を忘れたとき

const num = 2;

switch (num) {
  case 1:
    console.log("one");
  case 2:
    console.log("two");
  case 3:
    console.log("three");
    break;
}

出力：

two
three

case 2 でマッチしたあと、break がないので case 3 も実行されます。

fallthrough を意図的に使うこともありますが、
初心者〜中級では「case の最後には break」と覚えておくのが安全です。

while ループ

基本形

let count = 0;

while (count < 3) {
  console.log("count:", count);
  count++;
}

出力：

count: 0
count: 1
count: 2

ループに入る前に count < 3 を評価
条件が true のあいだ、ブロックの中を繰り返す
条件が false になったらループを抜ける

無限ループに注意：

let i = 0;

while (true) {
  console.log(i);
  i++;

  if (i > 10) break;
}

条件を true にすると永遠にループするので、何かしら break 条件を書いておかないと止まらない

do…while ループ

do...while は「最低1回は必ず実行される」ループです。

let i = 0;

do {
  console.log("実行回数:", i);
  i++;
} while (i < 0);

条件は while (i < 0) → 最初から false
それでも do ブロックは1回実行される

ログ：

実行回数: 0

「一度は必ず実行したい処理」＋「条件が満たされるあいだ繰り返す」というイメージ

伝統的な for ループ

基本形

for (let i = 0; i < 3; i++) {
  console.log(i);
}

構造：

for (初期化; 条件; 更新) {
  // 繰り返したい処理
}

流れ：

初期化（1回だけ）
条件を評価 → true ならブロック実行
ブロック実行後、更新式を実行
再び条件を評価…

カウンタを増やしながら配列を回る

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i]);
}

伝統的な for は、「インデックスが必要」なときに向いています。

for…of と for…in

`for...of`：値を取り出す

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

出力：

apple
banana
orange

配列の要素そのものを順に取り出すループ
文字列も回せます：

for (const ch of "ABC") {
  console.log(ch); // "A", "B", "C"
}

`for...in`：キー（プロパティ名）を取り出す

const user = { name: "Taro", age: 20 };

for (const key in user) {
  console.log(key, user[key]);
}
// name Taro
// age 20

オブジェクトの列挙可能なプロパティキーを回す
配列にも使えるが、インデックス以外のプロパティまで拾うことがあるので、
配列には基本 for / for...of を使う方が安全です。

break と continue

`break`：ループを途中で抜ける

for (let i = 0; i < 10; i++) {
  if (i === 3) {
    break;
  }
  console.log(i);
}

出力：

0
1
2

i === 3 のとき break が実行され、ループ全体から抜ける

`continue`：その回だけスキップ

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // 2 のときだけスキップ
  }
  console.log(i);
}

出力：

continue に到達した時点で、その回の残り処理をスキップ → 次のループ周回へ

while や do...while でも同じように使えます。

ラベル付き文

あまり使わないですが、仕様として「ラベル付き文」があります。

基本形

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    console.log(i, j);
    if (i === 1 && j === 1) {
      break outer; // outer ラベルのついた for を抜ける
    }
  }
}

outer: がラベル
break outer; で、内側のループだけでなく外側ごと抜ける

continue にも使えます：

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (j === 1) {
      continue outer; // outer の次の周回へ
    }
    console.log(i, j);
  }
}