jsで様々なループ処理

jsで様々なループ処理:

ここでは、javascriptで使用する３種類のループ処理の書き方を紹介します。

参考サイト

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#Keep_me_in_the_loop

loop

loop.html

loop(food = 0; foodNeeded = 10) { 
  if (food = foodNeeded) { 
    exit loop; 
    // 十分な食料が集まりました。家に帰りましょう 
  } else { 
    food += 2; // 1 時間経って 2 つの食料を集めました 
    // ループはさらに続きます 
  } 
} 
 
 

for

for.html

var cats = ['ビル', 'ジェフ', 'ピート', 'ビッグルズ', 'ジャスミン']; 
var info = '私の猫の名前は、'; 
var para = document.querySelector('p'); 
 
for (var i = 0; i < cats.length; i++) { 
  info += cats[i] + '、'; 
} 
 
para.textContent = info; 
 

while

while.html

var output = document.querySelector('.output'); 
output.innerHTML = ''; 
 
var i = 10; 
 
while(i >= 0) { 
 var para = document.createElement('p'); 
 if(i === 10) { 
 para.textContent = 'Countdown ' + i; 
 } else if(i === 0) { 
  para.textContent = 'Blast off!'; 
 } else { 
 para.textContent = i; 
 } 
 
 output.appendChild(para); 
 
 i--; 
} 
 

ループないで使うBreak

Breakを使えば強制的に処理を終了させることができます。

ある条件を満たした時点で、それ以降のループが必要ないと感じた場合に使用すると良いでしょう。

ループないで使うcontinue

ある条件に合致した処理だけをスキップできます。

例外的な処理をしたいが、それ以降のループは続けたいという場合に使用すると良いでしょう。

こんなところで使えそう！

ループ処理はプログラミングの基礎です。

使い所は多々ありますが、

・繰り返しで同じ処理をしたい

という場合に有効でしょう。

サーバーサイドと連結できなければ、あまり効果を感じにくいものではありますが、データが増えてくると一気に重要性を増してくるすばらしいシステムです。

また、デザインでもかなり使えそうです。

ランダムで異なるサイズの図形を表示させたい場合など、数的処理を使ってデザインの幅を広げるという手もあるでしょう。