【JavaScript】while文の使い方を2つの例で確認

JavaScriptのwhile文を使った基本的な繰り返し処理について解説します。
ここでは、配列の要素を順番に表示する方法と、ある条件を満たすまで処理を繰り返す方法の2つの例を紹介します。

配列の要素を順番に表示する方法

// 配列を順番に表示する
const fruits = ["りんご", "みかん", "バナナ"];
let i = 0;

while (i < fruits.length) {
  console.log(fruits[i]);
  i++;
}

1. 配列を用意する

const fruits = ["りんご", "みかん", "バナナ"];

• fruits という名前の配列を作っています。
• 中には "りんご", "みかん", "バナナ" の3つの要素が入っています。
• 配列は「順番付きのデータの集まり」です。

2. カウンタ変数を用意する

let i = 0;

i という変数を 0 で初期化します。

配列の要素には インデックス番号 でアクセスします。

• 0 → “りんご”
• 1 → “みかん”
• 2 → “バナナ”

そのため最初は i = 0 から始めます。

3. while文で繰り返す

while (i < fruits.length) {
  console.log(fruits[i]);
  i++;
}

• while (i < fruits.length) は「i が fruits.length より小さい間は繰り返す」という意味です。
• fruits.length は配列の要素数（ここでは3）。

つまり：

1. i = 0 → 0 < 3 なので実行。 fruits[0] → "りんご" を表示。 i++ で i = 1。
2. i = 1 → 1 < 3 なので実行。 fruits[1] → "みかん" を表示。 i++ で i = 2。
3. i = 2 → 2 < 3 なので実行。 fruits[2] → "バナナ" を表示。 i++ で i = 3。
4. i = 3 → 3 < 3 は false なので終了。

まとめ

このコードは 配列の中身を最初から最後まで順番に表示する 例です。
出力結果は次のようになります。

りんご
みかん
バナナ

条件を満たすまで処理を繰り返す方法

// ランダムな数字が5になるまで繰り返す
let number = 0;

while (number !== 5) {
  number = Math.floor(Math.random() * 10);
  console.log("出た数:", number);
}

console.log("5が出ました！");

1. 変数の初期化

let number = 0;

• number という変数を作り、最初は 0 にしています。
• この変数にランダムな数を代入していきます。

2. while文で繰り返す

while (number !== 5) {
  number = Math.floor(Math.random() * 10);
  console.log("出た数:", number);
}

• while (number !== 5) は「number が 5 ではない間は繰り返す」という意味です。
• Math.random() * 10 で 0以上10未満のランダムな小数 が作られます。
• Math.floor() を使うことで、小数を 切り捨てて0〜9の整数 にしています。
• console.log("出た数:", number); で毎回出た数字を表示しています。

3. 条件を満たしたら終了

console.log("5が出ました！");

• while 文の条件 number !== 5 が false になるとループが終了します。
• その後に「5が出ました！」と表示して、ループが終わったことを知らせます。

まとめ

• このコードは 5が出るまでランダムな数を出し続ける 例です。
• while 文の特徴：繰り返す回数が決まっていない場合に便利
• 出力例（ランダムなので毎回違います）：

出た数: 3
出た数: 7
出た数: 2
出た数: 5
5が出ました！

※補足

配列の要素を順番に表示する処理は、今回の while 文でも書けますが、for…of 文を使うともっと簡単に書けます。
カウンタ変数を自分で用意する必要がなく、コードもシンプルになるため、配列を順番に処理する場合は for…of が初心者にも分かりやすい方法です。
for…of 文についてはこちらで解説しています 👇

ミニアプリを作ってみよう

while文を使って数字当てゲームを作ってみましょう。