繰り返し処理とは？
繰り返し処理とは、そのままの意味で特定の処理を繰り返すことです。
for文を書かなくてもある程度のプログラムは作ることができます。
ただ、1万回同じ処理を書くのは、体力的に辛いです。
そういった場面で使われるのが、繰り返し処理になります。
for文の構文
構文は以下の通りです。
for (初期化式; 条件式; 増減値) {
// 共通の処理
}初期化式には、繰り返し文（for）の中で使用する変数を書きます。
条件式には、繰り返す回数の条件を書きます。
増減値には、繰り返しの度に変数の値を変化させる式を書きます。
実際に共通の処理を10回繰り返すfor文を書きてみます。
for (let i = 0; i < 10; i++) {
console.log(i)
}上記のコードは、コンソールに０から９までの数字を表示します。
条件式の結果がfalse（10 < 10）になるときが、このfor文が終了する時です。
ちなみに増減値の「i++」は「i–」に変数すると９から０までの数字が表示されます。
上記のように共通の処理（コンソールに何かを表示）を複数回実行したい場合に繰り返し文が使用されます。
使用例
以下はボタンをクリックすると、HTML要素の値を変更するサンプルーコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
</head>
<body>
<div class="test">aaa</div>
<div class="test">bbb</div>
<div class="test">ccc</div>
<div class="test">ddd</div>
<div class="test">eee</div>
<input type="button" value="GO" onclick="createItem()" />
</body>
<script>
function createItem() {
const ele = document.querySelectorAll('div.test')
for (let i = 0; i < ele.length; i++) {
ele[i].innerHTML = `<div>${i + 1}番目の要素</div>`
}
}
</script>
</html>コード解説
①18行目のonclickでJavaScriptの関数を呼び出します。
②classがtestの要素をすべて取り出し、eleという変数に格納します。
③ここでfor文を使用します。eleに入っている要素数分繰り返し処理をします。
よく使うテクニック（初級）
①配列と組み合わせて使う
配列の要素を数えるときは、0（ゼロ）から始まります。
また、配列の添え字の部分に計算式を使用することができます。
const array = [10, 20, 30, 40, 50]
for (let i = 0; i < array.length; i++) {
console.log(array[i])
}配列については以下の記事でも解説しています。
②逆から繰り返し処理をする
const array = [10, 20, 30, 40, 50]
for (let i = array.length - 1; i >= 0; i--) {
console.log(array[i])
}最後に
今回は繰り返し処理の１つであるfor文について、解説しました。
工夫すると色々な使い方ができますので、試してください。
ここまで読んでいただきありがとうございます。
コメント