【6日でできるJavaScript入門】break文とcontinue文

　ループの制御を細かく調整したいときに役立つのが、break と continue 文です。break はループを完全に終了させ、continue はその一回だけスキップして次の反復へ戻ります。この「break文とcontinue文」では、両者の活用例から違い、for と while による実装パターンまでを詳しく解説します。

１．break文の活用方法

ある条件が満たされた瞬間にループを止めたい場合に break を使います。

1.1. 合計が150を超えた瞬間を見つける

for (let i = 1; i <= 100; i++) {
  sum += i;
  if (sum > 150) {
    count = i;
    break;
  }
}

sum が150を超えたら、変数 count にその i を保存
break で for を即終了

1.2. サンプルHTML：合計判定アプリ

ファイル名： lesson16-1.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>➕ 合計判定</title></head>
<body>
  <h1>➕ 1〜100の合計判定</h1>
  <button onclick="run()">判定開始</button>
  <div id="out"></div>
  <script>
    function run() {
      let sum = 0, count;
      for (let i = 1; i <= 100; i++) {
        sum += i;
        if (sum > 150) {
          count = i;
          break;
        }
      }
      document.getElementById('out').textContent =
        `1から${count}までで合計が${sum}になります。`;
    }
  </script>
</body>
</html>

ブラウザの出力例

出力例： 1から17までで合計が153になります。

２．continue文の活用方法

　ループ内で条件を満たすときだけ処理を飛ばし、次の繰り返しへ戻りたい場合に continue を使います。

2.1. 1〜50のうち4または6で割り切れない数を列挙

for (let i = 1; i <= 50; i++) {
  if (i % 4 === 0 || i % 6 === 0) continue;
  list.push(i);
}

i が4または6で割り切れる場合、その回の残り処理をスキップ
% と || で論理条件を結合

2.2. サンプルHTML：非割り切り判定

ファイル名： lesson16-2.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🚫 割り切り判定</title></head>
<body>
  <h1>🚫 1〜50の判定</h1>
  <button onclick="check()">結果を見る</button>
  <div id="msg"></div>
  <script>
    function check() {
      let out = '';
      for (let i = 1; i <= 50; i++) {
        if (i % 4 === 0 || i % 6 === 0) continue;
        out += i + ' ';  
      }
      document.getElementById('msg').textContent = out;
    }
  </script>
</body>
</html>

ブラウザの出力例

出力例：1 2 3 5 7 9 10 11 … 49

３．breakとcontinueの違い

文	動作
`break`	ループ全体を即終了
`continue`	その回だけ残りをスキップし、次の反復へ

４．JavaScriptのfor文とcontinue文

for 内で continue を使うと、条件に合わない回だけ残り処理を飛ばして次へ移動します。

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // 偶数は飛ばす
  console.log(i);           // 1,3,5,7,9
}

５．while文を使った繰り返し処理

条件が真の間だけ実行を続けられる while 文でも、break や continue が使用可能です。

5.1. サンプルHTML：2倍で1000超え判定

ファイル名： lesson16-3.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>✖️ 2倍ループ</title></head>
<body>
  <h1>✖️ 値を2倍して1000超え</h1>
  <button onclick="calc()">開始</button>
  <div id="res"></div>
  <script>
    function calc() {
      let val = 1, step = 0;
      while (val <= 1000) {
        val *= 2;
        step++;
      }
      document.getElementById('res').textContent =
        `2を${step}回かけると${val}になります。`;
    }
  </script>
</body>
</html>

ブラウザの出力例

出力例： 2を10回かけると1024になります。

まとめ

break でループを途中終了
continue でその回だけスキップ
for/while のどちらでも併用可能

以上で break と continue、および while 文の基本を学びました。