JavaScriptで条件に応じて繰り返しの処理をするために用意されているのが for文です。
for文は基本となる構文ですが、使い方を間違えるとfor文から抜け出すことができず、永遠に処理をループしてしまうことがあります。
この記事は、for文の使い方とサンプルを用意していますので、JavaScriptのfor文について抑えておきましょう。
for文 について
for文とは、条件指定された回数だけ処理を繰り返して実行するための構文です。この繰り返すことを「ループ」と言ったりします。
同じ処理を何度も繰り返し実行したい場合に利用されるので、プログラミングでは度々登場するほど使用頻度が高い構文の1つです。
同じ処理を何度もコードに書いてしまえば、処理を繰り返すことができます。ただ、コードの修正が必要になった時に同じ部分を何度も修正しなければならなかったり、コードが読みづらくなってしまうというデメリットがあります。
そこでfor文を使うことで処理を簡素化し、コード量が減って読みやすいコードを書くことができます。
const quizs = ['カレー', 'うどん', '牛丼', 'ラーメン', 'ちゃんぽん'];
console.log('今日は' + quizs[0] + 'を食べました。'); // 今日はカレーを食べました。
console.log('今日は' + quizs[1] + 'を食べました。'); // 今日はうどんを食べました。
console.log('今日は' + quizs[2] + 'を食べました。'); // 今日は牛丼を食べました。
console.log('今日は' + quizs[3] + 'を食べました。'); // 今日はラーメンを食べました。
console.log('今日は' + quizs[4] + 'を食べました。'); // 今日はちゃんぽんを食べました。
const quizs = ['カレー', 'うどん', '牛丼', 'ラーメン', 'ちゃんぽん'];
for(let i = 0; i < quizs.length; i++){
console.log('今日は' + quizs[i] + 'を食べました。');
}
// 今日はカレーを食べました。
// 今日はうどんを食べました。
// 今日は牛丼を食べました。
// 今日はラーメンを食べました。
// 今日はちゃんぽんを食べました。
同じ出力結果になりますが、for文の方が直観的で分かりやすいコードにすることができます。
では、for文の使い方をみてみましょう。
for文 の使い方
ループ処理を制御するfor文の基本的な書き方は次の通りです。
for (初期化式; 条件式; 変数式;) {
//ここに実行する処理を書く
});
中括弧{}の中に実行したい処理を記述します。処理はいくつでも書くことが可能です。
処理文が1つだけなら、ショートコードで書くことも可能です。中括弧を外して次のように1行にして書くことができます。
for (初期化式; 条件式; 変数式;) 実行する処理;
初期化式
カウンター変数の宣言を行い、変数の初期値を設定します。
for文ではカウンター変数はアルファベットの i をよく用いられます。もちろん、変数の名前は自由に書くことができます。
また、初期値については通常0にします。これは配列のインデックス番号が0から開始されるためです。配列以外のループ処理をする場合は0以外の値をセットすることがありますので、ケースバイケースで使い分けをしましょう。
条件式
ループする回数を設定します。この設定を間違えてしまうと永久にfor文から抜け出すことができないので設定には注意が必要です。
例としては、「カウンター変数の値が配列の要素数10より小さい場合に処理を実行する」などの設定をします。
変数式
カウンター変数の値を変化させます。通常は配列を扱うことが多いため、変数の値をインクリメント(1ずつ足す)します。場合によってはデクリメントする場合などがありますので、ケースバイケースで使い分けをしましょう。
for 文の処理の流れ
上記の内容を踏まえて、for文の処理の流れを整理すると処理の流れは次のようになります。

①カウンター変数の宣言・初期化など(初期化式)を行います。for文が実行された際に1回だけ実行されます。
②繰り返しを行うタイミングで条件式が毎回実行されます。この式が真(true)なら処理が実行され、偽(false)ならfor文が終了します。
③実行する処理は②の条件式がtrueのみ実行されます。
④変数式の操作が行われて、②の条件式が実行されます。(ループする)
for 文の使用例
数値を倍に変換する
const values = [1, 2, 3, 4, 5];
for(let i = 0; i < values.length; i++){
console.log(values[i] * 2);
}
// 2
// 4
// 6
// 8
// 10
配列の要素に2を掛けることで倍数になって出力しています。配列の要素数の回数だけ(5回)繰り返し処理されていることが分かります。
配列の要素の長さを取得する
const values = ['かぼちゃ', '玉ねぎ', '人参', '肉', 'じゃがいも'];
for(let i = 0; i < values.length; i++){
console.log(values[i].length);
}
// 4
// 3
// 2
// 1
// 5
for文をネスト(入れ子)する
for文の中にfor文をネストすることができます。2回for文を使うことで掛け算の九九をつくれます。
for(let a = 1; a <= 9; a++){
for(let b = 1; b <= 9; b++){
console.log(`${a} x ${b} = ${a * b}`)
}
}
// 1 x 1 = 1
// 1 x 2 = 2
// 1 x 3 = 3
// 1 x 4 = 4
// 1 x 5 = 5
// ...
コンソールに文字列の中に変数の値をいれて出力するために、テンプレートリテラルを使用しています。
テンプレートリテラルは文字列をバッククオート(`)で囲みます。さらに${…}の書式で中括弧の中に変数や演算などを書くことで値を展開することができます。
偶数と奇数を判定する
for文とif文を組み合わせて使用することがよくあります。
const values = [0, 1, 13, 46, 55];
for(let i = 0; i < values.length; i++){
let str;
if (values[i] % 2 == 0){
str = '偶数';
}else{
str = '奇数';
}
console.log(`${values[i]}は${str}です`);
}
// 0は偶数です
// 1は奇数です
// 13は奇数です
// 46は偶数です
// 55は奇数です
for-of 文の使用例
for文のもう一つの構文として、for-of 文があります。
この構文を使う場面として配列内の要素を扱うことが挙げられます。配列の要素を1つずつ取り出して、配列に格納されている順番に繰り返し処理を行います。ループ処理は要素の数だけ実行されます。
配列の各要素に繰り返し処理を行いたい時に使うことができます。
const values = [0, 1, 13, 46, 55];
for(let value of values){
console.log(value);
}
// 0
// 1
// 13
// 46
// 55
このようにfor文と比較するとよりシンプルに記述することができます。
ただ、for-of 文は要素のインデックス番号を取得することができません。こういう場合は for 文を利用するといいでしょう。
break 文の使用例
for文は繰り返し処理中に途中で処理を強制的にループから抜け出すことが可能です。これを行うのが break 文です。
下の図にあるようにbreak文が実行される if条件が真(true)なら break文でfor文を終了します。
const values = [0, 1, 13, 46, 55];
for(let i = 0; i < values.length; i++){
if (values[i] == 13){
break;
}
console.log(values[i]);
}
// 0
// 1
if条件で配列の要素が「13」ならbreakが実行され、for文から抜けていることが実行結果から分かります。
for(let a = 1; a <= 9; a++){
for(let b = 1; b <= 9; b++){
if (b == 2){
break;
}
console.log(`${a} x ${b} = ${a * b}`)
}
}
// 1 x 1 = 1
// 2 x 1 = 2
// 3 x 1 = 3
// 4 x 1 = 4
// 5 x 1 = 5
// 6 x 1 = 6
// 7 x 1 = 7
// 8 x 1 = 8
// 9 x 1 = 9
実行結果の通り、内側のfor文でbreakが呼ばれても、外側のfor文は抜け出していないことが分かります。
ループ処理を途中で止めたい場合には break文が役立ちますので、覚えておきましょう。
continue 文の使用例
for文のループ内で条件によって実行する処理をスキップさせる場合は、continue文を使います。
下の図のようにループ処理中にスキップされると次の処理が実行されます。
const values = [0, 1, 13, 46, 55];
for(let i = 0; i < values.length; i++){
let str;
if (values[i] % 2 == 0){
continue;
}
console.log(values[i]);
}
// 1
// 13
// 55
break文は「処理を中断させる」ことができる一方、continue文は「処理をスキップする」ので、その後のfor文は実行されます。これらの違いに注意して使い分けをしましょう。
まとめ
この記事ではプログラムでよく使用する for文を使った繰り返し処理について解説をしました。
for文を使うことで繰り返しする処理をまとめることができます。
条件によってループ処理を中断させたり、スキップするにはcontinue文やbreak文を利用することで、より細かく制御することが可能です。
JavaScriptのfor文は基本となる構文なので、ぜひ抑えておきましょう。
以上、最後まで読んでいただきありがとうございました。
関連記事





コメント