JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptのcontinueステートメントの使い方を解説

continueステートメントとは

JavaScriptのcontinueステートメントは、ループ処理の中で特定の条件が満たされた場合に、その回の処理（イテレーション）をスキップし、次の反復へ処理を移すために使用されます。

breakステートメントがループ自体を抜けるのに対し、continueはあくまで「その回だけ」を飛ばしてループを継続する点が特徴です。この仕組みにより、不要なデータを除外しながら効率的に繰り返し処理を行うことができます。

continueステートメントの実装例

以下は、1から30までの数値の中から偶数のみを出力するサンプルコードです。奇数の場合にcontinueを使って処理をスキップしています。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>Continue statement in JavaScript</h1>
<div class="result"></div><br />
<button class="Btn">Click Here</button>
<h3>Click on the above button to print even numbers from 1 to 30</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        for (let i = 1; i < 30; i++) {
            if (i % 2 !== 0) {
                continue;
            }
            resEle.innerHTML += i + " ";
        }
    });
</script>
</body>
</html>

コードの解説

  • ボタンがクリックされると、for文によって変数 i を1から30未満まで繰り返し増加させます。
  • i % 2 !== 0 の条件で、i を2で割った余りが0でない場合（つまり奇数の場合）に continue が実行されます。
  • continue が実行されると、それ以降の resEle.innerHTML += ... の処理は行われず、次のループに移ります。
  • 結果として、偶数だけが画面に出力される仕組みです。

実行結果

ページを開いた直後の表示：

【初心者向け】JavaScriptのcontinueステートメントの使い方を解説

「Click Here」ボタンをクリックした後の表示：

【初心者向け】JavaScriptのcontinueステートメントの使い方を解説

ボタンをクリックすると、1〜30の範囲内の偶数（2、4、6、…、28）だけが出力領域に表示されます。奇数はcontinueステートメントによってスキップされていることが確認できます。

まとめ

continueステートメントを使うことで、条件に合致するケースだけを柔軟に除外できます。breakとの違いを理解し、用途に応じて使い分けることで、より読みやすく効率的なループ処理を書けるようになります。

  1. JavaScriptのwithステートメントとは？用途と使い方をわかりやすく解説

    JavaScriptのwithステートメントは、特定のプロパティに対してデフォルトのオブジェクトを指定し、冗長になりがちなオブジェクト参照の記述を省略するための構文です。withブロック内で指定したオブジェクトは、スコープチェーンの先頭に追加されるため、そのプロパティ名だけで直接アクセスできるようになります。 基本的な動作 通常、オブジェクトのプロパティにアクセスするには、毎回オブジェクト名を明示する必要があります。しかし、withステートメントを使えば、以下のようにコードを簡潔に書けます。 オブジェクト名の繰り返し記述を省略できる 同じオブジェクトの複数のプロパティへ短くアクセスできる 指

  2. JavaScriptのdebuggerステートメントの使い方を徹底解説

    JavaScriptのdebuggerステートメントは、コード内にブレークポイントを設定するための構文です。実行中のコードがdebuggerステートメントに到達すると、その時点で処理が一時停止し、開発者ツールのデバッガーが利用可能であれば自動的にデバッガー機能が呼び出されます。 debuggerステートメントの基本動作 debuggerステートメントは、以下のような場面で特に役立ちます。 コードの特定の箇所で処理を止めて、変数の値を確認したいとき ループ処理の各ステップを詳細に追跡したいとき 複雑なロジックの不具合原因を特定したいとき なお、ブラウザの開発者ツール（DevTools）が開い