【JavaScript】for文を使って繰り返し処理を実行するには

ループ処理と言えばfor文。

JavaScript以外に、CでもVBでもPythonでも、用意されている命令文です。

forの構文

構文を日本語で書くとこんな感じです。

for(初期化式; 終了条件; 増減式){
    ループさせる処理内容
}

初期化式は、for文に入って最初に1回だけ実行されます。

ループカウンター（変数iがよく使われます）に0や1など数字を代入して初期化します。

終了条件は、ループの度に判定され、条件を満たすまで処理を繰り返すものです。

条件を満たせなければ、意図せず無限ループしてしまうので、注意しないといけません。

増減式はループカウンターを増減させるもの。

i++のように書いて、インクリメントするヤツですね。

i–と、1ずつ減らしたり、i+=2のように2ずつ増やすのもありです。

for文の使い方

次の例では、iが0から3まで4回ループします。

var i;
var strtext = '';
for(i = 0; i < 4; i++){
    strtext += '<li>' + list_array[i] + '</li>';
}

ulタグの中にliタグを何度も直書きするのが非効率で、ループ処理を使うというわけです。

ただ、終了条件には注意しないといけません。

list_array = ['トップページ', '商品情報', 'お問合せ'];

のように要素が3つしかないのに、list_array[3]で存在しない要素を参照しようとすると、<li>undefined</li>となってしまいます。

どこまでループさせるのか、気を付けるべきところです。

まとめ：for文

for文を使う言語はとても多いので、絶対覚えておきたい命令文の1つです。

そしてループカウンターには、「i」が愛用されるものです。

先日会社でコーディングレビューをしていたところ、プログラミング初心者さんが

for(1 = 0; i < 5; i++){

のように書いているのを発見しました。

「i」と「1」、フォントによっては同じように見えてしまうのかもしれないですね。。。

セルフチェックで気づけるように、成長してもらえればと思います。