ループ文(繰り返し処理)- while文

JavaScript関連

JavaScript

基礎

投稿日時 : 2025/02/02 更新日時 : -

基本のプログラミング学習では条件により分岐させる処理や繰り返し実行するループ文を学ばなければならない。しかし、ループ文は間違えたコードを書くと繰り返し処理のはずが1度も実行されなかったり、時には無限ループとなり処理が終わらずJavaScriptならブラウザが強制終了してしまう事もある。

ループ文ちょっと怖いです。。

そうだな。ただ、プログラムは書いた通りにしか動かない。テストをちゃんとやれば大丈夫だよ！余談で業務で無限ループになった僕の大失敗談を次のfor文の記事で話そうと思う

while文のサンプル

処理を繰り返すという事は条件でループを続けるかループ処理を終わるか決める。


let i = 0;
while(i < 5) {
    alert( (i + 1) + "回目のこんにちは！"); 
    i++;
}

構文はこんな感じだ。whileの条件がtrue(真)ならwhileの中にあるコードが繰り返し実行される。逆に言うと条件がfalse(偽)になるとループが終わる。

さて、シュェリーに問題だ。この上のコードのwhileは何回実行されるか分かるか？

えーっと、5未満が条件だから5以上にはならない。つまりは4回ループするって事ですか？

おしい！考え方は良いがコードは0から始まっている。つまりは0から数えるんだ。人は1から数えてしまう癖があるな

なるほど！ 0, 1 , 2, 3, 4だから5回ループするって事ですね！

このプログラムではメッセージが表示されOKボタンを押すと条件がtrueの間、繰り返しメッセージ表示処理が実行される。
「1回目のこんにちは！」 → OKボタンをクリック
「2回目のこんにちは！」 → OKボタンをクリック
「3回目のこんにちは！」 → OKボタンをクリック
「4回目のこんにちは！」 → OKボタンをクリック
「5回目のこんにちは！」 → OKボタンをクリック
と表示とクリックを交互に行う。alertにある式を詳しくみてみよう。

整数の変数と文字列をくっつけて表示


alert( (i + 1) + "回目のこんにちは！");

一見、上記のコードは見慣れない方は難しく見えるかもしれないが、特殊なことはしていない。一つ一つ解説するぞ。

プログラムは変数iが0だ。例えば下記のコードだと


alert( i + "回目のこんにちは！");

1回目が「0回目のこんにちは！」と表示されてしまう。これを回避する為にi + 1としている。整数の変数と文字をくっつけて表示する解説はこちらの記事で解説しているぞ。

変数を1から始めてはダメなのか？

上記のサンプルは下記のコードに置き換える事ができる。


let i = 1;
while(i <= 5) {
    alert( i + "回目のこんにちは！"); 
    i++;
}

上記のコードの方が見やすい。しかし、慣れないうちだからこそ整数の変数は0で代入するべきだ。変数を最初に代入する事を初期化という言葉を使うが、これらはこれから学ぶ配列という機能で0から使う為に慣れておいた方が後々の為になる。

いろいろなプログラミング言語で配列のインデックスが0から使う仕様がスタンダードだ。もちろん言語によっては1から始まるものもあるが、多くの人が学ぶプログラミング言語はインデックスは0からが基本！　0を使うように！