いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】while文の書き方と使い方の基本

JavaScriptの繰り返し処理で使われるwhile文の基本を解説します。指定した条件が正しい間だけ処理を繰り返す構文の書き方から、continueやbreakを使ったループの制御方法、最低1回は処理が実行されるdo...while文まで、サンプルコードを交えて分かりやすく説明します。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptのwhile文とは

while文は、プログラミングで繰り返し処理を行うための構文の一つです。

あらかじめ指定した「条件式」が正しい（true）と評価される間、波括弧 {} で囲まれたブロック内の処理を何度も実行し続けます。

ブロック内の処理が一回終わるたびに、再び条件式のチェックが行われます。そして、条件式が正しくない（false）と評価された時点で、繰り返しは終了し、次の処理へ進みます。

この仕組みにより、「特定の条件を満たしている間だけ、同じ処理を繰り返す」というプログラムを簡単に書くことができます。

注意点として、条件が永遠にtrueのままだと処理が止まらなくなる「無限ループ」に陥る可能性があります。そのため、繰り返し処理の中で、いずれ条件がfalseになるように変数の値を更新するなどの工夫が必要です。

JavaScriptのwhile文の書き方

while文は、プログラミングで特定の処理を繰り返し実行するために使用される構文の一つです。指定した条件が満たされている間、処理を何度も実行し続けます。

1while (条件) {
2    // 条件がtrueである間、実行される文
3}

この構文の各部分について説明します。

  • while (条件) whileの後ろの丸括弧 () の中には、繰り返しを続けるかどうかを判断するための「条件式」を記述します。この条件式が評価され、結果が true (真) である場合に、続く波括弧 {} の中の処理が実行されます。

  • { ... } 波括弧 {} で囲まれた部分には、条件が true である間に繰り返し実行したい処理を記述します。この部分を「処理ブロック」と呼びます。

while文の処理は以下の流れで実行されます。

  1. まず、() 内の条件式を評価します。
  2. 条件式の結果が true であれば、{} 内の処理を実行します。
  3. {} 内の処理が一度終わると、再び () 内の条件式の評価に戻ります。
  4. 条件式の結果が false (偽) になるまで、この手順2と3を繰り返します。
  5. 条件式の結果が false になった時点で、while文の繰り返しは終了し、次の処理へ進みます。

注意点として、ループ内の処理で、いずれは条件式がfalseになるように記述する必要があります。もし条件式が永遠にtrueのままだと、処理が無限に繰り返される「無限ループ」という状態になり、プログラムが停止しなくなる原因となります。

サンプルコード

この記事では、JavaScriptにおける繰り返し処理の一種であるwhile文とdo...while文について学習します。指定した条件が満たされている間、同じ処理を何度も繰り返すための構文です。

javascript/chapter16/index.html

まず、これから学ぶJavaScriptコードを実行するためのHTMLファイルです。 <body>タグの中で、4つのJavaScriptファイル（script01.jsからscript04.js）を読み込んでいます。これにより、ブラウザでこのHTMLファイルを開くと、各スクリプトが順番に実行される仕組みになっています。

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15  </body>
16</html>

javascript/chapter16/script01.js

これは最も基本的なwhile文の例です。while文は、括弧 () 内の条件式が真（true）である間、波括弧 {} 内の処理を繰り返し実行します。

このコードでは、変数countが5未満である間、ループが続きます。ループ内では、現在のcountの値をコンソールに出力し、count++でcountの値を1ずつ増やしています。countが5になると条件式（count < 5）が偽（false）になるため、ループは終了します。もしcount++のように変数の値を更新する処理を忘れると、無限にループが続いてしまうため注意が必要です。

1// 基本的なwhile文
2let count = 0;
3while (count < 5) {
4  console.log(`Count is: ${count}`);
5  count++;
6}

javascript/chapter16/script02.js

このコードはwhile文の中でcontinue文を使用する例です。continue文は、ループ内の現在の処理を中断し、すぐに次のループ処理（この場合はwhileの条件判定）を開始する命令です。

コード内では、if (count % 2 === 0)という条件式でcountが偶数かどうかを判定しています。%は割った余りを求める剰余演算子です。countが偶数の場合、countを1増やした後にcontinueが実行され、console.logの処理はスキップされます。結果として、コンソールには奇数のみが出力されます。

1// while文の中でのcontinueの使用
2count = 0;
3while (count < 10) {
4  if (count % 2 === 0) {
5    count++;
6    continue; // 偶数はスキップ
7  }
8  console.log(`Count is: ${count}`);
9  count++;
10}

javascript/chapter16/script03.js

このコードはwhile文の中でbreak文を使用する例です。break文は、ループを完全に中断し、ループ構文から抜け出すための命令です。

コード内では、if (count === 5)という条件式でcountが5と等しいかどうかを判定しています。countが5になった瞬間にbreakが実行され、whileループ自体が強制的に終了します。そのため、コンソールには0から4までの数値が出力され、5以降は表示されません。

1// while文の中でのbreakの使用
2count = 0;
3while (count < 10) {
4  if (count === 5) {
5    break; // 5になったらループ終了
6  }
7  console.log(`Count is: ${count}`);
8  count++;
9}

javascript/chapter16/script04.js

これはdo...while文の例です。do...while文はwhile文と似ていますが、最初に処理を一度実行してから条件を判定する点が異なります。そのため、条件式が最初から偽（false）であっても、ループ内の処理が最低1回は実行されることが保証されます。

このコードでは、まずdoの中の処理が実行され、コンソールに"Number is: 5"と出力された後、numberの値が4になります。その後、while (number > 0)の条件が判定され、真であるためループが継続します。この処理がnumberの値が0になるまで繰り返されます。

1// do...while文
2// 最低1回はループが実行される構文です。
3// 条件が後に評価されるため、条件がfalseでも1回は実行されます。
4let number = 5;
5do {
6  console.log(`Number is: ${number}`);
7  number--;
8} while (number > 0);

javascript/chapter16/script05.js

これはwhile文を使った練習問題です。「1から20までの数値の中から、偶数だけをコンソールに表示する」という処理を実装しています。

while (count <= 20)でループの継続条件を「countが20以下」と設定しています。ループ内部ではif (count % 2 === 0)を使ってcountが偶数かどうかを判定し、偶数の場合のみconsole.logでその数値を表示しています。count++はif文の外にあるため、数値が偶数か奇数かに関わらず、ループごとにcountの値は1ずつ増加します。

1// 1から20までの数値のうち、偶数のみを表示する練習問題
2count = 1;
3while (count <= 20) {
4  if (count % 2 === 0) {
5    console.log(`Even number: ${count}`);
6  }
7  count++;
8}

おわりに

今回は、指定した条件が正しい間だけ処理を繰り返すwhile文の基本的な書き方を学習しました。ループの途中で処理を抜けたい場合はbreakを、現在の処理をスキップしたい場合はcontinueを使います。また、条件に関わらず最低1回は処理を実行したい場面では、do...while文が役立ちます。無限ループを避けるため、ループ内で条件式の変数を更新することを常に意識して、繰り返し処理を使いこなしていきましょう。

【JavaScript】while文の書き方と使い方の基本 | いっしー@Webエンジニア