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

JavaScriptのラベル文とは？break・continueでネストしたループを制御する方法

JavaScriptのラベル文（label statement）は、識別子の先頭にラベル名を付けるための構文です。ラベルをbreak文やcontinue文と組み合わせることで、特にネスト（入れ子）構造になったループの流れを、より細かく正確に制御できます。

ラベルの書き方はとてもシンプルで、「識別子＋コロン（:）」を対象の文やコードブロックの直前に置くだけです。この記事では、break文とcontinue文それぞれにラベルを使った2つのサンプルコードを通じて、具体的な使い方を解説します。

例1：break文とラベルを組み合わせる

次のコードでは、外側のforループに「outerloop」、内側のforループに「innerloop」というラベルを付けています。通常のbreakは直近のループしか抜けられませんが、break ラベル名;と書くことで、指定した外側のループまでまとめて脱出できます。

<html>
  <body>
    <script>
      document.write("ループに入ります！<br />");

      outerloop: // これがラベル名
      for (var i = 0; i < 5; i++) {
        document.write("外側のループ: " + i + "<br />");

        innerloop:
        for (var j = 0; j < 5; j++) {
          if (j > 3) break;             // 最も内側のループを抜ける
          if (i == 2) break innerloop;  // 内側のループだけを抜ける
          if (i == 4) break outerloop;  // 外側のループごと抜ける
          document.write("内側のループ: " + j + "<br />");
        }
      }
      document.write("ループを抜けました！<br />");
    </script>
  </body>
</html>

実行結果

ループに入ります！
外側のループ: 0
内側のループ: 0
内側のループ: 1
内側のループ: 2
内側のループ: 3
外側のループ: 1
内側のループ: 0
内側のループ: 1
内側のループ: 2
内側のループ: 3
外側のループ: 2
外側のループ: 3
内側のループ: 0
内側のループ: 1
内側のループ: 2
内側のループ: 3
外側のループ: 4
ループを抜けました！

動作のポイントは次の3つです。

  • j > 3 のとき：ラベルなしのbreakなので、内側のループだけを抜けます。
  • i == 2 のとき：break innerloop;により内側のループが即座に終了するため、「内側のループ」の出力は一切行われません。
  • i == 4 のとき：break outerloop;により、外側のループ全体が終了します。

例2：continue文とラベルを組み合わせる

続いて、continue文にラベルを適用した例です。continue outerloop;と書くと、内側のループの残りの処理をスキップし、外側のループの次の繰り返しに直接進みます。

<html>
  <body>
    <script>
      document.write("ループに入ります！<br />");

      outerloop: // これがラベル名
      for (var i = 0; i < 3; i++) {
        document.write("外側のループ: " + i + "<br />");
        for (var j = 0; j < 5; j++) {
          if (j == 3) {
            continue outerloop; // 外側のループの次の周回へスキップ
          }
          document.write("内側のループ: " + j + "<br />");
        }
      }
      document.write("ループを抜けました！<br />");
    </script>
  </body>
</html>

実行結果

ループに入ります！
外側のループ: 0
内側のループ: 0
内側のループ: 1
内側のループ: 2
外側のループ: 1
内側のループ: 0
内側のループ: 1
内側のループ: 2
外側のループ: 2
内側のループ: 0
内側のループ: 1
内側のループ: 2
ループを抜けました！

変数jが3になるとcontinue outerloop;が実行され、内側のループの残り（j = 3, 4）がスキップされて外側のループの次の周回へ移ります。そのため、各周回で「内側のループ」は0〜2までしか表示されません。

ラベル文を使う際の注意点

  • ラベルを付けられるのはbreak文とcontinue文だけで、それ以外の文では使用できません。
  • ラベル名には、変数名と同じ識別子の命名規則が適用されます。
  • 多用するとコードの可読性が下がるため、現代の開発ではフラグ変数や関数への分割で代用されることもあります。ただし、深くネストしたループを一気に抜けたい場面では非常に有効な手段です。

まとめ

ラベル文は「識別子＋コロン（:）」で文やブロックに名前を付け、breakやcontinueと組み合わせてループの流れを精密に制御できる構文です。ネストしたループから一気に脱出したい場合や、外側のループの次の周回へスキップしたい場合に、ぜひ活用してみてください。

  1. JavaScriptのProxy()オブジェクトとは？基本的な使い方とgetトラップの活用例を解説

    Proxy()オブジェクトとはECMAScript 6（ES2015）で導入された新機能のひとつがProxy()オブジェクトです。Proxy()は、プロパティの参照・代入・列挙・関数の呼び出しなど、オブジェクトに対する基本操作に独自のカスタム動作を定義するために使用されます。Proxy()を理解するうえで押さえておきたい、3つの重要なキーワードがあります。handler（ハンドラー）：トラップ（traps）を格納するプレースホルダーとなるオブジェクト。traps（トラップ）：プロパティへのアクセスを横取り（捕捉）し、独自の処理を差し込むための仕組み。target（ターゲット）：Proxyによっ

  2. JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

    JavaScriptのPromiseとは？Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。Promiseの3つの状態Promiseは、必ず以下の3つの状態のいずれかを持ちます。pending（待機）：初期状態。処理がまだ完了していない状態です。fulfilled（履行）：処理が正常に完了し、結果の値が