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

JavaScriptのラベル（label）でループの流れを制御する方法：breakとcontinueの活用術

JavaScriptでループ処理をより細かく制御したい場合、「ラベル（label）」を活用する方法があります。ラベルはbreak文やcontinue文と組み合わせて使うことで、通常の制御では実現できない柔軟なフロー制御を可能にします。

ラベルの構文は非常にシンプルで、「識別子 + コロン（:）」の形式で、任意の文やコードブロックの前に記述します。特にネストした（入れ子になった）ループを扱う際に威力を発揮し、内側のループから外側のループを一気に抜けたり、外側のループの次の反復へスキップしたりすることができます。

ここでは、ラベルをbreakと組み合わせる例と、continueと組み合わせる例の2つを紹介します。

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

以下のコードでは、外側のループにouterloop、内側のループにinnerloopというラベルを付けています。条件に応じて、内側のループだけを抜けたり、外側のループごと終了したりできるのがポイントです。

<html>
<body>
<script>
   document.write("Entering the loop!<br /> ");

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

      innerloop:
      for (var j = 0; j < 5; j++) {
         if (j > 3) break;            // 最も内側のループを抜ける
         if (i == 2) break innerloop; // innerloopラベルのループを抜ける
         if (i == 4) break outerloop; // outerloopラベルの外側のループを抜ける
         document.write("Innerloop: " + j + " <br />");
      }
   }

   document.write("Exiting the loop!<br /> ");
</script>
</body>
</html>

このコードの動作を整理すると、次のようになります。

  • break;（ラベルなし）：直近の内側のループのみを終了します。
  • break innerloop;：innerloopラベルが付いたループを明示的に終了します。
  • break outerloop;：outerloopラベルが付いた外側のループ全体を一気に終了します。

ラベルを使わない場合、外側のループを抜けるにはフラグ変数などを用意して条件判定を重ねる必要がありますが、ラベルがあれば1行で意図を明確に表現できます。

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

次に、continue文とラベルを組み合わせた例を見てみましょう。continue outerloop;と記述すると、内側のループの残りの処理をスキップし、外側のループの次の反復へ直接移行できます。

<html>
<body>
<script>
   document.write("Entering the loop!<br /> ");

   outerloop: // これがラベル名
   for (var i = 0; i < 3; i++) {
      document.write("Outerloop: " + i + "<br />");

      for (var j = 0; j < 5; j++) {
         if (j == 3) {
            continue outerloop; // 外側のループの次の反復へスキップ
         }
         document.write("Innerloop: " + j + "<br />");
      }
   }

   document.write("Exiting the loop!<br /> ");
</script>
</body>
</html>

この例では、内側のループでjが3になった時点でcontinue outerloop;が実行され、内側のループはそこで打ち切られ、外側のループの次の周回に進みます。結果として、内側のループはjが0〜2までしか出力しません。

ラベル使用時の注意点

  • ラベルはネストしたループでのみ使用するのが一般的で、単一のループでは通常のbreakやcontinueで十分です。
  • ラベル名は変数名と混同しないよう、わかりやすい名前（例：outerloop、innerloop）を付けましょう。
  • 乱用するとコードの流れが追いにくくなるため、可読性が向上する場面でのみ使用するのがベストプラクティスです。

このように、ラベルを活用することで、複雑なネスト構造のループでも意図を明確に、かつ簡潔にフロー制御できるようになります。ぜひ実際にコードを実行して、動作を確認してみてください。

  1. HTMLタグでページのタイトルを定義する方法｜<title>タグの正しい使い方を解説

    HTMLドキュメントにタイトルを設定するには HTMLドキュメントにタイトルを設定するには、HTMLの<title>タグを使用します。このタイトルは、<head>タグと</head>タグの間に記述する必要があります。 ここで設定したタイトルは、Webブラウザのタブやタイトルバーに表示されます。また、検索エンジンがページの内容を理解する際の重要な手がかりとなるため、SEOの観点からも非常に重要な要素とされています。 titleタグの主な役割 ブラウザのタブにページ名として表示される 検索結果画面でリンクの見出しとして使用される ユーザーがページをブックマーク

  2. Macでコントロールセンターを使う方法【macOS Big Sur対応】

    macOS Big Surでは、iPhoneやiPadでおなじみのコントロールセンターが初めてMacに搭載されました。これにより、Wi-Fi、Bluetooth、画面の明るさ、音量などの便利な設定がひとつの場所に集約され、クリック1つですぐにアクセスできるようになりました。 この記事では、Macのコントロールセンターでできることや、各機能の設定を調整する方法について詳しく解説します。 Macでコントロールセンターを開く方法 macOS Big Surにアップデートすると(ベータ版を使用している場合も同様)、画面上部のメニューバーにある日付と時刻の横に新しいアイコンが表示されます。このアイコンは