繰り返し処理

繰り返し処理とは

同じ処理を指定した回数実行するやり方

同じ処理を 100 回実行したいときに 100 回書くのか．．？
配列と相性が良い！
超むずい（使っていてもきちんと説明できないことも．．．）

書き方

繰り返し処理では次の 3 つの条件を指定する．

開始条件
繰り返しを続ける条件
回数のカウントの仕方


for (`開始条件`; `繰り返しを続ける条件`; `回数のカウントの仕方`) {
  // 実際に繰り返したい処理
}

💡 Key Point

if 文と同じく，まず構文の形をつくってしまおう．

コード例

「i」の値を使って繰り返しをコントロールする．
条件をセミコロン「;」で区切る点に注意！！
i++は「iを 1 ずつ増やす」を意味する．
「i=0で{}内を実行」「i=1で{}内を実行」...の繰り返し．


for (let i = 0; i < 100; i++) {
  console.log(i);
}

上のコードは以下と同じ意味．「i < 100」なので 99 まで実行したら終了．


console.log(0);
console.log(1);
console.log(2);
// ...
console.log(98);
console.log(99);

繰り返しの使用例

1901 年から 2021 年を選択できる<select>を作成する．処理の流れは以下．

開始年と終了年を定義しておく．
出力用の空文字を用意しておく．
繰り返し処理で「開始条件に開始年」「終了条件に終了年」を指定してタグを作成し，空文字に追加する．
繰り返し処理が終わったら指定した場所に出力する．


// 1
const start = 1901;
const end = 2021;

// 2
let option = "";

// 3
for (let i = start; i <= end; i++) {
  option += "<option>" + i + "</option>";
}

// 4
$("#hoge").html(option);

繰り返し処理との組み合わせ

繰り返し処理を用いると配列内の要素を順番に使うことができる．lengthを使用すると配列の長さに関わらず対応できる．


const list01 = ["月", "火", "水", "木", "金", "土", "日"];

for (let i = 0; i < list01.length; i++) {
  console.log(list01[i]);
}

配列と繰り返しでブラウザに要素を表示

よく出てくるパターン．データが入った配列からデータを取り出して画面に表示したい場面は多い．

流れは以下のとおり．

空の出力用配列を用意しておく．
繰り返し処理を用いて，配列からデータを取り出し，タグに入れて 1 の配列に追加する．
繰り返し処理が終わったら出力用の配列を画面上の指定した部分に出力する．


const list01 = ["月", "火", "水", "木", "金", "土", "日"];

// 1
const array = [];

// 2
for (let i = 0; i < list01.length; i++) {
  array.push("<p>" + list01[i] + "</p>");
}

// 3
$("#echo").html(array);

繰り返し処理のバリエーション

似たような構文がいくつか存在する．とりあえず好きなものを使用すれば OK．


const list = [1, 2, 3, 4, 5];

for (let i = 0; i < list.length; i++) {
  console.log(list[i]);
}

for (let x of list) {
  console.log(x);
}

list.forEach(function (x) {
  console.log(x);
});

G's-Fukuoka-Lab06