JavaScriptで同じ処理を繰り返す、ループさせる方法/for、whileの使い方

Java Scriptで同じ処理を何度も繰り返したい場合に使用する、for文、while文のご紹介です。

for文の使い方

for文は処理を行うごとに指定した変数の数を変化させ、変数がある値になったら処理を終了させる、無限ループになりにくい式です。

なんのこっちゃという感じかもしれませんが、たとえば次のように書きます。

for (var i =0; i<3; i++){
            alert(i);
            }

この処理では、まず変数「i」に対して0を指定した上で、これが3未満であることを判定し、iを1増やして処理を1度実行、再度頭に戻ってiが3以上になるまでこの処理を繰り返しています。
for文が終わった後はその後のコードが実行されるので、直後に付け足しておけば終了後の処理を指定することも可能です。

for (var i =0; i<3; i++){
            alert(i);
            }
alert("ループ終了");

while文の使い方

見ての通りシンプルな式で、変数の指定などは別で行います。for文と同様に変数を指定して使うこともできますし、もっと複雑な式を条件にすることもできます。

var i = 0;
while (i

途中で強制終了したい場合
もし処理の途中にbreakがある場合、ループは強制終了されます(for、whileどちらにも有効)。

実際は条件分岐などして、特定の条件化ではループ処理を行わない場合などに使用します。
for (var i =0; i<3; i++){
            alert(i);
            break;
            }
alert("ループ終了");

途中でループの最初に戻したい場合
また、continueがある場合、式の途中でもループの頭に戻ります。
for (var i =0; i<3; i++){
            continue;
            alert(i);
            }
alert("数字が"+ i + "まで増えました");

forとwhile、どちらを使うべきか？
どっちでもいいです。ただ、whileのほうが「～の間は繰り返す」という構文がシンプルなので、まずはこちらに使い慣れるのをおすすめします。

for文はfor文で便利ですが、必要性を感じたら覚えるぐらいのつもりでも、特に支障はないと思います。
JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。
sunagitsune.com
2019.02.23