閉じる

JavaScriptのループを抜ける方法：breakとcontinueの正しい使い分け

広告

JavaScriptを扱う開発者にとって、配列やオブジェクトを効率的に処理するためのループ制御は避けて通れないスキルです。

大量のデータを扱う現代のWebアプリケーションでは、不要な処理をスキップしたり、目的のデータが見つかった時点で処理を切り上げたりすることが、パフォーマンス向上に直結します。

この記事では、JavaScriptにおけるbreak文とcontinue文の基本的な使い方から、実務で役立つ応用テクニックまでを詳しく解説します。

正しくループを制御する方法をマスターすることで、よりクリーンで効率的なコードが書けるようになるでしょう。

目次 [ close ]
  1. JavaScriptにおけるループ制御の基本概念
  2. break文によるループの強制終了
    1. forループでのbreak文の使用例
    2. whileループにおける無限ループの防止
  3. continue文による反復のスキップ
    1. continue文の具体的なコード例
  4. breakとcontinueの使い分け表
  5. 高次関数（forEach）における注意点
    1. forEachでループを抜けたい場合の解決策
  6. ネストされたループとラベル付き文
    1. ラベルを使用した複数ループの脱出
  7. 実務でのベストプラクティス
  8. まとめ

JavaScriptにおけるループ制御の基本概念

ループ処理とは、特定の条件が満たされるまで、あるいはデータの末尾に達するまで、同じ処理を繰り返し実行する仕組みのことです。

しかし、すべての要素を最後まで処理する必要がないケースや、特定の条件に合致する場合のみ処理を飛ばしたいケースが多々あります。

そこで重要になるのが、ループの流れを動的に変更するための制御文です。

JavaScriptには、主に「ループを即座に終了させる」ための制御文と、「現在の反復をスキップして次へ進む」ための制御文が用意されています。

これらを適切に使い分けることで、プログラムの実行効率を高めるだけでなく、ロジックをより明快に表現することが可能になります。

break文によるループの強制終了

break文は、ループの実行をその場で完全に中断し、ループの外側の処理へ移行させるために使用されます。

例えば、大量のリストから特定のIDを持つユーザーを検索する場合、対象が見つかった後もループを続けるのはコンピュータ資源の無駄です。

このようなシーンでbreakを使用すると、目的を果たした瞬間にループを抜けることができます。

forループでのbreak文の使用例

最も一般的なforループにおけるbreakの挙動を確認してみましょう。

JavaScript
// 数値の配列から「5」を見つけたらループを終了する
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (let i = 0; i < numbers.length; i++) {
  console.log("現在の値:", numbers[i]);

  if (numbers[i] === 5) {
    console.log("5が見つかったのでループを抜けます。");
    break; // ここでループが終了
  }
}

console.log("ループ後の処理です。");
実行結果
現在の値: 1
現在の値: 2
現在の値: 3
現在の値: 4
現在の値: 5
5が見つかったのでループを抜けます。
ループ後の処理です。

上記のコードでは、配列の要素が「5」になった時点でbreakが実行され、それ以降の数値（6〜10）の処理は行われません。

whileループにおける無限ループの防止

while文やdo...while文においても、breakは非常に重要な役割を果たします。

特に、終了条件が動的に決まる場合や、あえてtrueを指定して無限ループを作成し、内部の複雑な条件分岐で終了判定を行う際によく利用されます。

JavaScript
let count = 0;

while (true) {
  let randomValue = Math.floor(Math.random() * 10);
  console.log("生成された値:", randomValue);
  
  if (randomValue === 7) {
    console.log("ラッキーセブンが出たので終了します。");
    break;
  }
  
  count++;
  if (count > 20) {
    console.log("回数制限により終了します。");
    break;
  }
}

このように、特定のイベントが発生した際に安全にループを停止させるためにbreakは欠かせません。

continue文による反復のスキップ

continue文は、ループそのものを終わらせるのではなく、現在の反復処理のみを中断し、次のステップへ強制的に進める役割を持ちます。

例えば、「リストの中から偶数だけを除外して処理したい」といった場合に便利です。

continueが実行されると、その後に記述されているコードは無視され、ループの更新式（i++など）へ制御が移ります。

continue文の具体的なコード例

以下の例では、配列内の奇数のみをコンソールに出力し、偶数の場合は処理をスキップしています。

JavaScript
const dataList = [10, 15, 20, 25, 30, 35];

for (let i = 0; i < dataList.length; i++) {
  // 偶数（2で割り切れる）の場合はスキップ
  if (dataList[i] % 2 === 0) {
    continue;
  }

  // 奇数の場合のみこの行が実行される
  console.log("処理対象の奇数:", dataList[i]);
}
実行結果
処理対象の奇数: 15
処理対象の奇数: 25
処理対象の奇数: 35

breakと異なり、ループ自体は最後まで完走している点に注目してください。

breakとcontinueの使い分け表

どちらを使うべきか迷った際は、以下の比較表を参考にしてください。

機能break文continue文
主な目的ループの即時完全終了現在の処理を飛ばして次へ進む
実行後の動きループブロックの外へ出る次の反復の開始（条件評価へ）
主な用途検索完了、エラー発生時の脱出フィルタリング、特定条件の除外
影響範囲もっとも内側のループ全体現在のループの1ステップ分

高次関数（forEach）における注意点

JavaScriptで配列を扱う際、forEachメソッドを利用する機会は非常に多いでしょう。

しかし、forEachの中ではbreakやcontinueを使用することができないという点に注意が必要です。

もしforEachのコールバック関数内でbreakを記述すると、構文エラー（SyntaxError）が発生します。

forEachでループを抜けたい場合の解決策

「条件を満たしたらループを途中で止めたい」という要件がある場合は、forEachではなく従来のfor...ofループを使用するのが最もスマートです。

JavaScript
// for...of なら break が使える
const items = ["Apple", "Banana", "Cherry", "Durian"];

for (const item of items) {
  if (item === "Cherry") {
    break;
  }
  console.log(item);
}

どうしても配列メソッド形式で書きたい場合は、Array.prototype.some()やArray.prototype.every()の利用を検討してください。

some()は、コールバック関数がtrueを返した時点で繰り返しを終了する特性を持っています。

JavaScript
const values = [1, 2, 3, 4, 5];

values.some((val) => {
  if (val === 3) {
    return true; // これが break の代わりになる
  }
  console.log(val);
  return false;
});

このように、使用する反復構文によって制御方法が異なることを理解しておくことが重要です。

ネストされたループとラベル付き文

二重、三重に重なったループ（入れ子構造）において、内側のループから「外側のループ」を一気に抜けたい場面があります。

通常のbreakでは、直近の（一番内側の）ループしか抜けることができません。

この問題を解決するために、JavaScriptには「ラベル付き文」という機能が存在します。

ラベルを使用した複数ループの脱出

ループの前に名前（ラベル）を付け、break ラベル名と記述することで、指定したループまで一気に脱出できます。

JavaScript
outerLoop: // ラベルを定義
for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`i=${i}, j=${j}`);
    
    if (i === 2 && j === 2) {
      console.log("条件一致：外側のループまで抜けます。");
      break outerLoop; // 指定したラベルのループを終了
    }
  }
}
実行結果
i=1, j=1
i=1, j=2
i=1, j=3
i=2, j=1
i=2, j=2
条件一致：外側のループまで抜けます。

ただし、ラベル付き文を多用するとコードの可読性が低下し、処理の流れを追うのが困難になる（スパゲッティコードの原因になる）可能性があります。

多くの場合は、ループ内のロジックを関数として切り出し、return文を使って関数ごと終了させる方が設計として綺麗になることが多いです。

実務でのベストプラクティス

ループ制御を使いこなす上で、単に文法を知っているだけでなく、どのように書けば「読みやすいか」を考えることが大切です。

例えば、if文の中に長い処理を書くよりも、条件を満たさない場合にcontinueで早めにスキップする（ガード節の考え方）ほうが、ネストが浅くなり見通しが良くなります。

また、複雑な条件でのbreakが頻発する場合は、そのループ自体を別の関数に分離できないか検討してみましょう。

JavaScriptの標準機能であるfind、filter、mapなどの配列メソッドを組み合わせることで、breakやcontinueを直接書かずに済む場面も増えています。

「命令的（どのようにループするか）」な記述から「宣言的（何をしたいか）」な記述へシフトすることも、モダンな開発においては重要な視点です。

まとめ

JavaScriptにおけるループの制御は、プログラムの挙動を最適化するための基本技術です。

break文は処理を完全に終了させ、continue文は特定の処理をスキップして継続させるという明確な違いがあります。

forEachのような高次関数ではこれらの制御文が使えないため、目的に応じてfor...ofやsome、everyを選択する柔軟性が求められます。

また、複雑なネストにはラベル付き文という解決策もありますが、まずは関数の分割やガード節の活用によるコードの整理を優先しましょう。

この記事で紹介したテクニックを駆使して、効率的でメンテナンス性の高いJavaScriptプログラムを作成してください。

URLをコピーしました！