JavaScript ループ

はじめに

この実験 (Lab) では、JavaScript でループを使用する方法を学びます。ループはプログラミングにおける基本的な概念であり、コードブロックを繰り返し実行することを可能にします。これは、データリストの反復処理や、特定の回数だけアクションを実行するなどのタスクに役立ちます。

JavaScript の 3 つの主要なループの種類について学びます。

• for ループ: コードブロックを既知の回数だけ繰り返します。
• while ループ: 指定された条件が真である限り、コードブロックを繰り返します。
• do-while ループ: while ループに似ていますが、条件をチェックする前にコードブロックを少なくとも一度実行します。

また、ループを早期に終了するための break ステートメントの使用方法も学びます。

すべての作業は WebIDE で行われます。index.html で既にリンクされている script.js ファイルに JavaScript コードを記述します。実験環境の Web 8080 タブに切り替えることで、コードの出力を確認できます。

初期化子と条件を持つ for ループを作成する

このステップでは、最初の for ループを作成します。for ループは、アクションを繰り返したい回数が事前にわかっている場合に最適です。

for ループの基本的な構文は次のとおりです。
for (初期化子; 条件; 最終式) { // 実行するコード }

• 初期化子 (Initializer): let i = 0 が例です。これは、カウンター変数を宣言および初期化するために、最初に一度だけ実行されます。
• 条件 (Condition): i < 5 が例です。この式は、各ループの反復の前にチェックされます。真であればループは継続し、偽であればループは停止します。

アイテムのリストを生成する簡単なループを作成しましょう。左側のファイルエクスプローラーから script.js ファイルを開き、次のコードを追加してください。

const output = document.getElementById("output");
let htmlContent = "<ul>";

// この for ループには、初期化子 (let i = 0) と条件 (i < 3) があります
for (let i = 0; i < 3; i++) {
  htmlContent += `<li>Item ${i}</li>`;
}

htmlContent += "</ul>";
output.innerHTML = htmlContent;

このコードでは：

• let i = 0 はループカウンター i を 0 に初期化します。
• i < 3 は、i が 3 未満である限りループを実行し続ける条件です。
• i++ は、各反復後にカウンターをインクリメントする最終式です（次のステップで詳しく説明します）。

コードを追加したら、ファイルを保存します。次に、Web 8080 タブをクリックして出力を確認します。3 つのアイテムを持つ順序なしリストが表示されるはずです。

for ループでインクリメントを使用してカウントする

このステップでは、for ループの 3 番目の部分、つまり通常カウンターのインクリメントに使用される最終式に焦点を当てます。

final-expression（例：i++）は、各ループの反復の最後に実行されます。ループカウンターを更新し、条件が偽になるポイントに近づけます。i++ は i = i + 1 の一般的な短縮形です。

ループを 1 から 5 までカウントするように変更しましょう。script.js の既存のコードを次のコードに置き換えてください。

const output = document.getElementById("output");
let htmlContent = "<h2>Counting from 1 to 5:</h2>";

// 最終式 i++ は、各ループ後にカウンターをインクリメントします
for (let i = 1; i <= 5; i++) {
  htmlContent += `Count: ${i}<br>`;
}

output.innerHTML = htmlContent;

変更点に注意してください：

• 初期化子は let i = 1 となり、1 からカウントを開始します。
• 条件は i <= 5 となり、ループは i が 5 以下である限り実行されます。
• i++ 式により、各反復でカウンターが増加することが保証されます。

ファイルを保存し、Web 8080 タブを更新してください。出力が 1 から 5 までのカウントのリストに変わっているのが見えるはずです。

繰り返しのために while ループを実装する

このステップでは、while ループについて学びます。while ループは、指定された条件が真である限り、コードブロックの実行を継続します。

構文は for ループよりもシンプルです。
while (条件) { // 実行するコード }

while ループでは、ループの前にカウンター変数の初期化を処理し、ループ内でそのカウンターをインクリメントする必要があります。カウンターのインクリメントを忘れると、ブラウザをクラッシュさせる可能性のある無限ループが発生します。

前のステップのカウント例を while ループを使用して書き直しましょう。script.js のコードを次のコードに置き換えてください。

const output = document.getElementById("output");
let htmlContent = "<h2>Counting with a while loop:</h2>";

let i = 1; // 1. 初期化子
while (i <= 5) {
  // 2. 条件
  htmlContent += `Count: ${i}<br>`;
  i++; // 3. インクリメント
}

output.innerHTML = htmlContent;

このコードは前のステップの for ループと同じ結果を達成しますが、構造が異なります。初期化子、条件、インクリメントはすべて個別のステートメントになりました。

ファイルを保存し、Web 8080 タブを確認してください。出力は前のステップと同一であるはずで、同じ反復処理を達成するための異なる方法を示しています。

少なくとも 1 回の実行のために do-while ループを追加する

このステップでは、do-while ループを探求します。このループは while ループのバリアントであり、1 つの重要な違いがあります。それは、do-while ループは、条件をチェックする前に、コードブロックを少なくとも 1 回は必ず実行することです。

構文は次のとおりです。
do { // 実行するコード } while (条件);

これは、まずアクションを実行し、次にそれを繰り返すべきかどうかを決定する必要がある場合に役立ちます。条件が最初に偽である例で、これを実際に見てみましょう。

script.js のコードを次のコードに置き換えてください。

const output = document.getElementById("output");
let htmlContent = "<h2>Testing a do-while loop:</h2>";

let i = 10; // while 条件を偽にする値で開始

// i は 5 未満ではありませんが、このループは 1 回実行されます
do {
  htmlContent += `The value of i is: ${i}<br>`;
  i++;
} while (i < 5);

output.innerHTML = htmlContent;

この例では、i が 10 であるため、最初から条件 i < 5 は偽です。しかし、これは do-while ループであるため、条件がチェックされる前に do ブロック内のコードが 1 回実行されます。

ファイルを保存し、Web 8080 タブを確認してください。メッセージ "The value of i is: 10" が表示され、ループが正確に 1 回実行されたことが証明されます。

break ステートメントでループを抜ける

このステップでは、break ステートメントを使用してループを早期に終了する方法を学びます。break ステートメントは、現在のループを直ちに終了し、制御をループの次のステートメントに移します。

これは、ループ内で何かを検索しており、残りのイテレーションを完了することなく、見つけ次第すぐに停止したい場合に役立ちます。

10 回実行される予定の for ループを使用し、特定の条件が満たされたときに早期に停止するようにしましょう。script.js のコードを次のコードに置き換えてください。

const output = document.getElementById("output");
let htmlContent = "<h2>Using the break statement:</h2>";

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    htmlContent += "Found 6! Breaking the loop.<br>";
    break; // ループを直ちに終了
  }
  htmlContent += `Current number is ${i}<br>`;
}

htmlContent += "Loop finished.";
output.innerHTML = htmlContent;

このコードでは、for ループは 1 から 10 までカウントするように設定されています。しかし、if ステートメントは i が 6 と等しいかどうかをチェックします。等しい場合、break ステートメントが実行され、ループが終了します。コードは 7 から 10 までの数字を印刷しません。

ファイルを保存し、Web 8080 タブを表示してください。カウントが 5 で停止し、その後に「Breaking the loop」というメッセージが表示されるはずです。

まとめ

JavaScript のループに関するこの実験を完了したこと、おめでとうございます！コードブロックを繰り返すことで、プログラムの流れを制御する方法を学びました。

この実験では、以下の項目を学習しました。

• for ループ: 初期化子、条件、および最終式を使用して、事前にイテレーションの回数がわかっている場合に最適です。
• while ループ: 条件が真である限り繰り返され、カウンターの手動管理が必要です。
• do-while ループ: 条件をチェックする前に、コードブロックの少なくとも 1 回の実行を保証します。
• break ステートメント: 条件に基づいて、任意のループを早期に終了する方法を提供します。

ループをマスターすることは、熟練した JavaScript 開発者になるための重要なステップです。この実験のコードでさらに実験を行い、理解を深めてください。