はじめに
この記事を読めば、JavaScriptのwhileループを使った繰り返し処理ができるようになります。
初心者でも分かりやすい解説とサンプルコードで、whileループの使い方や注意点を学んでいきましょう！
●JavaScriptのwhileループとは
whileループは、指定した条件が満たされている間、繰り返し処理を行う構文です。
条件式がtrueの間、ブロック内のコードが実行され続けます。
○whileループの基本構文
while (条件式) {
// 繰り返し実行する処理
}●whileループの使い方7選
ここでは、JavaScriptのwhileループを使った7つのサンプルコードを紹介します。
○サンプルコード1：カウンター機能
このコードでは、whileループを使って1から10までの数値を順に出力するコードを紹介しています。
この例では、カウンター変数を1から始めて、10になるまで1ずつ増やしながら出力しています。
let count = 1; // カウンター変数
while (count <= 10) {
console.log(count); // カウンターの値を出力
count++; // カウンターを1増やす
}○サンプルコード2：配列の要素を順番に出力
このコードでは、whileループを使って配列の要素を順番に出力するコードを紹介しています。
この例では、インデックス変数を0から始めて、配列の長さに達するまで1ずつ増やしながら、対応する要素を出力しています。
const fruits = ["りんご", "みかん", "ぶどう"]; // 配列
let index = 0; // インデックス変数
while (index < fruits.length) {
console.log(fruits[index]); // 配列の要素を出力
index++; // インデックスを1増やす
}○サンプルコード3：条件に合う要素を検索
このコードでは、whileループを使って条件に合う要素を検索するコードを紹介しています。
この例では、指定した条件に合致する要素が見つかるまで配列を順に走査し、見つかった要素を出力しています。
const numbers = [3, 7, 12, 5, 8]; // 配列
const target = 12; // 検索対象の数値
let i = 0; // インデックス変数
while (i < numbers.length && numbers[i] !== target) {
i++; // インデックスを1増やす
}
if (i < numbers.length) {
console.log("見つかりました：" + numbers[i]);
} else {
console.log("見つかりませんでした。");
}○サンプルコード4：無限ループの例
このコードでは、無限ループが発生する例を紹介しています。
条件式が常にtrueになるため、ループが終わらなくなります。
実際に実行する際は注意してください。
while (true) {
console.log("無限ループです！");
}○サンプルコード5：do-whileループ
このコードでは、do-whileループを使って処理を行うコードを紹介しています。
この例では、最初に処理を実行してから条件を評価し、条件が満たされている限りループが続行されます。
let number;
do {
number = parseInt(prompt("1から10までの数値を入力してください："), 10);
} while (number < 1 || number > 10);
console.log("入力された数値：" + number);○サンプルコード6：入力チェック
このコードでは、whileループを使ってユーザーからの入力をチェックするコードを紹介しています。
この例では、正しい入力がされるまでループが繰り返され、正しい入力がされたらその値を出力します。
let input;
while (!input || isNaN(input) || input < 1 || input > 100) {
input = prompt("1から100までの数値を入力してください：");
}
console.log("正しい入力：" + input);○サンプルコード7：テキストアニメーション
このコードでは、whileループを使ってテキストアニメーションを作成するコードを紹介しています。
この例では、文字列を1文字ずつ順番に出力して、アニメーション効果を実現しています。
const text = "こんにちは！";
let i = 0;
while (i < text.length) {
setTimeout(() => {
console.log(text[i]);
i++;
}, i * 500);
}●注意点と対処法
○無限ループの回避
無限ループが発生しないように、条件式を慎重に設定しましょう。
また、ループ内で変数の値が更新されていることを確認してください。
○ループ内での処理負荷
ループ内で重い処理がある場合、パフォーマンスに悪影響を及ぼすことがあります。
適切なループ回数を設定し、処理負荷を軽減しましょう。
●whileループのカスタマイズ方法
○forループとの使い分け
ループ回数が明確な場合や、インデックスが必要な場合はforループを、条件によってループ回数が変わる場合や、ループ内での処理が複雑な場合はwhileループを使いましょう。
まとめ
この記事では、JavaScriptのwhileループを詳しく解説しました。
様々なサンプルコードを通して、whileループの基本的な使い方や応用例を学びました。
また、注意点と対処法についても触れ、whileループを効果的に使用する方法を理解しました。
whileループは、条件によってループ回数が変わる場合や、ループ内での処理が複雑な場合に非常に便利です。
しかし、無限ループや処理負荷に注意しながら、適切なループ回数を設定し、処理負荷を軽減することが重要です。
この記事を読んだことで、JavaScriptのwhileループを使いこなすことができるようになりました。
今後のプログラミングに活かしてください。
