【JavaScript入門】continueとbreak

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

continueとbreak

　JavaScript の繰り返し処理の中には、特定のタイミングで処理をやめたり、次の繰り返しにスキップしたい場合があります。その際に役立つのが break と continue です。どちらも繰り返し文（for、while など）で使われ、繰り返しの流れを制御します。さらに、ラベルを併用することで入れ子になった繰り返しをまとめて抜けたり、続行処理を途中でスキップしたりも可能です。ここでは break と continue の基本的な使い方や、ラベルとの組み合わせについて例示します。

１．break

繰り返し処理を中断して、対応するブロックを抜けるためのキーワードです。

for, while 文などのループの中で break を書くと、そのループを強制終了する。
switch 文内で break を使うと、その switch ブロックを抜ける。
ラベル と併用すれば、深い入れ子のループを一気に抜けることもできる。

２．continue

　繰り返し処理の残りの処理をスキップし、次の繰り返しの開始箇所（for の変化式や while の条件式）にジャンプするキーワードです。

ある条件が成立したら、その回は一部処理を飛ばして次の反復に進みたいときに利用する。
ラベル と併用すれば、指定したラベルのループに戻ることもできる。

サンプルHTMLファイル：myBreakContinueExample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myBreakContinueExample.html</title>
</head>
<body>
  <h1>break と continue のサンプル</h1>
  <p>ブラウザで開き、開発者ツールのコンソールを確認してください。</p>

  <script>
    // 1) break の基本例: 繰り返しを途中で中断
    console.log('=== break の例 ===');
    for (let i = 0; i < 5; i++) {
      console.log('ループ前 i=', i);

      if (i === 2) {
        break; // iが2のときにループから抜ける
      }

      console.log('ループ後 i=', i);
    }

    // 2) ラベル付きの break: 入れ子のループを抜ける
    console.log('=== ラベル付き break の例 ===');
    outerLoop: for (let a = 0; a < 3; a++) {
      for (let b = 0; b < 3; b++) {
        console.log(`a=${a}, b=${b} (前)`);

        if (a === 1 && b === 1) {
          // outerLoopというラベル付きのforを抜ける
          break outerLoop;
        }

        console.log(`a=${a}, b=${b} (後)`);
      }
    }

    // 3) continue の基本例: その回だけ一部処理をスキップ
    console.log('=== continue の例 ===');
    for (let i = 0; i < 5; i++) {
      if (i === 2) {
        continue; // i=2のときだけループ途中をスキップ
      }
      console.log('i=', i);
    }

    // 4) ラベル付きの continue
    console.log('=== ラベル付き continue の例 ===');
    outerLoop2: for (let x = 0; x < 3; x++) {
      for (let y = 0; y < 3; y++) {
        if (x === 1 && y === 1) {
          console.log(`x=${x}, y=${y} => continue outerLoop2`);
          continue outerLoop2; // 外側ループにジャンプ
        }
        console.log(`x=${x}, y=${y}`);
      }
    }
  </script>
</body>
</html>

デバックコンソールの出力

=== break の例 ===
ループ前 i= 0
ループ後 i= 0
ループ前 i= 1
ループ後 i= 1
ループ前 i= 2
=== ラベル付き break の例 ===
a=0, b=0 (前)
a=0, b=0 (後)
a=0, b=1 (前)
a=0, b=1 (後)
a=0, b=2 (前)
a=0, b=2 (後)
a=1, b=0 (前)
a=1, b=0 (後)
a=1, b=1 (前)
=== continue の例 ===
i= 0
i= 1
i= 3
i= 4
=== ラベル付き continue の例 ===
x=0, y=0
x=0, y=1
x=0, y=2
x=1, y=0
x=1, y=1 => continue outerLoop2
x=2, y=0
x=2, y=1
x=2, y=2

動作の概要

break：ある条件に達したらループを完全にやめる。入れ子のループを抜けたい場合は「break ラベル名;」を使う。
continue：ある条件に達したらその回の残り処理をスキップし、次の反復へ。入れ子のループで特定の外側ループに戻りたい場合は「continue ラベル名;」を使う。

まとめ

break は「繰り返し文/ブロックから抜ける」用途で、場合によってはラベルを使って複数段のループを一気に抜けられる。
continue は「残りの処理をスキップして、次の反復へ進む」。
ラベルを併用することで、どのループを抜けるか、あるいはどのループに戻るかを明示できる。
break と continue をうまく使うと、入れ子のループや複雑な条件下での制御フローがシンプルに書ける反面、可読性を下げる要因にもなり得るので、必要最低限にとどめるのが望ましい。