for文を使った繰り返し処理

JavaScript で繰り返し処理を行う方法のひとつである for 文の使い方について解説します。 for 文では指定した回数だけ繰り返し処理を行います。

(Last modified: 2024-09-16)

for文の基本書式

for 文では指定した回数だけ繰り返し処理を行うことができます。書式は次の通りです。

for (初期化式; 条件式; 変化式){
  実行する文1;
  実行する文2;
  ...
}

繰り返し実行する文が 1 つだけだった場合にはブロックを表す {} を省略することができます。

for (初期化式; 条件式; 変化式)
  実行する文;

具体的に見た方が分かりやすいので、簡単なサンプルをみてください。

for (let i = 1; i < 3; i++){
  console.log("i = " + i);
}

console.log('end');

for 文ではまず最初に初期化式を 1 回実行します。 let i = 1 の部分が初期化式です。初期化式が実行されるのは 1 回だけです。

for (let i = 1; i < 3; i++){
  console.log("i = " + i);
}

次に条件式を一度評価します。条件式は i < 3 の部分です。

for (let i = 1; i < 3; i++){
  console.log("i = " + i);
}

条件式を評価した結果として true が返された場合には for 文のブロックの中の処理を順に実行します。 false が返された場合には for 文の次へ処理が移ります。今回のサンプルでは for 文のブロック内に 1 つの文しか記述されていませんが、複数の文を記述した場合は上から順に実行されます。

for (let i = 1; i < 3; i++){
  console.log("i = " + i);
}

ブロック内の処理をすべて実行したら、最後に変化式を 1 回実行します。変化式は i++ の部分です。

for (let i = 1; i < 3; i++){
  console.log("i = " + i);
}

これで繰り返し処理が 1 回行われたことになります。

最初に戻り、今度は初期化式を実行せずに条件式を評価します。 true が返された場合には for 文のブロックの中の処理を実行し、最後に変化式を実行して最初に戻ります。これを 条件式が false を返すまで繰り返します。

それでは for 文が実行されてから for 文の次へ処理が移るまでを実際にひとつずつ見てみます。

-- 繰り返し処理 1 回目 --
1) 初期化式で変数 i に 1 が代入される
2) 条件式 i < 3 が true
3) console.log("i = " + i); が実行される
4) 変化式 i++ が実行されて変数 i の値が 2 となる

-- 繰り返し処理 2 回目 --
5) 条件式 i < 3 が true
6) console.log("i = " + i); が実行される
7) 変化式 i++ が実行されて変数 i の値が 3 となる

-- 繰り返し処理 3 回目 --
8) 条件式 i < 3 が false
9) for 文の実行が終了し次の処理へ

10) console.log('end'); が実行される

実際に先ほどのサンプルを実行してみると、次のようにコンソールに出力されます。

for (let i = 1; i < 3; i++){
  console.log("i = " + i);
}

console.log('end');

>> i = 1
>> i = 2
>> end

for文のいろいろな使い方

for 文は繰り返し処理の中でも指定した回数だけ繰り返しを行いたい場合によく使用されます。その繰り返しの回数をカウントするのが初期化式や条件式で記述する変数なのですが、この変数の値は for 文のブロックの中で参照することができるので初期化、条件式、変化式をそれぞれ工夫することでいろいろな利用方法があります。

例えば下記では 1 桁の 3 の倍数を順にコンソールに表示します。変化式で変数の値を 1 つずつ増加させるのではなく 3 つずつ増加させています。

for (let i = 3; i < 10; i += 3){
  console.log("i = " + i);
}

>> i = 3
>> i = 6
>> i = 9

今度は 5 から 1 までの数値を順にコンソールに表示します。変化式で変数の値を 1 つずつ増加させるのではなく 1 つずつ減少させています。それにあわせて条件式も変えています。

for (let i = 5; i > 0; i--){
  console.log("i = " + i);
}

>> i = 5
>> i = 4
>> i = 3
>> i = 2
>> i = 1

他にも for 文は配列の要素を順に取り出すといった利用などにも使われます。配列の要素数を取得して条件式で利用しています。

const color = ['Red', 'Blue', 'Green'];
for (let i = 0; i > color.length; i++){
  console.log(color[i]);
}

>> Red
>> Blue
>> Green

カンマ演算子を使って複数の変数を変化させる

通常 for 文では初期化式や変化式では 1 つの変数について記述しますが、カンマ演算子を使って複数の変数に対して初期化を行ったり値の変化を行うことができます。

for (初期化式1, 初期化式2; 条件式; 変化式1, 変化式2){
  実行する文1;
  実行する文2;
  ...
}

※ カンマ演算子については「カンマ演算子」をご参照ください。

例えば次のように記述します。

for (let i = 1, j = 4; i < 5; i++, j--){
  console.log("i = " + i + ", j = " + j);
}

>> i = 1, j = 4
>> i = 2, j = 3
>> i = 3, j = 2
>> i = 4, j = 1

初期化式では変数 i と j について宣言と初期化を行い、変化式でも変数 i と j を共に変化させています。複数の変数を同時に変化させる使い方はあまり行われないと思いますが、一応覚えておいてください。

なお複数の変数を同時に変化させるのではなく、すべての組み合わせを行うようにすることもできます。「for文の中でfor文を実行する」を参照されてください。

-- --

JavaScript で繰り返し処理を行う方法のひとつである for 文の使い方について解説しました。

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。