JavaScriptのbreak文を初心者向けにやさしく解説
夜にコード書いてると、ループが止まらなくて「あれ？」ってなること、ありますよね。breakは「ここでやめる！」をはっきり伝えるためのスイッチです。動きが見える具体例で、丁寧にかみ砕いていきます。
break文の役割と基本ルール
- 役割: ループやswitchの処理を「途中で終了」させる。
- 書き方:
break;の一行だけ。後ろに何も書かない。 - 効く場所:
for / while / do...while / for...in / for...of / switch - よくある誤解:
ifを抜けるためのものではない。ifの中で書いても「外側のループ」を抜ける。
まずは直感：止めるタイミングを作る
例1：for文で一定条件で止める
// 1, 2, 4, 8...と2倍していき、10を超えたら止める
let num = 1;
for (let i = 0; i < 10; i++) {
console.log(num);
num *= 2;
if (num > 10) { // “超えたら終了”という出口を用意する
console.log("10を超えたのでループを抜けます");
break; // ここでforループが終了
}
}
console.log("end");
- ポイント:
- 出口の合図:
if (条件) { break; }の形が定番。 - 無駄を減らす: 条件を満たしたら即終了。残りの繰り返しは実行しない。
- 出口の合図:
無限ループの「緊急停止ボタン」
例2：while(true)でも安全に止める
// サイコロを振り、6が出たら終了
while (true) {
const dice = Math.floor(Math.random() * 6) + 1;
console.log(dice);
if (dice === 6) {
console.log("6が出たので終了！");
break; // ここがないと永遠に回る
}
}
console.log("end");
- ポイント:
- 安全装置: 無限ループは便利だけど危険。
breakが停止ボタンになる。 - 条件を一箇所に: 「続ける理由」より「止める理由」を書くと理解しやすい。
- 安全装置: 無限ループは便利だけど危険。
実用例で体感する
例3：検索で見つかったら打ち切る
const users = ["sato", "suzuki", "tanaka", "yamada"];
const target = "tanaka";
let found = false;
for (let i = 0; i < users.length; i++) {
const name = users[i];
console.log("チェック中:", name);
if (name === target) {
found = true;
console.log("見つけた！", name);
break; // もう探す必要なし
}
}
if (!found) {
console.log("見つかりませんでした");
}
- ポイント:
- 最初に見つけた時点で終了: 速度と無駄の削減。
- フラグ変数:
foundのような状態を残しておくと後で判定できる。
例4：for…ofで途中停止する
const nums = [3, 5, 8, 9, 12];
for (const n of nums) {
if (n % 2 === 0) {
console.log("最初の偶数:", n);
break; // 最初の偶数を見つけたら止める
}
}
- ポイント:
- for…ofでも同じ: コレクションを順に見て、条件一致の瞬間に止める。
よくあるつまずきとコツ
- breakは一番内側のループだけを止める:
- 注意: 二重ループで内側に
breakを書くと、止まるのは内側だけ。外側は続く。
- 注意: 二重ループで内側に
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 5; j++) {
if (j === 2) break; // 内側だけ終了
console.log(i, j);
}
}
- ifから抜けるわけではない:
- 理解のコツ:
ifは分岐で、breakは「その時点で包んでいるループ」を終わらせる。
- 理解のコツ:
- 読みやすさを意識する:
- 出口は手前に: 早めの
returnやbreakで「異常・終了」は先に書くと流れが追いやすい。 - ネストを浅く: 条件を満たしたらすぐ
breakで階層を深くしない。
- 出口は手前に: 早めの
練習問題
- 課題1: 1から100まで足し合わせる。合計が200を超えたらループを終了し、合計と最後に足した数を表示。
let sum = 0;
let last = 0;
for (let i = 1; i <= 100; i++) {
sum += i;
last = i;
if (sum > 200) {
break;
}
}
console.log("合計:", sum, "最後に足した数:", last);
- 課題2: ユーザー入力の配列から、最初に空文字（””）が見つかった位置で処理を止め、「不備あり」と表示。
const inputs = ["ok", "ok", "", "ok"];
let ok = true;
for (let i = 0; i < inputs.length; i++) {
if (inputs[i] === "") {
ok = false;
console.log("不備あり。位置:", i);
break;
}
}
if (ok) console.log("すべてOK");
- 課題3: 乱数で0〜9を生成し続け、7が出たら止める。何回回したかも表示。
let count = 0;
while (true) {
const n = Math.floor(Math.random() * 10);
count++;
if (n === 7) {
console.log("7で停止。試行回数:", count);
break;
}
}
まとめと次の一歩
- 核心: breakは「今のループを即終了」するための明確なスイッチ。無限ループの安全装置、検索の打ち切り、早期終了に必須。
- 次の一歩: 似た仲間の
continue（「この周だけスキップ」）も覚えると、ループの制御が一気に上手くなる。希望があれば、続けてcontinueも丁寧に解説します。