知識を取り込み、そして発信する
JavaScriptでは、同じような処理を何度も実行したい場面がよくあります。
例えば、配列の中身をすべて表示したり、一定回数同じ処理を繰り返したりする場合です。
こうした処理を、毎回同じコードをコピーして書くこともできますが、回数が増えるほどコードは長くなり、修正や管理も難しくなります。
繰り返し処理は、このような「同じ処理をまとめて実行したい」という場面で使われます。
ここでは、JavaScriptで最も基本となる for文を使い、処理を繰り返す仕組みを理解していきます。
for文は、決められた回数だけ同じ処理を繰り返すための構文です。
初期値、繰り返す条件、処理ごとの更新内容を1か所にまとめて書けるため、処理の流れを把握しやすく、最も基本的な繰り返し処理として使われます。
構文
for (初期化; 条件式; 更新処理) {
繰り返したい処理;
}
for文の構文は、繰り返しに必要な条件を順番に指定します。
初期化では最初の状態を用意し、条件が合っている間だけ処理が実行されます。
処理が1回終わるごとに更新処理が実行され、再び条件式が判定されます。
なお、iは処理の中で値が変わるため、constでは宣言できません。
コード例
//for1.js
for(let i=0; i<3; i++){
alert(i);
}動作例
※このボタンは動作確認用です
このfor文では、変数iを使って処理を繰り返しています。
順を追って何が起きているか説明します。
まず、let i = 0で変数iを用意し、最初の値として0を代入します。
これが繰り返し処理の開始位置になります。
次に、i < 3という条件を確認し、条件に合っている間だけ繰り返しが実行されます。
この例では、iが3未満の間、処理が続きます。
ブロック{}の中に書かれた処理は、条件に合っている間、何度も実行されます。
ここでは、現在のiの値をalertで表示しています。
処理が1回終わると、i++が実行され、iの値が1増えます。
その後、再び条件を確認し、条件に合っていれば次の処理が行われます。
この結果、alertには0、1、2の順で値が表示され、iが3になった時点で繰り返しは終了します。
処理をイメージで表します。
①初期化（繰り返しが始まる前に一度だけ実行）
②iの現在の値が表示されます
③iに1を加え、その後i<3の条件を確認します
④iが3になると条件に合わなくなり、処理が終了します
図とコードの説明を照らし合せると理解が深まるのではないでしょうか。
for文のiも変数ですが、for文の前に変数を宣言していると、よりfor文が理解できるようになります。
コード例
//for2.js
let num = 0;
for(let i=0; i<10; i++){
num = num + i;
}
alert(num);動作例
※このボタンは動作確認用です
このJavaScriptの流れは大きく3つです。
まず、変数numを0で宣言します。
次に、for文のブロック内で、numの現在の値にiを順に加えていきます。
最後に、for文で繰り返し計算したnumの合計を表示します。
簡単に言うと、numの初期値0に対して0から9までの数値を順に足し合わせ、alertで合計である45を出力する流れです。
このように変数を扱うとfor文を使う意味が明確になってくるのではないでしょうか。
配列とfor文は非常に相性がいい組み合わせの使い方です。
コード例
//for3.js
let num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let total = 0;
for(let i=0; i<num.length; i++){
total = total + num[i];
}
alert(total);動作例
※このボタンは動作確認用です
このコードでは、配列に入っている数値をすべて足し合わせています。
まず、numには1から10までの数値を配列として用意しています。
totalは、合計を保存するための変数として、初期値を0にしています。
for文では、iを使って配列の要素を順番に取り出します。
num.lengthを条件にしているため、配列の要素数に合わせて繰り返しが行われます。
ブロックの中では、num[i]によって現在の要素を取り出し、その値をtotalに加えています。
この処理を配列の要素数分繰り返すことで、1から10までの数値がすべて足し合わされます。
最後に、計算された合計が alert で表示されます。
変数と違い、配列で使用すると便利な点があります。
それは配列の要素数が変わっても、lengthを使っているため、同じコードで対応できる点です。
つまり、この先配列に追加・削除しても、要素数に応じて自動で処理されるため、配列数を数える必要がなくなります。
配列は、必ず先頭から順番に処理しなければならないわけではありません。
インデックスの指定方法や更新の仕方を工夫することで、処理する順番や範囲を自由に変えられます。
for文と組み合わせることで、配列の要素を柔軟に扱えるようになります。
コード例
//for4.js
let num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let total = 0;
for(let i=num.length; i>0; i--){
total = total + num[i-1];
}
alert(total);動作例
※このボタンは動作確認用です
このコードは、先の記事と同じ結果が表示されます。
異なる点は、for文の初期化・条件式・更新処理の書き方です。
まず、初期化にi = num.lengthを指定しています。
これは、配列の要素数である10から処理を開始するという意味です。
次に、条件式はi > 0とし、iが0より大きい間だけ処理が実行されます。
更新処理ではi--を指定し、iを1ずつ減らしながら繰り返します。
簡単に言うと、iの初期値をnum.lengthとし、条件式をi > 0にすることで、配列を逆順に処理しています。
ブロックの中では、num[i - 1]の値をtotalに加えています。
これは、配列の要素数とインデックスの最大値が同じではないためです。
最後の要素であるnum[9]から処理するため、i - 1とする必要があります。
このようにiを1ずつ減らしながら処理しても、1から10までの数値がすべて足されるため、結果は同じになります。
for文では更新処理をi--にすることで、配列を後ろから処理することも可能ですが、書き方を誤ると正しく動かないため注意が必要です。
インクレメントとデクレメントは、変数の値を1ずつ増減させるための記法です。
for文の更新処理でよく使われますが、繰り返し処理専用のものではなく、通常の変数操作としても使用できます。
構文
変数++;
変数--;
++はインクレメントと呼ばれ、変数の値を1増やします。
--はデクレメントと呼ばれ、変数の値を1減らします。
これらは変数の値を直接書き換えるための演算子です。
コード例
//incrementDecrement.js
let num1 = 0;
let num2 = 10;
num1++;
num2--;
alert(num1);
alert(num2);動作例
※このボタンは動作確認用です
このようにfor文でなく、通常で書いても動作します。
また、その逆にfor文の更新処理にインクレメントとデクレメントを使用しなくてもかまいません。
ただし、そのような書き方をする機会はほとんどないため、更新処理にはインクレメントかデクレメントを使うと解釈でかまいません。
繰り返し処理では処理が終了しない無限ループが起こる可能性があります。
本来、繰り返し処理は「いつか終わる」ことを前提に書かれます。
しかし、条件式や更新処理の書き方を誤ると、終了条件に到達できず、無限ループが発生します。
いくつか無限ループが起こる例を見ていきます。
なお、動作例は無限ループによりページが固まってしまうため、省略します。
コード例
//forError.js
for(let i = 0; i < 3; i--){
alert(i);
}
このコードでは、条件式は「iが3未満の間」です。
しかし、更新処理がi--になっているため、iは0、-1、-2…と減り続けます。
その結果、iは常に3未満のままとなり、条件に合い続けるため、処理が終了しません。
コード例
//forError.js
for(let i = 0; i < 3; ){
alert(i);
}
この場合、更新処理が書かれていないため、iの値は一度も変わりません。
iはずっと0のままなので、条件式は常に成立し、処理は止まりません。
無限ループは基本的に避けるべきものですが、意図的に使われる場面も存在します。
ただし、それらは高度な制御や停止条件を別途用意した場合に限られます。
現時点では、無限ループはミスによって発生するものとして理解しておくのが安全です。
for文の仕組みを意識して、無限ループが起こらないようにしましょう。