JavaScript while入門！初心者でも分かる使い方7選

はじめに

この記事を読めば、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ループを使いこなすことができるようになりました。

今後のプログラミングに活かしてください。