JavaScriptのループ制御：breakとcontinueの違い

この記事では、

• JavaScriptでのループ処理の中断方法を詳しく知りたい
• break文とcontinue文の違いについて理解したい
• for文やwhile文でのbreak文の使い方を具体的に学びたい
• switch文内でbreak文を使う理由とは？
• 実践的なコード例を見て、自分のコードに活かしたい

という悩みを抱えている向けに、

• ループからの脱出と次のループのスキップの基礎
• break文とcontinue文の違いと使い分け
• 実践例を交えた効率的なループ制御の方法

について解説していきたいと思います。

JavaScriptでループ制御を行う：break文とcontinue文の基礎

break文とは：ループからの脱出

JavaScriptで、ある条件を満たした時にループ処理から抜け出すために用いられるのがbreak文です。ループ処理とは、同じ操作を繰り返し実行することを指しますが、無限に続けるわけにもいきません。そこで、特定の条件下でループを終了させる必要があるのです。

for (let i = 0; i < 10; i++) {
    if (i === 5) {
         break; // iが5になった瞬間、ループから脱出します。
    }
    console.log(i);
}

実行結果:

0
1
2
3
4

このコードでは、iが5になると、break文によりforループが中断されます。結果、5以降の数字は出力されません。

ループ処理はまだ残っていますが、それらの処理を中断して即座にループ終了後の処理を実行できるというわけです。

continue文とは：次のループへのスキップ

一方、continue文は現在のループ処理をスキップして、次のループ処理を続行します。特定の条件下でループの残りの部分をスキップしたい場合に使用されます。

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        continue; // iが5の場合、このループの残りの処理をスキップし、次のループへ進みます。
    }
    console.log(i);
}

実行結果:

0
1
2
3
4
6
7
8
9

この場合、iが5のときにcontinue文が実行されるため、5が出力されずに次のループへと進みます。

break vs continue：違いと使い分け

break文とcontinue文の主な違いは、breakがループ処理から完全に抜け出し、continueが現在の繰り返し処理をスキップして次の繰り返し処理を行う点にあります。使い分けは、ループを完全に終了させたいのか、特定の条件だけを除外してループを継続したいのかに応じて決まります。

以下のサンプルコードでは、1から10までの数値を処理しています。continueを使って偶数の場合はスキップしている点、breakを使って7の場合はループを終了している点に注目してください。

// 1から10までの数値を処理するループ
for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        // 偶数の場合はスキップして次の繰り返しへ
        continue;
    }
    if (i === 7) {
        // 7の場合はループ終了
        break;
    }
    console.log(i);
}

実行結果：

1
3
5

このように、breakとcontinueを適切に使い分けることで、ループ制御を効果的に行えます。

JavaScriptのfor文とbreak文

for文におけるbreakの活用法

JavaScriptでよく利用されるfor文は、決まった回数の処理を繰り返す時に非常に便利です。しかし、ある条件が満たされた時点でループを終了させたいケースもあります。そんな時にbreak文を駆使することで、ループを柔軟に制御できます。

例えば、配列の中に特定の要素を探している途中で、見つかったらそこで処理を停止したいとしましょう。

const numbers = [1, 3, 5, 7, 9, 2];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] === 2) {
        console.log('Found it! at index ', i);
        break; // 2が見つかったら、ループから脱出します。
    }
}

実行結果:

Found it! at index 5

このサンプルでは、配列の各要素を順番にチェックし、2が見つかった瞬間にforループから抜け出しています。これにより、無駄な処理を省き、プログラムの効率を上げることができます。

またbreak文を使えば、ユーザー入力に応じて処理を中止したい場合やエラーが発生した時などにも柔軟に対応できるようになります。

for文でbreak文を使用する時のポイントは、break文が含まれる条件分岐（if文など）が正しく機能するようにすることです。また、break文を使いすぎるとコードの可読性が落ちる場合があるので、使用は適切な場所に限るべきです。

break文の応用：ラベルとの組み合わせ

ラベルを使用したbreak文

JavaScriptでは、ラベル（label）を使って特定のブロックに名前を付けることができます。これをbreak文と組み合わせると、ネストされたループの中から特定の位置で脱出する際に非常に便利です。

outerLoop: for (let i = 0; i < 3; i++) {
    innerLoop: for (let j = 0; j < 3; j++) {
        if (j === 1 && i === 1) {
            break outerLoop; // outerLoopと名付けられた外側のループから脱出します。
        }
        console.log(`i=${i}, j=${j}`);
    }
}

実行結果:

i=0, j=0
i=0, j=1
i=0, j=2
i=1, j=0

この例では、outerLoopラベルがついた外側のforループと、innerLoopラベルがついた内側のforループを使っています。if文の条件によって、iが1でjが1の時に外側のループから脱出しています。ラベルを用いたbreak文は、特に多重ループを扱う際にその真価を発揮します。

ラベル付きループにおけるbreak文使用の注意点

ラベルを付けたbreak文を使う際の注意点は、ラベルが指すブロックが明確であることを確認することです。適切にラベルを使わないと、コードの可読性が下がり、意図しない挙動を引き起こす可能性があります。また、break文だけではなくcontinue文にもラベルを使うことができますが、その使い方はまた異なります。

上記のサンプルコードでは、outerLoopというラベルをつけたループからbreakしています。これにより、特定の条件下で即座に外側のループを終了させることが可能になり、コードの実行効率を高めることができます。

ラベルを使用することは一般的ではなく、多用することは推奨されませんが、複雑なループの中で効率的に処理を行うためには避けられない場合もあります。そのため、ラベルとbreak文の組み合わせは、適切に使用すれば強力なツールになり得ます。

なお、ラベルを利用できるのは break 文と continue 文だけなので、 for 文や while 文などの繰り返し処理や switch 文で使用することになります。

JavaScriptのwhile文でのbreak使用法

while文でのbreakによるループ終了

JavaScriptのwhile文は、指定された条件がtrueである限りループ処理を続ける構文です。この挙動は非常に便利ですが、条件がいつまでもtrueのままだと無限ループに陥りプログラムが停止してしまう恐れがあります。こうした場合にループ処理を適切に終了させるための一つの手段が、break文の利用です。

let i = 0;
while (i < 10) {
    if (i === 5) {
        break; // iが5になったら、ループから脱出します。
    }
    console.log(i);
    i++;
}

実行結果:

0
1
2
3
4

このコードでは、iが5に達するとbreak文が実行され、whileループから抜け出しています。この結果、5以降の数字は出力されません。

使い方のポイント

while文におけるbreak文の活用は、主に条件式がtrueのままとなってしまう可能性がある無限ループを防止するのに役立ちます。特に、外部からのユーザー入力やデータの変更など、実行時に条件が変わる可能性のある場面で重宝します。

ただし、break文を使うことでループを強制終了できる一方で、過度に依存するとコードの読みやすさが損なわれる可能性がある点には注意が必要です。特に、ループ内で複数のbreak文が用いられる場合、プログラムのフローを追いづらくなることがあります。

whileループはforループと同様に、処理を繰り返す基本的な構造です。break文を適切に使うことで、これらのループを効率的かつ安全に制御することが可能となります。

switch文内でのbreak文の使用

switch文とbreak文：ケースの終了

JavaScriptのswitch文は、複数の条件分岐を一つの構文で扱える便利な制御構造です。特定の値や式の結果に基づいて、いくつかのケース(case)のブロックから一つを実行する仕組みになっています。ここで、break文が非常に重要な役割を果たします。それは、特定のケースの処理が完了した後に、switch文を脱出するためです。

let fruit = 'apple';

switch (fruit) {
    case 'banana':
        console.log('Yellow and bendy!');
        break;
    case 'apple':
        console.log('Round and crunchy!');
        break;
    case 'orange':
        console.log('Juicy citrus!');
        break;
    // デフォルトのケース
    default:
        console.log('Unknown fruit.');
}

実行結果:

Round and crunchy!

この例では、fruit変数の値が'apple'であるため、'Round and crunchy!'が出力され、その後にbreak文が実行されることでswitch文から抜け出しています。break文がなければ、次のケースの処理に進んでしまいます。

使い方のポイント

JavaScriptのswitch文におけるcaseには、分岐を抜けさせる仕組みがありません。分岐を抜けるためには、breakで抜けることを明示する必要があります。breakを書かない場合、次の分岐も実行されてしまいます。このような仕様を「フォールスルー(fall through)」と言います。

switch文においてbreak文の使用を忘れると、フォールスルーによってプログラムは意図しない動作をする可能性があり、多くの場合はバグの原因となり得ます。

したがって、switch文を使用する際は、各ケースにbreak文を忘れずに記述することが非常に重要です。ただし、最後のケースやdefaultケースの後には、break文は必須ではありませんが、慣習として書くこともあります。

総じて、switch文内でのbreak文の使用は、コードの流れを明確に制御し、プログラムの意図した動作を確実にするために不可欠です。適切に使用することで、コードの可読性と保守性を高めることができます。