【JavaScript】1分で理解できる！while文を用いたループ処理

JavaScriptでwhile文を用いてループ処理（繰り返し処理）を行う方法を1分で解説します。

要点を絞って構文ルールと利用方法に絞ってサンプルコードを見ながら学習していきましょう。

このページで学べる内容

JavaScript初心者の方にとっては理解しづらい部分ですが、JavaScriptをマスターするための必須知識です。

是非、最後まで読んでこの機会にマスターしておきましょう。

ループ処理（繰り返し処理）とは？

ループ処理（繰り返し処理）とは、その名の通り同じ処理を複数回繰り返す処理のことです。

例えば、「こんにちは！」という文字を１００回表示させたい場合。この場合、ループ処理を用いないと「こんにちは！」という処理を１００個記述しなければなりません。

ループ処理を用いることで、複数回必要とする処理も１回の記述で行うことができます。

プログラムの中では、このように同じ処理を複数回繰り返す必要があるシーンがよく登場します。この繰り返し処理をマスターできないと、非常に冗長なわかりづらいコードとなってしまうのです。

ここからは、具体的に繰り返し処理の１つ「while文」の使い方・書き方を解説します。

用語：イテレーション

ループ（繰り返し）処理の１回をイテレーションと呼びます。

「こんにちは」を１００回表示する処理のイテレーションの数は１００です。

JavaScriptでは、while文は大きく２つに分類されます。

while文の分類

基本的には同じ思想ですが、処理の内容が微妙に異なるため、それぞれ別々に解説していきます。

while (条件式) {
繰り返し処理
}

while文は、条件式の結果がTRUEの場合に処理を行います。結果がTRUEとなっている間、その処理が繰り返されるという考え方です。

See the Pen while① by ビズドットオンライン (@BizOnline) on CodePen.

サンプルコードの説明

２行目
条件式「count <= 10」・・・変数 "count" が10以下であることを確認。
結果がtrueなら処理を実行し、falseの場合は処理を抜けます。

3~4行目
変数 "count" の出力をした後、countをインクリメント（値を１加算すること）します。
処理が完了したら、また２行目に戻り条件式の判定を行います。

上記の結果、変数 "count" の値（0~10）が出力されます。

重要なのは、以下の部分。

count++; //変数countをインクリメント

変数 "count" をインクリメントしないと、変数が永遠に「０」のままなので処理が止まりません。

この状態を「無限ループ」と呼びます。無限ループに陥ると、PCがフリーズするか強制的にブラウザを閉じるまで処理が止まりません。そんな初歩的なことやりません、という初心者の人ほど１回はやらかしますので、ご注意を。

do {
繰り返し処理
} while (条件式);

while文との違いは、条件式の判定タイミングです。

do while文を用いると、先に処理を行い、処理が完了したタイミングで条件式を判定します。

while文/do while文の違い

while
条件式を判定し結果がtrueなら処理を実行

do while
処理を実行した後に条件式を判定し結果がfalseなら処理を抜ける

つまり、do while文を用いれば必ず１回は処理が行われることになります。

See the Pen do while① by ビズドットオンライン (@BizOnline) on CodePen.

先ほどの結果と全く同じになります。ただし、内部的な処理で言えば条件式の判定タイミングが異なりますので厳密に区別しておく必要があります。

ちなみに、do while文よりも直感的に理解しやすいwhile文の方が利用頻度が高い印象です。開発を一人で行う場合を除けば、やむを得ない場合を除いてwhile文を用いたほうが無難です。

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。