• Xでシェア
  • LINEでシェア
  • このエントリーをはてなブックマークに追加

JavaScript while文の使い方

  • JavaScript
  • 構文
最終更新日:

この記事のポイント

JavaScriptにおけるwhile文について理解を深めるために、以下の重要なポイントを押さえておきましょう。

  • 条件がtrueの間、繰り返し処理を実行する基本的なループ構文
  • 基本構文とコード例を通じて、実際の書き方と動作を理解
  • 配列処理やカウンター制御など、実用的な場面での活用方法

これらのポイントを順番に学習することで、while文を効果的に使いこなせるようになります。

目次

while文とは？

while文は、指定した条件がtrueである限り、ブロック内のコードを繰り返し実行するループ構文です。プログラミングにおいて基本的な制御構造の一つで、さまざまな場面で活用されています。

条件式が最初にfalseの場合、ループは一度も実行されません。for文と異なり、カウンター変数の初期化や更新を手動で行う必要があります。さらに、無限ループを避けるためにループ内には条件を変更する処理を入れなければなりません。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

while文の基本的な書き方は非常にシンプルです。while文の後に括弧内で条件式を記述し、波括弧内に実行したい処理を書きます。条件式がtrueの間、波括弧内のコードが繰り返し実行されます。ループを正常に終了させるには、ループ内で条件式に影響する変数を変更することが重要です。以下に基本的なコード例を示します。

let count = 1; while (count <= 3) { console.log("カウント: " + count); count++; }







出力結果
カウント: 1
カウント: 2
カウント: 3

  
let animal = "ネコ";
let repeat = 0;
while (repeat < 2) {
  console.log(animal + "が鳴いています");
  repeat++;
}

  


  







出力結果
ネコが鳴いています
ネコが鳴いています
実用例
while文は実際のプログラミングにおいてさまざまな場面で活用されます。配列の要素を順番に処理したり、特定の条件を満たすまで処理を継続する場合に特に有効です。また、ユーザーからの入力を待つ処理や、データの検索処理などでも頻繁に使用されます。
以下では、実際の開発現場でよく使われるパターンのサンプルコードを複数紹介します。各例は実用性が高く、そのまま応用できる形になっています。これらのコード例を通じて、while文の柔軟性と実用性を学びましょう。
配列要素の順次処理
配列の要素を先頭から順番に処理する基本的な例です。インデックスを使って配列の各要素にアクセスし、配列の長さに達するまでループを継続します。

  
let animals = ["イヌ", "ネコ", "ウサギ"];
let index = 0;
while (index < animals.length) {
  console.log(animals[index] + "を発見しました");
  index++;
}

  


  







出力結果
イヌを発見しました
ネコを発見しました
ウサギを発見しました
条件に基づく要素検索
配列内で特定の条件を満たす要素を見つけるまでループを継続する例です。目的の要素が見つかった時点でループを終了します。

  
let animals = ["ゾウ", "キリン", "ライオン", "サル"];
let index = 0;
let found = false;
while (index < animals.length && !found) {
  if (animals[index] === "ライオン") {
      console.log("ライオンを" + (index + 1) + "番目で発見！");
      found = true;
  }
  index++;
}

  


  







出力結果
ライオンを3番目で発見！
数値の累積計算
指定した条件まで数値を累積していく例です。合計値が目標値に達するまでループを継続し、途中経過も表示します。

  
let sum = 0;
let number = 1;
while (sum < 10) {
  sum += number;
  console.log("トリが" + number + "羽追加、合計" + sum + "羽");
  number++;
}

  


  







出力結果
トリが1羽追加、合計1羽
トリが2羽追加、合計3羽
トリが3羽追加、合計6羽
トリが4羽追加、合計10羽
カウントダウン処理
指定した数値から0まで逆順にカウントダウンする例です。時間制限やゲームのカウントダウンなどでよく使用されるパターンです。

  
let countdown = 5;
while (countdown > 0) {
  console.log("シマウマまで残り" + countdown + "秒");
  countdown--;
}
console.log("シマウマが登場しました！");

  


  







出力結果
シマウマまで残り5秒
シマウマまで残り4秒
シマウマまで残り3秒
シマウマまで残り2秒
シマウマまで残り1秒
シマウマが登場しました！
文字列の分解処理
文字列を一文字ずつ処理していく例です。文字列の各文字にアクセスして、特定の処理を実行します。

  
let animalName = "パンダ";
let position = 0;
while (position < animalName.length) {
  console.log((position + 1) + "文字目: " + animalName[position]);
  position++;
}

  


  







出力結果
1文字目: パ
2文字目: ン
3文字目: ダ
乱数を使った処理
乱数生成を使って、特定の値が出るまでループを継続する例です。ゲームやシミュレーションでよく使用されるパターンです。

  
let target = 3;
let attempts = 0;
while (true) {
  let randomValue = Math.floor(Math.random() * 5) + 1;
  attempts++;
  if (randomValue === target) {
      console.log("クマが" + attempts + "回目で登場しました！");
      break;
  }
}

  


  







出力結果（例）
クマが2回目で登場しました！
※「〇回目」は実行ごとに変わります
配列から要素を除去
配列から特定の条件を満たす要素を除去していく処理です。要素の削除により配列の長さが変わることを考慮した実装例です。

  
let zooAnimals = ["ペンギン", "アザラシ", "ペンギン", "シロクマ"];
let index = 0;
while (index < zooAnimals.length) {
  if (zooAnimals[index] === "ペンギン") {
      console.log("ペンギンを移動しました");
      zooAnimals.splice(index, 1);
  } else {
      index++;
  }
}
console.log("残りの動物: " + zooAnimals.join(", "));

  


  







出力結果
ペンギンを移動しました
ペンギンを移動しました
残りの動物: アザラシ, シロクマ
フィボナッチ数列の生成
フィボナッチ数列（第2項から開始）を指定した条件まで生成する数学的な処理例です。前の2つの数を足して次の数を作る数列の計算を行います。

  
let first = 0;
let second = 1;
let count = 0;
console.log("ハムスターの個体数変化:");
while (count < 5) {
  console.log((count + 1) + "世代目: " + second + "匹");
  let next = first + second;
  first = second;
  second = next;
  count++;
}

  


  







出力結果
ハムスターの個体数変化:
1世代目: 1匹
2世代目: 1匹
3世代目: 2匹
4世代目: 3匹
5世代目: 5匹
まとめ
while文は条件に基づいて処理を繰り返す基本的なループ構文であり、プログラミングにおいて重要な役割を果たします。適切に使用することで、さまざまな処理を効率的に実装できます。
while文の活躍する場面
    

  • 配列やオブジェクトの要素を順次処理する反復作業
    • 

  • 特定の条件を満たすまで継続する検索や判定処理
    • 

  • ユーザーの入力待ちや外部データの取得待ち処理
    • 

重要なポイント
    

  • 条件式は必ず最後にfalseになるよう設計し無限ループを防止
    • 

  • ループ内で条件に影響する変数を適切に更新すること
    • 

  • 処理性能を考慮し必要最小限のループ回数に抑制
    • 

while文をマスターすることで、JavaScriptプログラミングの幅が大きく広がります。基本構文を理解し、実用例を参考にして、実際のプロジェクトで積極的に活用してください。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript while文の使い方