🌀

【JavaScript】無限ループ（ブラウザが落ちる原因）を対処

2024/08/12に公開

はじめに

JavaScriptに悩む、すべての初学者に向けてこの記事を贈ります。
JavaScript書くとブラウザが落ちる...なんで...？

機械は非常に素直です。命令通り、精密に働きます。
あなたは司令官です。
指示を少し間違えただけで、「無限に処理し続けなきゃ！💦」と真面目に働いた彼は今、ぐったりしています。

今すぐ、間違えた指示を書き直していきましょう！

無限ループの例

let i = 0;

while (i < 5) {
  console.log(i);
  // i を増加させる処理がないため、無限ループに陥る
}

おっと、このコードではiの値が増加せず常にi = 0のままです。
条件i < 5は常にtrueとなり、処理が終わらず「無限ループ」に陥ります。

改善案

let i = 0;

while (i < 5) {
  console.log(i);
  i++; // i を増加させることで、ループが正しく終了する
}

iをループごとに増加させることで、条件がやがてfalseになり（i = 5）、ループが正しく終了します。

無限ループの例

for (let i = 1; i > 0; i++) {
  console.log(i);
  // i が条件を満たし続けるため、無限ループに陥る
}

おっと、このコードではiがどれだけ更新されても i > 0は常にtrueのまま です。
処理が終わらず「無限ループ」に陥ります。

改善案

for (let i = 1; i < 5; i++) {
  console.log(i);
  // 更新された i はいずれ条件を満たさなくなり、ループが正しく終了する
}

更新されたiがいずれ満たさなくなる条件を設定することで、条件はやがてfalseになり（i = 5）、ループが正しく終了します。

今回の記事のまとめはこちら
見た目を作るための言語、マークアップ言語である"HTML"は書いたらどう表示されるかということがわかりやすいです。
一方で、プログラミング言語"JavaScript"では、その1つひとつのコードがどんな動きをするのか、一筋縄ではいきません。

それでも、実行する前にその処理の道筋を考えていけるようになれば自ずと仲良くなっていけます。

この永遠の問いは、人も機械も同じです。
今回、「無限ループ」についてまとめましたが、「プログラミングを学んでいく上で、こんな問いを常に持ち続けて欲しい」というメッセージで締めさせていただきます。