JavaScriptのbreak文・continue文の使い方と違いを理解しよう

1. break文とは？ループを途中で止める方法

1. break文とは？ループを途中で止める方法

break文は、ループの中で「もう終わり！」というときに使います。たとえば、「何か条件に当てはまったら、それ以上繰り返さずに終わりたい」ときに便利です。

「ループ（loop）」とは、同じ処理をくり返すための仕組みです。

2. break文の使い方（例：指定した数を見つけたら止める）

2. break文の使い方（例：指定した数を見つけたら止める）

次のようなコードを見てみましょう：

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

この場合、iが5になったらbreakでループを強制終了します。

1
2
3
4

3. continue文とは？当日の処理だけスキップする方法

3. continue文とは？当日の処理だけスキップする方法

continue文は「今のくり返しだけ飛ばして、次の回に進んで！」というときに使います。ループは続けたいけど、ある条件のときだけ処理をやめたいときに便利です。

4. continue文の使い方（例：偶数だけ表示する）

4. continue文の使い方（例：偶数だけ表示する）

たとえば、1～10までの数字から偶数だけ表示したいときは、次のように書きます：

for (let i = 1; i <= 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(i);
}

2
4
6
8
10

i % 2 !== 0は「2で割った余りが0ではない（奇数）」という条件で、奇数のときにcontinueでスキップしています。

5. breakとcontinueの違いを表で理解

5. breakとcontinueの違いを表で理解

6. break・continueはどこで使うと便利？

6. break・continueはどこで使うと便利？

• break：早めに終わらせたいとき（例：目的のデータを見つけたらそれ以上調べない）
• continue：条件に当てはまるときだけスキップしたいとき（例：エラーを無視して次に進む）

たとえば、配列の中に特定の値があるか調べて見つかったら終了する場合はbreakが向いています。

7. breakとcontinueを使った実用例

7. breakとcontinueを使った実用例

次のコードは、配列の中に「NG」という文字があったら止める例と、特定文字だけ飛ばす例です。

const arr = ["OK", "NG", "OK", "SKIP", "OK"];
for (let item of arr) {
  if (item === "NG") {
    break;
  }
  if (item === "SKIP") {
    continue;
  }
  console.log(item);
}

OK

「NG」が見つかるとbreakでループ終了。「SKIP」はスキップされて、表示はされません。

8. 注意すべきポイント

8. 注意すべきポイント

• ループの中にbreakやcontinueを書くときは、意図したとおりに動くかよくテストしましょう。
• バグが起きやすいので、どこで止まるか・飛ばすかを明確にコメントで説明しておくのがおすすめです。

9. まとめ的に重要な使い分け

9. まとめ的に重要な使い分け

• ループを途中で終了したいなら → break
• 今だけ飛ばして、次の回に進むなら → continue

この違いをしっかり理解すると、処理の流れをコントロールしやすくなります。

まとめ

まとめ

ここまでJavaScriptにおけるループ制御の要である「break文」と「continue文」について詳しく解説してきました。プログラミングにおいて、繰り返し処理（ループ）は非常に強力な武器ですが、ただ回すだけでは不十分な場面が多々あります。特定のデータを見つけた瞬間に処理を切り上げたり、特定の条件に合致する場合だけ処理をバイパスしたりといった「制御」ができるようになることで、プログラムの実行効率は格段に向上します。

改めて整理すると、break文は「ループ自体の強制終了」を意味し、continue文は「現在のステップのスキップと次への移行」を意味します。この違いを明確に区別して使い分けることが、バグの少ない綺麗なコードを書くための第一歩です。

応用編：より実践的な活用方法

実際の現場では、多重ループ（ループの中にループがある状態）や、複雑な配列データのフィルタリングなどでこれらの制御文が頻繁に使われます。例えば、大量のユーザーデータの中から特定のIDを持つユーザーを検索する場合、目的の人物が見つかった後に残りの数千人をループで回し続けるのはリソースの無駄遣いです。そのような時にbreak文を活用することで、サーバーの負荷を軽減し、ユーザーへのレスポンス速度を早めることができます。

また、TypeScriptなどの静的型付け言語においても、基本的な制御構文の使い方はJavaScriptと全く同じです。型定義を意識しつつ、条件分岐（if文）と組み合わせることで、より堅牢なプログラムを構築することが可能になります。

TypeScriptでの記述例

JavaScriptだけでなく、現代の開発で主流となっているTypeScriptでの記述例も見てみましょう。基本的なロジックは変わりませんが、型を指定することで意図しないエラーを防ぐことができます。

const scores: number[] = [45, 78, 92, 100, 55, 88];
const passThreshold: number = 80;

console.log("合格者が1人見つかるまでループします。");

for (const score of scores) {
  if (score >= passThreshold) {
    console.log(`合格点 ${score} を発見しました。探索を終了します。`);
    break;
  }
  console.log(`点数: ${score} ... 次を確認します。`);
}

上記の実行結果は以下のようになります。

合格者が1人見つかるまでループします。
点数: 45 ... 次を確認します。
点数: 78 ... 次を確認します。
合格点 92 を発見しました。探索を終了します。

検索エンジン最適化（SEO）の視点から

JavaScriptの学習において「繰り返し処理」と「条件分岐」の組み合わせは、初心者の方が最初につまずきやすいポイントの一つです。そのため、本記事では図解や具体的なサンプルコードを多用し、直感的に理解できるように工夫しました。検索キーワードとして需要の高い「JavaScript ループ 中断」「JS continue 使い方」「ループ スキップ 方法」といったニーズに応える内容を網羅しています。

これからWebエンジニアを目指す方にとって、制御構文のマスターは避けて通れません。最初は「どっちがどっちだっけ？」と迷うこともあるかもしれませんが、実際に手を動かしてコンソールにログを出力してみることで、自然と身についていくはずです。この記事が、皆さんのコーディングスキル向上の一助となれば幸いです。