【JavaScript】for文のループ処理とは?【簡略化】

JavaScriptを使って繰り返しの処理について見ていきます。

for文とは?
for文の文法

1～10までのループを作る
ループの終点を自動で追加

注意点

for文とは?

簡単に言うと開始点～終了点まで処理を繰り返します。注意点についても後述します

例えば<select>内に<option>が100個必要な場合、HTMLだけなら100個書かないといけませんがJavaScriptであれば7行で好きなだけ生成することが出来ます。

さきほど挙げた例以外にも、西暦を自動で取得してfor文の終了点に設定しておけばリアルタイムで生成することが出来ます。

for文の文法

for文の中については以下のようになっています。なおfor文内での変数は一般的に『i』を使用します。

for(var i=開始点 ; i<=終了点 ; i++ ){ 処理内容; }

実際に文法を見ていきましょう。まずは1～10までのselectボックスを作ります。

1～10までのループを作る

[HTML]

<select id='select'></select>

[JavaScript]

var Element = document.getElementById("select");
for (var i = 1; i<= 10; i++) {
  var option = document.createElement("option");
  option.value = i;
  option.innerText = i;
  Element.appendChild(option);
}

<select id="select">を変数Elementに代入
for文の中で変数iを開始時点で1、10以下まで、1回ずつ繰り返し処理。『{ }』の間のことが繰り返される。
optionタグを生成。(同時に変数optionに代入)
(変数)optionのvalue属性にiの値を代入
(変数)optionのテキストにiの値を代入
(変数)selectにoptionを代入

for文の基本系はできました。

ループの終点を自動で追加

続いてループの終点を変数にしてみます。次は2000年以降の西暦を値としたselectボックスを作成してみます。

[HTML]

<select id='select'></select>

[JavaScript]

var now = new Date();
var yy = now.getFullYear();
var Element = document.getElementById("select");
for (var i = 2000; i<= yy; i++) {
  var option = document.createElement("option");
  option.value = i + "年";
  option.innerText = i + "年";
  Element.appendChild(option);
}

最初に変数yyに現在の西暦を代入して、ループの終点を変数yyにする事でリアルタイムで終点が変わりループ処理の回数も増加していきます。

注意点

開始点と終了点を指定しないとループ処理が正しく機能しません。

ループ処理が読み込まれないだけであればいいのですが、場合によってはループの処理が終わらない無限ループになってしまう現象になってしまいます。詳しくはこちら。

よく読まないと逮捕される可能性があります(笑)

まとめ

ループ処理に関してはJavaScript以外にもいろんなプログラムで使われているのでまずは基本系をしっかり学んでおきましょう。