JavaScript【 continue 】 ～ 処理をスキップする

for文やwhile文などのループ処理の中で、break文を使用すると ループ処理から抜け出すことができます。
これに対して、continue文を使用すると、ループ自体は継続しつつ、ある場合のみ処理をパスする、ということができます。
今回は、このようなcontinue文を紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. continue文とは

continue文は、以降の処理をスキップして、次のループ処理を行う際に使われるキーワードです。

break文は、switch文など、ループ処理以外でも使用しますが、continue文は、ループ処理の中でのみ使用します。

ループ処理の中にcontinue文を記述すると、continue文が読み込まれた時点で、それ以降の処理を行わず、次のループ処理に移ります。

ある条件に合致したら処理をスキップさせたい場合に使用するので、通常は、if文の中にcontinue文を記述します。

continue文は、次のように記述します。

while ( 条件式 ) {

　　if ( 処理をスキップしたい条件式 ) {
　　　　continue;
　　}

　　繰り返し行う処理
}

if文の中のcontinue文が実行されると、「繰り返し行う処理」がスキップされ、while文の次の「条件式」の評価が行われます。

▲目次へ戻る

2. continue文の使い方

次のサンプルは、入力された2つの数値A、Bを利用して、1からAまでの数字のうち、Bの倍数以外の数字を出力するプログラムです。

A及びBに数字を入力してOKボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function loop() {
    let num = document.getElementById("dat").value;
    let num2 = document.getElementById("dat2").value;
    document.getElementById("dat3").value = "";

    for (let i = 1; i <= num; i++) {

        if (i % num2 == 0){
            continue;
        }
        document.getElementById("dat3").value += i + "　";
    }
}
</script>

<div style="background-color : #CCC; padding : 20px;">
　1からAまでの数字のうち、Bの倍数以外を出力します。
　数値を入力してＯＫボタンをクリックして下さい！　
    <form>
        <div style="display:inline-flex">　
          　<label>Ａ：</label>
          　<input type="text" id="dat" size="10">　
          　<label>Ｂ：</label>
          　<input type="text" id="dat2" size="10">　　
          　<input type="button" value="OK" onClick="loop()">
        </div>
　
        <input type="text" id="dat3" placeholder="こちらに出力されます">
    </form>
</div>

　
次のフローのようなイメージです。
　

　　　
上のサンプルコードでは、for文でループする処理を、loop()というユーザ定義関数に記述しています。

そして、OKボタンをクリックすると、イベントハンドラのonClickによって、loop()が呼び出され、for文が実行される仕組みです。

for文に入る前に、入力データの取得と変数の初期化を行います。

    let num = document.getElementById("dat");
    let num2 = document.getElementById("dat2");
    document.getElementById("dat3").value = "";

入力データは、テキストボックスのID名を指定して、「document.getElementById(“ID名”).value」で取得できます。
これを、変数num、num2に代入します。

実行結果として表示する予定のテキストボックスの内容も、「document.getElementById(“ID名”).value = “”」として初期化します。
この処理をしないと、while文の中で、記号「+=」を使用して、このテキストボックスの内容をどんどん足していく処理をしているため、一度実行した後、二度目や三度目に実行する場合に、過去の表示内容が残ったまま、新しいデータが足されて表示されてしまいます。

for文の仕組みについては、for文の使い方をご参照下さい。

for文の中で、Bの倍数以外の数字を1からAまで出力します。
1から始まるカウンタ i とBの値が入っている num2 を使って、「i % num2 == 0」の場合に i が Bの倍数となるので、continue文を記述して、出力処理をスキップします。

    for (let i = 1; i <= num; i++) {

        if (i % num2 == 0){
            continue;
        }
        document.getElementById("dat3").value += i + "　";
    }

continue文は、それ以降のループ内処理をスキップするため、上のサンプルでは「document.getElementById(“dat3”).value += i + “　”;」が実行されずに次のfor文に進みます。

ですので、ある条件下でスキップしたい処理以外に 必ず実行したい処理がある場合は、その処理をcontinue文の上に記述します。

▲目次へ戻る