プログラミングを行う際に、何かしらの条件に応じて繰り返しの処理を行う機会があります。JavaScriptで繰り返し処理をするために用意されているのがfor文やwhile文です。
今回はfor文を取り上げて、繰り返し処理の基本や使いかたについて解説します。
繰り返し処理（ループ）とは？
繰り返し処理とは、ある条件下において何らかの行為を繰り返し実行するための処理です。「ループ（Loop）」とも言われています。
例えば、ユーザーがクイズアプリの回答をしている場面を考えてみましょう。
「5問正解するまでは問題を出し続け、5問正解したら別画面に切り替わる」といった実装では、正解数が5回に達するまで問題を出し続ける、つまり繰り返し処理を行う必要があります。
こうしたときに役立つのがfor文を使った繰り返し処理です。
for文
for文とは、決められた回数だけ繰り返し処理を行う制御文です。
for文の基本構文
for (初期化式; 条件式; 変化式) {
実行する処理1;
実行する処理2;
実行する処理3;
}ブロック{}に囲まれた文が、繰り返しを行う処理文です。
繰り返し処理文が1つだけの場合、ブロックを省略して一行で書くこともできます。
処理文が短いものは、このように一行に書くことで可読性が上がります。
for (初期化式; 条件式; 変化式) 実行する処理;ではもう少し具体的にfor文の括弧（）の中にある式と実行される処理について解説します。
サンプルコード
for (let i = 0; i < 5; i++) {
console.log((i + 1) + '回目の処理です');
}出力結果
1回目の処理です
2回目の処理です
3回目の処理です
4回目の処理です
5回目の処理です
何らかの条件によって処理が5回繰り返されていることが分かります。
それぞれの式の定義は以下です。
初期化式
変数宣言を用いて、変数の初期値を設定しています。
変数iはカウンタ変数と呼ばれ、繰り返し処理を制御するための慣習としてアルファベットの「i」が使われています。カウンタ変数の値に決まりはありませんが、通常は初期値を０にすることが好ましいです。理由は、０から始まる配列のインデックス番号を操作する際に都合が良いためです。
条件式
「変数の値が5よりも小さい場合」と条件の設定をしています。
変化式
変数の値が1ずつ加算されます。全体の処理の流れを追っていくと、このようになります。
- 初期化式「let i = 0;」が実行される
- 条件式「i < 5」が評価される。trueの場合はfor文のブロック内の処理に進み、falseの場合はfor文のループから抜ける
- ブロック内の処理「console.log((i + 1) + ‘回目の処理です’)」が実行される
- 変化式「i++」が実行される
- 2のステップに戻り、条件式の評価が行われる
この流れを踏まえて出力結果を確認すると、初期値０だった変数は、値が4（5未満）になるまでメッセージが繰り返し出力され、値が5に到達すると、ループから抜けているのが分かります。また、変数は、処理が行われる度に値が1ずつ増えていることにも気が付きます。
for文の基本をおさえたところで、オブジェクトを使った繰り返し処理方法をみていきましょう。
for…in文
for…in文は、オブジェクト（連想配列）に格納されたすべての列挙可能なプロパティに対して、順不同で繰り返し処理を行います。プロパティの数の分だけ繰り返し処理が行われ、そのつど、変数の中にプロパティが一つずつ格納されます。
for…in文の基本構文
for (変数 in オブジェクト) {
実行する処理;
}サンプルコード
let obj = {year: 2020, month: 12, date: 31};
for (let item in obj) {
console.log(item);
}出力結果
year
month
date
結果から分かるように、変数にはオブジェクトの値ではなく、プロパティが格納されます。
「オブジェクト［変数］」のようにして、オブジェクトの値を取り出すことも可能です。
let obj = {year: 2020, month: 12, date: 31};
for (let item in obj) {
console.log(obj[item]);
}出力結果
2020
12
31
このようにfor…inを使用することで、オブジェクトに格納した値も調べることができます。
しかしfor…inは、順不同に処理が行われることに注意が必要です。実行すると大体の場合はプロパティの格納順に処理が実行されますが、順番が保証されているものではありません。
つまり、上記のプロパティの値が「31→12→2020」という順番で出力される可能性もあるということです。
順番に意味があるオブジェクトを操作する場合は、下記で解説するfor…ofを使用すると良いでしょう。
for…of文
for…of文とは、iterableオブジェクトと呼ばれる反復可能なオブジェクトに対して、順番に繰り返し処理を行います。iterableオブジェクトの代表的なものとして配列があげられます。配列に含まれる要素が変数として取り出され、要素の数分の繰り返し処理が行われることが特徴です。
for…in文の基本構文
for (変数 of 配列) {
実行する処理;
}サンプルコード
let array = [100, 200, 300];
for (let item of array) {
console.log(item);
}出力結果
100
200
300
for…inとは違い、配列の値がそのまま順番に変数に入るため、使いやすいです。
また、以下のように文字列に対しても列挙させることができます。
サンプルコード
const string = '文字列';
for (const value of string) {
console.log(value);
}出力結果
文
字
列
for…ofは、配列や文字列以外にも、TypedArrayやMap、Setなど、複数のiterableオブジェクトに対して使用することができるため、非常に利便性が高いです。
しかし、for…ofはES6から新しく導入されたため、IEのブラウザでは相互性がなく、現時点でもサポートされていないため、注意してください。
オブジェクトのプロパティに対して繰り返し処理が必要な場合はfor…inを使い、それ以外はfor…ofを使用すると良いでしょう。
continueとbreak
ここまでforの使いかたを解説してきましたが、もう少し複雑な処理を行う際に使えるcontinueとbreakについても知っておくと便利です。
どちらもif文を記述することで、ループの中で処理を飛ばす働きをします。
continue
for (let i = 0; i < 10; i ++) {
実行する処理1;
if (条件式) continue; //trueの間は実行する処理2をスキップさせる
実行する処理2;
}continueを使用すると、if文がtrueである間は以降の処理をスキップし、falseになると繰り返し処理中の文の処理がスキップされ、次の処理に渡ります。
break
for (let i = 0; i < 10; i ++) {
実行する処理1;
if (条件式) break; //trueになるとループから抜けるため、処理2はスキップされる
実行する処理2;
}breakは、if文がtrueになると繰り返し処理の途中であっても強制的にループから抜けることになり、繰り返し処理は終了となります。
実際にサンプルコードをみてみましょう。
for (let i = 0; i < 10; i ++) {
console.log(i);
if (i < 5) {
continue;
} else {
console.log(i + 'になったのでループから抜けます');
break;
}
}出力結果
0
1
2
3
4
5
5になったのでループから抜けます
1行目から4行目の処理が繰り返されますが、変数が5に到達すると、continueにより処理がスキップされます。そのままループのはじめに戻り、3〜4行目を抜いた処理が繰り返されます。7行目のbreakにたどり着くと繰り返し処理は終了です。
サンプルはcontinueとbreak両方記述していますが、どちらか片方だけを記述することも可能です。
このように、continueとbreakを使用すると、さらに細かい繰り返し処理の制御ができるようになります。
まとめ
今回はfor文を使った繰り返し処理について解説しました。
繰り返し処理の方法はさまざまありますが、まずは繰り返し処理の基本であるfor文をおさえることが大切です。
- オブジェクトのプロパティに対する繰り返し処理ならfor…in
- 配列の要素に対する繰り返し処理ならfor…of
- 繰り返し処理を細かく制御するならcontinueとbreak
以上のことを意識してfor文の繰り返し操作に取り組んでいきましょう。
Javascript関連記事
