繰り返し処理は、JavaScriptで欠かせない処理で、非常にお世話になります。
もはや「摩耗していつかは無くなってしまうのではないか？」と疑問を覚えるほどに使います。
JavaScriptでというより、プログラミングに欠かせないものです。
絶対に避けては通れないし、やってるとすごいプログラマーっぽくてかっこいいですよ！
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます！
それでは本文へ、レッツゴー！
繰り返し処理とは？
言葉通りなのですが、特定の処理を反復して実行するプログラムのことです。
forやforeachを使うことで「あんたこの処理を○回繰り返しなさいよ！」と指示を出すことができ、JavaScriptは「ぶひい！」と言いながら処理を繰り返してくれます。
for構文
まずは基本的な構文です。
// for構文
for(let i = 0; i < いつまで; i++){
繰り返し実行したい処理;
}この構文に「いつまで」「何をしたいか」を記述することで、繰り返し処理が行われます。
for構文の仕組み
let i = 0という変数を作って、0からスタートします。
１回処理を行うごとに、iに+1ずつ加算されていき「i < いつまで」が偽になった時点で処理が終了します。
サンプルコード①
numという変数に入れた数字の10乗までの結果を出力してくれます。
<script>
let num = 2; //任意の数字でOK
let total = 1;
// 10回繰り返す
for(let i = 0; i < 10; i++){
// total に num をかけていく
total = total * num;
// 結果の出力
console.log(`${num}の${i + 1}乗：${total}`);
}
</script>
このような結果が得られます。
変数numをいくつか適当な数字に変えてみたら、ちょっと面白かったです。
サンプルコード②
こちらは、forの動きをよりわかりやすく見ることができるサンプルコードです。
<script>
// ① 配列の生成
const sampleArr = ['あ', 'い', 'う', 'え', 'お'];
// ② 配列の要素の数を取得
const arrLength = sampleArr.length;
// 確認
console.log(`sampleArrの配列に格納された要素の数は ${arrLength} です。`);
// ③ 繰り返し処理
for(let i = 0; i < arrLength; i++){
// iの値と、iの値に該当する配列の値を確認
console.log(`i = ${i} です。\nsampleArr の ${i + 1} 番目の値は ${sampleArr[i]} です。`);
}
</script>配列が分からない方はこちら
constが分からない方はこちら
`（バッククォート）、${}が分からない方はこちら
① 配列の生成
繰り返し処理を見てもらうために、まずは配列を作成しています。
② 配列の要素の数を取得
今回は配列に格納された要素の数だけ処理を実行したいので、配列の数を取得します。
配列に格納された要素の数は「要素.length」で取得できます！
// 配列の要素の数を取得
配列.lengthサンプルのようにわざわざ変数に格納する必要はないのですが、今回この説明をするために変数に格納しました。
③ 繰り返し処理
「いつまで」の部分に配列の数を入れています。
処理内容については、今回は配列の値と、iの仕組みを見てもらうために、iの値をconsoleで確認できるようにしています。
forEach構文
forEach構文は、配列に特化した繰り返し構文です。
for構文より単純で、記述が短いのが特徴です。
今回は割愛していますが、breakやcontinueといった中断処理や、条件による処理の制御ができません。
// forEach構文
配列.forEach(e =>{
繰り返し実行したい処理;
});自動的に配列に格納された要素の数だけ自動で繰り返してくれるので、「いつまで」を指定する必要がありません。
eを配列の要素として、処理の中で使うことができます。eは変更可能です。
サンプルコード
先ほどのfor構文で使ったサンプルとほとんど同じ処理を行なっています。
forEach構文にすることで、ここまで記述を短縮することができます。
<script>
// 配列の生成
const sampleArr2 = ['ア', 'イ', 'ウ', 'エ', 'オ'];
// forEach構文
sampleArr2.forEach(val =>{
console.log(val);
});
</script>for-of構文
forEachと同様、配列に対して実行できるfor構文の亜種です。
僕は実際使ったことはありません…。
// for-of構文
for(let e of 配列){
繰り返し実行したい処理;
}サンプルコード
<script>
// 配列の生成
const sampleArr3 = ['a', 'i', 'u', 'e', 'o'];
// for-of構文
for( let e of sampleArr3 ){
console.log(e);
}
</script>まとめ
for構文、forEach構文、for-of構文をまとめたものです。
// for構文
for(let i = 0; i < いつまで; i++){
繰り返し実行したい処理;
}
// 配列に格納された要素の数取得方法
要素.length
// forEach構文
配列.forEach(e =>{
繰り返し実行したい処理;
});
// for-of構文
for(let e of 配列){
繰り返し実行したい処理;
}
