JavaScript ループ処理　5日目　2024/10/11（お金持ちまでの道のり）

本日はJavaScript ループ処理のfor,whileについてです。正直ここまで５日続くとは思わなかった。本当にこれなのかもしれない。今日も張り切っていきましょう！

初めての人はお金持ちまでの道のり：０日目をまず読んでみてください！よろしくお願いします★

JavaScript ループ処理
1. for ループ（JavaScript）
2. while ループ（JavaScript）
本日の感想

JavaScript ループ処理

for ループ（JavaScript）

for ループは、特定の回数だけ繰り返し処理を実行したい場合に使います。基本的な構文は以下のとおりです。

for (初期化; 条件; 増減) {
　// 繰り返したい処理
}

初期化：ループが始まる前に、一度だけ実行される処理（通常は変数の初期化）。
条件：ループを続けるための条件。この条件が true の間、ループが実行されます。
増減：ループが1回実行されるたびに行う処理（通常は変数の増加や減少）。

●例：1から5までの数字を出力する for ループ

for (let i = 1; i <= 5; i++) {
　console.log(i);
}

初期化：let i = 1　（i が変数、変数の値が1。最初は1からスタート）
※iはindexの頭文字で慣例的にループで使うことが多いがxとか別のアルファベットでもいい
条件：i <= 5　（i が5以下の間、ループが実行されます）
増減：i++　（ループが1回終わるたびに、i が1ずつ増加します）
※i += 1でも同じ。i += 2だと２ずつ増加。（1,3,5,7,9,,,)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>forループの例</title>
  <script>
    // forループで1から5までの数字をコンソールに表示する
    for (let i = 1; i <= 5; i++) {
      console.log(i);  // コンソールに i の値を出力
    }
  </script>
</head>
<body>
  <h1>forループの例</h1>
  <p>1から5までの数字はコンソールに表示されます。</p>
  <p>コンソールを確認するには、ブラウザで右クリックして「検証」→「コンソール」を開いてください。</p>
</body>
</html>

for ループの中で、1 から 5 までの数字を順番にコンソールに表示します。
※let i = 1 の i は普通の数字を意味する。コード内に配列がある場合の i は０から始まるインデックス番号を意味する。配列があるかないかで i の意味が変わる。配列を学ぶのは10日目。

while ループ（JavaScript）

while ループは、指定した条件が true の間、繰り返し処理を実行する構文です。つまり、条件が満たされている限り、何度でも同じ処理を繰り返します。基本的な構文は以下のとおりです。

while (条件) {
　// 条件がtrueの間、繰り返し実行される処理
}

条件：ループが繰り返されるかどうかを判断する式です。この条件が true である限り、ループは続きます。ループの中の処理：while ループ内の処理が繰り返し実行されます。

●例：1から5までの数字を表示する while ループ

let i = 1; // 初期化

while (i <= 5) {
　console.log(i); // i の値を表示
　i++; // i の値を1増加させる
}

条件：i <= 5
ループの中の処理：console.log(i);　i++;

◆for ループとの違い◆

・for ループは、特定の回数を指定して繰り返すのに適しています（回数が決まっている場合）。
・while ループは、条件が満たされている限り繰り返すので、回数が決まっていない場合や、特定の条件が満たされるまで繰り返したいときに便利です。

一口メモ１

for ループは、for (let i = 1; i <= 5; i++)のように（　）内に３つの要素をまとめることができるが、while ループは（　）内に条件の要素しか入れられない。初期化、増加はそれぞれ別々に記述しなければならない。

一口メモ２

for (let i = 1; i <= 5; i++)のように３つの要素を分けるためにセミコロンが使われている。ここでのセミコロンはステートメントの終了を意味するのではなく、forの（　）内の要素を分けるという理由で使われている。代わりにカンマなどを使うことはできない。Javascriptで要素を分けるときはセミコロンを使う。そういった理由でi++の後ろにはセミコロンがない。同じ理由で、while (i <= 5)のようにi <= 5の後ろにセミコロンがない。

一口メモ３

for (初期化; 条件; 増減)の増減の後ろや、while (条件)の条件の後ろにセミコロンが使われることは絶対ない。( )の後ろにセミコロンが使われることも絶対ない。
例→for (初期化; 条件; 増減;) と for (初期化; 条件; 増減); ←絶対ない
例→while (条件;) と while (条件);←絶対ない

●whileループのおまけ（回数が決まっていない場合とは？）

状況：例えば、ランダムな数が5になるまで処理を繰り返したい場合。

let num = 0;
while (num !== 5) {
  num = Math.floor(Math.random() * 10);  // 0から9のランダムな数を生成
  console.log(num);
}

コンソール画面の出力例

5 が出た時点でループが終了しますので、それ以上は表示されません。
※最初に num に 0 を設定してループに入りますが、ループの中ですぐに新しいランダムな数が代入されるため、最初に 0 は表示されません。

let num = 0; の説明
まず、num という名前の変数を作ります。変数というのは、何か数字や言葉を覚えておく箱みたいなものです。
最初に num には 0 という数字を入れます。この箱には後で別の数字が入りますが、今は 0 が入っています。
※５以外なら何でもいい（百万を入れても問題なし）
※num = 5 の場合、ループが始まらないため、何も表示されずに終了する
while (num !== 5) の説明
while とは？
while は、「〇〇している間ずっと」という意味です。ここでは、num が 5 でない間はずっと繰り返すという意味です。
!== とは？
!== は、「等しくない」という意味です。! は「否定（ちがう）」を意味し、=== は「等しい」を意味します。なので、!== は「等しくない」と言えます。
num !== 5 は「num が 5 でない限り」という意味です。
①Math.random() と ②Math.floor() の説明
①Math.random()
Math.random() は、0から1未満（0以上1未満）のランダムな小数を作る関数です。
例: 0.1234 や 0.8765 など、いろいろなランダムな数が出ます。
Math.random() * 10
Math.random() * 10 は、0から10未満のランダムな小数を作ります。例えば、4.567 や 9.123 などが出てきます。
②Math.floor()
Math.floor() は、「小数点以下を切り捨てて整数にする」関数です。例えば、4.567 は 4 になりますし、9.123 は 9 になります。
このコードでは、0から9までのランダムな整数を作るために使っています。
console.log(num); の説明
console.log() は、「数字を画面に表示する」ためのものです。
この場合、毎回作られたランダムな num の数字をコンピュータの画面に表示します。
ループの終わり方
while (num !== 5) の条件は、num が 5 でない限りループを繰り返すという意味です。
num が 5 になったら、「もう 5 だからループはやめよう」となり、ループが止まります。
だから、num がランダムで 5 になるまで、ループがずっと続きます。
★コード全体の流れ
・最初に num は 0 です。
・num !== 5 なのでループが始まります。
・0から9までのランダムな数字が生成され、画面に表示されます。
・num が 5 になるまで、ランダムな数字を繰り返し生成して表示します。
・num === 5 になった時にループが終了します。
★まとめ
・while ループは、条件が成り立つ限り繰り返します。
・!== は「等しくない」という意味です。「num !== 5」は「num が 5 でない限り」という意味です。
・Math.random() と Math.floor() でランダムな数字を作っています。