break と continue でループを制御する｜コードで実践

break と continue でループを制御するとは

ループを途中で抜ける break と、次の回へスキップする continue を学び、条件で離脱する関数を書こう。

break と continue はループの流れを変える 2 つの命令

ここまで for while do-while for-of for-in の 5 種類のループを学んできました。どれも「条件が false になるまで回る」「最後の要素まで進む」のが基本動作です。今回はそんなループの中で、途中でちょっと違うことをしたい ときに使う 2 つのキーワード、break と continue を学びます。

break は ループを完全に抜ける、continue は その回をスキップして次へ進む という意味です。Java でも Python でも C でも同じキーワードがあり、ほぼ同じ意味で使われます。ループの流れを柔軟にコントロールできる、必須のテクニックです。

break で条件を満たしたら抜ける

まず break から見ていきます。配列の中から「最初に見つかった偶数」を返す関数を考えてみましょう。break を使わずに書くと、こんな感じになります。

JavaScript

function findFirstEven(arr) {
  let found = null;
  for (const n of arr) {
    if (n % 2 === 0 && found === null) {
      found = n;
    }
  }
  return found;
}

最初の偶数を見つけた後も、ループは最後まで回り続けています。found の中身は変わらないのですが、無駄な処理が続いている状態です。break を使えばもっと素直に書けます。

JavaScript

function findFirstEven(arr) {
  let found = null;
  for (const n of arr) {
    if (n % 2 === 0) {
      found = n;
      break;
    }
  }
  return found;
}

break が実行されると、for ループは 即座に終了 し、return found; の行に飛びます。「目的のものを見つけたらそれ以上探す必要はない」というケースで、効率的かつ意図が明確になります。

continue で今の回をスキップする

次に continue を見てみます。配列の中の偶数だけ合計したい場面で、continue を使うとこう書けます。

JavaScript

function sumEvens(arr) {
  let total = 0;
  for (const n of arr) {
    if (n % 2 !== 0) {
      continue;
    }
    total += n;
  }
  return total;
}

continue が実行されると、ループの 本体の残り をスキップして次の繰り返しに進みます。上の例では「奇数だったら total += n を実行せずに次へ」という意味です。

もちろん continue なしで if (n % 2 === 0) { total += n; } と書いても同じ結果になります。continue は「例外的な条件を先に弾く」という発想で書くと、ネストが浅くなって読みやすくなることが多いです。これは前章で学んだ guard clause と似た発想です。

「break と continue をどう使い分けるの?」とよく聞かれます。答えはシンプルで、もう用がなくなった = break、今の回はパスしたい = continue です。break でループ全体を抜けるか、continue で次の回に進むかの 2 択だと覚えれば OK です。

break と continue を見比べる

両者を同じコード骨格で見比べてみましょう。

JavaScript

// break 版
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i); // 0, 1, 2, 3, 4 を出力
}

// continue 版
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i); // 0, 1, 2, 3, 4, 6, 7, 8, 9 を出力 (5 だけスキップ)
}

break だと i === 5 で完全終了、continue だと i === 5 のときだけ console.log をスキップ、という違いがクリアになるはずです。

実行フローを図で追ってみる

break と continue を含むループの流れは次のとおりです。

diagram (will load when visible)

break は「End に直行」、continue は「本体をスキップして更新へ」と分かれているのが視覚的に確認できます。

よくある間違い

break と continue を使い始めるとき、初心者がハマる落とし穴が 3 つあります。

ネストしたループで内側だけ抜けたいのに外まで止まると思い込む — break は 最も内側のループだけ を抜けます。外側のループは続行されます。これは混乱の元なので、ネスト時はラベルや関数化で対応するのが定石です
continue の後に置いたコードが実行されない — continue を書いた直後のコードは絶対に実行されません。if (...) { continue; total += n; } の total += n は デッドコード です。配置場所に注意しましょう
break continue が if の外で書かれている — break や continue は必ず条件と組み合わせて使います。for (...) { break; } のように無条件に書くと、1 回目で即終了するだけで意味がありません

break や continue を多用するとコードが追いづらくなる、という意見もあります。とはいえ「最初に条件で離脱する」「例外ケースを先に弾く」スタイルは、深いネストを避けて読みやすいコードを書くのに役立ちます。乱用は禁物ですが、適切な場所で使うのは大切なスキルです。

もうひとつ、switch 文の break と for の break は 同じキーワード です。switch の break は「次の case に流れない」ためのもので、for の break は「ループを抜ける」ためのもの、と動作主体が違うだけです。覚えやすいですね。

やってみよう

それでは今回の課題に取り組みましょう。やることは次の通りです。

firstNegativeIndex(arr) 関数の中身を埋める
配列 arr を頭から走査し、最初に見つかった負の数のインデックス を返す
負の数が見つかったら break でループを抜けて、それ以上探さない
配列に負の数が 1 つもなければ -1 を返す

ヒントとして、for (let i = 0; i < arr.length; i++) でインデックス付きでループを回し、arr[i] < 0 なら index = i; break; のように記録してループ脱出。ループ外で return index; するか、最初から let result = -1; を return する形にすると簡潔です。

余裕があれば、continue を使った別の課題も考えてみてください。例えば「配列の中の偶数だけ合計する」「null をスキップしてカウントする」のような問題は continue の練習に最適です。

この先のレッスンでは、入れ子のループ (二重 for) や素数列挙といった応用に進んでいきます。break continue はネストしたループの制御でも頻出するので、しっかり手に馴染ませましょう。

よくある質問

Q. ブラウザと Node.js で動作は変わりますか？

A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。

Q. ES6 以降の新機能は使っても大丈夫ですか？

A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。

Q. TypeScript に進む価値はありますか？

A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。

次のレッスン

次は 入れ子のループで掛算表を作る で、ループを途中で抜ける break と、次の回へスキップする continue を学び、条件で離脱する関数を書こうを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

break/continue の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. break/continue とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

break と continue でループを制御する

break と continue はループの流れを変える 2 つの命令

break で条件を満たしたら抜ける

continue で今の回をスキップする

break と continue を見比べる

実行フローを図で追ってみる

よくある間違い

やってみよう

よくある質問

Q. ブラウザと Node.js で動作は変わりますか？

Q. ES6 以降の新機能は使っても大丈夫ですか？

Q. TypeScript に進む価値はありますか？

次のレッスン

要件

入出力例

ヒント

メモ