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）。
つまり：
i = 0→0 < 3なので実行。fruits[0]→"りんご"を表示。i++でi = 1。i = 1→1 < 3なので実行。fruits[1]→"みかん"を表示。i++でi = 2。i = 2→2 < 3なので実行。fruits[2]→"バナナ"を表示。i++でi = 3。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文を使って数字当てゲームを作ってみましょう。
Web制作を学ぶならUdemy
私は動画学習プラットフォームのUdemyでプログラミングを学習しています。
HTML・CSS・JavaScriptの基本から本格的なWebアプリ制作まで学べます。
興味がある方はUdemyの講座をチェックしてください。
実際に私が受講した講座はこちら👇
Udemyでは頻繁にセールをやっていて、90％オフになることも！
気になる講座はセール時に購入するのがおすすめです。
