Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript
応用編

トップページ
JavaScript応用編 - continue文とbreak文について

continue文とbreak文について

みなさまどうも。

初めましての方は初めまして、どこかの記事でお会いした方はまたお会い出来て大変嬉しゅうございます。こちらはJavaScriptの応用編のコーナーでございます。ようこそおいで下さいました。

さて、こちらのコーナーではこれまで紹介しきれなかったJavaScriptのお話を色々と記載していきたいと思います。尚、簡単なものから難しいものまで幅広く紹介して行こうと思いますのでHTML、CSS、JavaScriptの基本あたりは抑えておくようにしたほうが良いかもしれません。ちんぷんかんぷんになっては面白くないので要注意です。

「当サイトで勉強したいぜぇ」っていう粋な方は『HTML入門編』、『CSS入門編』、『CSS中級編』、『JavaScript入門編』、『JavaScript中級編』あたりを読み進めて頂ければ良いかと存じます。特に『JavaScript入門編』と『JavaScript中級編』は必ず抑えておくようにして下さい。

ではやっていきましょう。今回は『continue文』(コンティニューぶん)と『break文』(ブレイクぶん)です。これまでJavaScriptでいくつかループ処理を紹介しましたがそれの補足、といった感じですね。

まずは『continue文』の概要と使い方からです。こちらはループ処理の中に『continue』と記載することで今実行しているループ処理をスキップしてくれる感じになります。ちょっとサンプルをみてみましょう。

for(var i = 0; i <= 10; ++i){
    if(i === 3) continue;

    console.log(i);
}

上記のサンプルでは「変数『i』の数値が『3』だった場合に『continue』を実行して」って処理になってますね。これを実行するとこうなります。

数値の『3』が出力されていませんね。ちゃんと数値の『3』のときだけ処理をスキップしてくれているようです。これが『continue文』の動作になります。上記のサンプルでは『for文』を使用しましたが、『for...in文』、『while文』、『do...while文』など他のループ処理でも使用することができます。

// 『for...in文』の場合。
var x = {
    a: 0,
    b: 1,
    c: 2
};
for(var el in x){
    if(x[el] === 1) continue; // x[el]が数値『1』だった場合に処理をスキップします。
    console.log(x[el]);
}

// 『while文』の場合。
var y = 0;
while(y < 10){
    ++y;
    if(y % 3 === 0) continue; // 変数『y』が3の倍数だった場合に処理をスキップします。
    console.log(y);
}

// 『do...while文』の場合。
var z = 0;
do{
    ++z;
    if(z % 4 === 0) continue; // 変数『y』が4の倍数だった場合に処理をスキップします。
    console.log(z);
}while(z < 10);

ここまでは大丈夫そうでしょうか。

さて、ちょっとした注意点でございますが『continue文』はループ処理の中で使用される、という仕様になっているのでループ処理じゃないところに『continue』と記述するとさくっとエラーになります。

continue; // ループ処理じゃないところに『continue』と記述しちゃダメです。

まあ、すぐに気付けるところなので特に警戒する必要はありませんが一応覚えておくようにして下さい。

あと、ループ処理によって『continue』と記述したあとに処理が開始される箇所が若干違ったりしますのでこちらも注意です。一応確認しておきましょう。

『while文』と『do...while文』の場合は条件式、つまり『()』の中の再テストから開始されます。

var i = 0;
while(++i < 10){
    continue;
}
console.log(i); // 10と出力されます。

var j = 0;
do{
    continue;
}while(++j < 10);
console.log(j); // 10と出力されます。

上記のサンプルはループの1行目に『continue』と記述していますので、ループ処理はすべてかっ飛ばされている形になってます。しかし、変数『i』と変数『j』の値が数値『10』になっているので条件式は毎回テスト(評価)されている、ということが確認できるかと思います。

続いて『for文』です。『for文』の場合は更新式(更新部分)から開始されます。以下のサンプルだと『++i』のところになりますね。

for(var i = 0; i < 10; ++i){
    // ここに処理かくよー
}

ではちょっと実験してみましょう。先ほどと同じように1行目に『continue』を記述してみたので確認してみて下さい。

for(var i = 0; i < 10; ++i){
    continue;
}
console.log(i); // 10と出力されます。

これを実行すると『10』と出力されますので更新式から処理が始まっているのが確認できたかと思います。上記のサンプルだと『++i』が行われた後に『i < 10』がテストされてまたループ処理再開、という流れですね。

最後に『for...in文』ですが、これは単純に指定されたオブジェクトの次のプロパティから処理が始まる感じなので特に意識しなくても大丈夫な気がします。

では続きまして『break文』の使い方です。当サイトのこれまでの記事ですと『switch文』の解説の時に『break文』が登場しましたね。JavaScriptの『break文』は『switch文』だけじゃなく他のループ処理でも使用できますので処理を抜けたかったら『break』と記述すればOKです。『continue』は今実行しているループ処理をスキップしてくれる感じでしたが『break』の場合はループ処理そのものをストップさせる感じになりますね。ではサンプルをみてみましょう。

for(var i = 0; i <= 10; ++i){
    break;
    console.log(i);
}

んでもって実行させてみましょう。

はい、まったく処理が行われていないようですね。

上記の『for文』は変数『i』が数値『0』から数値『10』となっている間、つまり11回実行されるはずなんですがループ処理の1行目にどどんと『break』が記述されているため1回も実行されていないようです。これが『break文』の動作になりますね。『break』は『continue』と同じように『for文』以外のループ処理でも記述することが可能です。

// 『for...in文』の場合。
var x = {
    a: 0,
    b: 1,
    c: 2
};
for(var el in x){
    if(x[el] > 1) break; // x[el]が数値『1』より大きくなった場合にループ処理を抜けます。
    console.log(x[el]);
}

// 『while文』の場合。
var y = 0;
while(y < 10){
    ++y;
    if(y > 3) break; // 変数『y』が数値『3』より大きくなった場合にループ処理を抜けます。
    console.log(y);
}

// 『do...while文』の場合。
var z = 0;
do{
    ++z;
    if(z > 4) break; // 変数『y』が数値『4』より大きくなった場合にループ処理を抜けます。
    console.log(z);
}while(z < 10);

そして『continue文』と同じく、『switch文』やループ処理じゃないところに『break』と記述するとさくっとエラーになるので注意しましょう。