プレゼンテーションシナリオ: スライド97、98、99、100

スライド97、98、99、100では、JavaScriptのループについて説明します。

Loop（ループ）とは？

Loop（ループ） = コードブロックを複数回繰り返し実行する方法です。

コードを何度もコピー＆ペーストする手間を省くことができます。

通常、データリスト、配列、または繰り返し作業を処理する必要があるときに使用します。

日常の例：1から5まで数えたい場合、console.log(1)... console.log(5)と書く代わりに、ループを使用できます。

JavaScriptの主なループの種類

a) forループ

繰り返し回数が明確な場合に使用します。

構文:

for (initialization; condition; increment) {
    // 実行するコード
}

ここでは：

  • initialization（カウンタ変数の初期化）：これはカウンタ変数の初期値を設定するステップです。この部分はループが開始するときに一度だけ実行されます。

  • condition（ループ条件）：各繰り返しの前に、JavaScriptはこの条件をチェックします。trueの場合 → { }内のコードを実行します。falseの場合 → ループを停止します。

  • increment（カウンタ変数の更新）：各ループの実行後、この部分が実行されます。通常、カウンタ変数を増加または減少させるために使用します。

例:

for (let i = 0; i < 5; i++) {
    console.log(i); // 0 → 4
}

上記の例の説明:

  • let i = 0 → カウンタ変数iを初期化し、値0を代入します（つまり0から開始）。これがループを制御するためのカウンタ変数になります。

  • i < 5 → これがループ条件です。各ループの前に、プログラムは次をチェックします：iが5未満であれば続行、そうでなければ停止します。

  • i++ → 各ループ後にiを増加させます。i++はi = i + 1の短縮形です。各ループ後、変数iが1増加します。

詳細なループプロセス:

  • 1回目: i = 0 → 0 < 5をチェック ✅ 真 → 0を出力。
  • 2回目: iが1増加、つまりこのループではi = 1 → 1 < 5をチェック ✅ 真 → 1を出力。
  • 3回目: i = 2 → 2 < 5をチェック ✅ 真 → 2を出力。
  • 4回目: i = 3 → 3 < 5をチェック ✅ 真 → 3を出力。
  • 5回目: i = 4 → 4 < 5をチェック ✅ 真 → 4を出力。
  • 6回目: i = 5 → 5 < 5をチェック ❌ 偽 → ループ停止。

最終的な出力結果：0 1 2 3 4

b) whileループ

繰り返し回数が事前にわからない場合に使用し、ループ条件のみがわかっている場合に使用します。

例:

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
  • let i = 0; : 変数iを宣言し、初期値0を代入します。
  • while (i < 5) : これがループ条件です。各ループの前に、JavaScriptは次をチェックします：i < 5は真か？
  • trueの場合 → { }内のコードを実行します。falseの場合 → ループを停止します。
  • 最終的な出力結果：0 1 2 3 4

c) do...whileループ

whileと似ていますが、whileと比べて1つの違いがあります。それはdo...whileでは、条件が偽であっても{}内のコードブロックが最初に実行され、その後でwhileの条件がチェックされるということです。

例:

let i = 1;
do {
    console.log("Number " + i);
    i++;
} while (i <= 5);

この例の詳細な実行プロセスは次のようになります：

  • 1回目: i = 1 → 最初に"do"内のコードを実行 → "Number 1"を出力 → i++ステップでiを2に増加 → "while"を実行：2 <= 5をチェック → true → 2回目に進み、最初に"do"を実行してから"while"に進む。
  • 2回目: i = 2 → "Number 2"を出力 → iを3に増加 → 3 <= 5をチェック → true .... falseになるまで続行 → ループ停止。

最終的な出力結果：Number 1 ~ Number 5

d) for...ofループ（Array、Stringなどに使用）

配列または文字列の各要素をループします。

例:

const fruits = ["apple", "banana", "mango"];
for (let fruit of fruits) {
    console.log(fruit); // apple, banana, mango
}

e) for...inループ（Objectに使用）

オブジェクトのキーをループします。

例:

const person = { name: "Thu", age: 25, city: "Hochiminh" };
for (let key in person) {
    console.log(key + ":", person[key]);
    // name: Thu, age: 25, city: Hochiminh
}

他のループについては、w3schoolを参照してください。

以上で、JavaScriptの主なループの種類についての説明を終わります。