javascriptのwhileまたはdo…whileループ

このチュートリアルでは、JavaScriptでwhileまたはdo…whileループを記述して使用する方法を説明します。

Whileループ
- Whileループの構文

Whileループ

whileループは、JavaScript言語でサポートされている最も単純なループの1つとなっています。

ループは、特定の条件が満たされている限り、コードの一連の命令の繰り返し実行を容易にするプログラミング構造です。

つまり、特定の条件が真になるまでデータの処理を続行する必要がある場合に役立ちます。

また、常に真の条件を使用して、whileループを無限ループとして簡単に実行することもできます。

JavaScriptでforループの代わりにwhileループを使用すると、ループごとに値をインクリメントする必要がない場合にも非常に役立ちます。

Whileループの構文

whileループの構文は次のとおりとなります。

while(condition)
{
    // 何かしらの処理
}

whileループは記述が簡単で、心配する条件が1つしかないため、覚えるのが最も簡単なループの1つとなりす。

まず『while』キーワードを使用します。

その後に角括弧( )で囲まれた条件を使用します。

そして、コードブロック{ }波括弧で参照されているすべてのコードを実行します。

その条件が、trueの場合に実行されます。

これはwhileループの条件がtrueの場合のみに実行されますので、アクションを実行してからループを開始する場合は、JavaScriptの『do while文』でループを確認できます。

whileループの実行フロー

まずは単純なwhileループの実行フローを見てみましょう。

下記では、1〜10までのカウントアップする例となります。

letキーワードを使用し、countという変数に値を割り当てます。

つまり初期値は0という事になります。

let count = 0;

while (count < 10) {
    count++;
    console.log(count);
}

See the Pen JavaScript Whileループ 1 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

そして条件を使用しwhileループを開始しますcount変数が10未満であるかどうかを確認します。

whileループは、countの値が10以上になるまで実行され続けます。

count++;

ループ内で、++(インクリメント)演算子を使用してcount変数の値を1ずつ増やします。

countが10になったときに条件がfalseになり繰り返しを終了します。

インクリメントをしないと、無限ループが発生します。

これは、設定したループ条件によっては、ループせずにすぐに存在する場合もあれば、永久にループする場合もあります、初学者様がよく記述ミスによって引き起こされる問題なので気を付けて下さい。

下記では1から10までの奇数をコンソールに出力します。

インクリメント後の値を返します。

count +=2;

// 2 4 6 8 10

( += )または( -= )の加算代入演算子は、変数に値を加算するときに、その値を変数に代入します。

式のタイプによって、加算代入演算子の動作が決まります、連結または追加の存在は必須ではございません。

whileループのフローを制御

JavaScriptでは、whileループのフローを制御するために使用できるキーワードがいくつかあります。

それらのサポートされているキーワードの1つは『 break 』と呼ばれます。

特に無限ループは永久に実行されますが、プログラムはbreakキーワードを使用して終了できます。

無限ループの停止だけでなく、条件が満たされていない場合でもループを停止する事が可能です。

それでは例を見てみましょう。

下記ではcount変数が5に等しくなった場合、breakがループを停止している事が分かります。

let count = 0;

while (count < 10) {
    count++;
    if (count == 5) {
        break;
    }
    console.log(count);
}

//出力: 1 2 3 4

See the Pen JavaScript Whileループ 2 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

whileループは、指定された条件が真である限り実行され続けます。

whileループ内には、ある時点でループを終了する為のbreakまたはfalseを含める必要があります。

そうしないと、ループが終了せず、ブラウザがクラッシュする可能性があります。

ループのスキップ

whileループの実行中に、残りのコードブロックをスキップし、戻る事が可能です。

そのwhileループを制御する方法は、continueキーワードを使用します。

下記では、数値の2がスキップされているのでコンソールに出力されません。

let i = 0;

while (i <= 5) {
  i += 1;
  if (i === 2) {
    continue;
  }
  console.log(`number is: ${i}`);
}

//出力number is: 1 number is: 3 number is: 4 number is: 5 number is: 6

See the Pen JavaScript Whileループ 3 スキップ by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

注意点は、しっかりとインクリメントされてるか確認して下さい。

下記のようにインクリメントを下に移動させると、無限ループになる可能性があります。

let i = 0;
while (i <= 5) {
  if (i === 2) {
    continue;
  }
  console.log(`number is: ${i}`);
  i += 1; // 誤り
}

whileで配列をループする

プログラミングでのループの最も一般的な使用方法の1つは配列の要素を反復処理し、各要素に対して何らかのアクションを実行することです。

反復とは、最初の要素から最後の要素まで順番に、各要素を一度に1つずつ処理することです。

const fruits = ['Apple', 'Banana', 'Grape', 'Strawberry'];

let i = 0;
while (i < fruits.length) {
  console.log(i); // index
  console.log(fruits[i]); // value
  i++;
}

See the Pen JavaScript Whileループ 3 配列 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

カウント変数『 i 』の値をインクリメントするのを忘れないようにしましょう。

そうしないとループは終わりません。

途中でループ処理を停止する際は先述で学んだ、breakを使用し終了させます。

const fruits = ['Apple', 'Banana', 'Grape', 'Strawberry'];

let i = 0;
while (i < fruits.length) {
  console.log(i); // index
  console.log(fruits[i]); // value
  i++;

if(i === 2) {
    break; //停止
  }

}

do… whileループ

do...whileループは、whileループと非常に似ています。

唯一の違いは、do...whileループはコードブロックを一度実行し、その後に条件をチェックすることです。

これはtrueまたはfalseの場合でも、コードブロック内は少なくとも1回は実行されます。

つまり、条件が真であるかどうかに関係なくループの本体を少なくとも1回実行する場合にのみ使用する必要があります。

do...while文の構文は下記の通りです。

do
{
// Code 何かしらの処理
}
while(condition)

do...whileの例を見て、ループの動作を見てみましょう。

count変数を定義し、値を割り当てます。

let count = 0;
do {
    count++;
    document.write(count + "<br>")
} while (count < 10);

See the Pen JavaScript do… Whileループ by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

do…whileループは、コードのブロックを実行した後、指定された条件をチェックしてから、ループ本体内を実行します。

条件がfalseに達した場合、少なくとも1回はコードのブロックを実行します。

つまり条件である『count < 10』はfalseになり、ループは終了します。

下記は別の例となります。

let i = 10;

do 
{
  document.write("実行されます <br/>");
   i++;
}
 while(i < 12)

See the Pen JavaScript do… Whileループ 2 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

先述の配列をdo…whileで置き換えてみましょう。

const fruits = ['Apple', 'Banana', 'Grape', 'Strawberry'];

let i = 0;

do {

  console.log(i); // index
  console.log(fruits[i]); // value
  i++;
} while (i < fruits.length);