• 1．繰り返し処理とは？
• 2．JavaScriptのfor文とは？
• 3．for文の基本的な使い方
• 4．カンマ演算子で複数の変数・変化式を記述
• 5．for文を途中で抜ける方法
• 6．for-in文の使い方
• 7．for-of文の使い方
• 8．forEachメソッドの使い方
• 9．繰り返し処理の比較

今回は、繰り返し処理を効率よくコーディングできるfor文について学習します。

本記事では、

「for文の使い方は？」「for文を途中で抜ける方法は？」

といった内容から

「for-in文やfor-of文とは？」「繰り返し処理の使い所は？」

といった内容まで、初級者エンジニア向けに詳しく解説していきます。

1．繰り返し処理とは？

プログラミングにおける繰り返し処理とは、ある条件下で同じ処理を繰り返し実行する処理のことです。

例えば、「取得したレコード件数分プリントアウトする」といった処理や、「指定した回数分加算する」といった処理で、繰り返し処理を使用すると効率的にコーディングができます。

一般的なプログラミング言語において、繰り返し処理の構文に”for文”や”while文”があります。

2．JavaScriptのfor文とは？

ここでは、繰り返し処理の基本となるfor文について解説していきます。

for文は、「繰り返し回数を指定できる」「繰り返し処理前に初期値の設定を行う」といったことが特徴です。

同じく繰り返しを行う構文にwhile文がありますが、while文は繰り返し回数が決まっておらず、条件を満たす間は処理を繰り返す構文となっています。プログラムの仕様によって使い分けるようにしましょう。

3．for文の基本的な使い方

ここからは、for文の基本的な使い方をみていきましょう。

①基本構文

for文の基本構文は次の通りです。

for(初期値; 条件式; 変化式){
  繰り返す処理1
  繰り返す処理2
}

繰り返す処理がひとつだけの場合、ブロックを省略して、一行で書くこともできます。

for(初期値; 条件式; 変化式) 繰り返す処理;

サンプルコードを見てみましょう。

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

サンプルコードは、コンソールへの出力を3回繰り返す処理です。

forの後括弧内の式は、次のように構成されています。

初期値

初期値は、for文内で使われるカウンタ変数の初期値を設定します。初期値が実行されるのは1回だけです。

上図のサンプルコードでは、 let i = 0; の部分が初期値部分となります。

条件式

サンプルコードの、i < 3; の部分が条件式です。条件式を評価し、trueの場合はブロック内の処理を順に実行。falseの場合はfor文の次の処理を実行、という流れになります。

変化式

変化式には、ブロック内の処理終了ごとに、カウンタ変数をどのように変化させるか記述します。サンプルコードのi++ は、ブロック処理終了時にiをひとつ増やします。その後、次のループを実行するかfor文を終了するか、条件式で評価します。

②基本的なループ処理

for文の基本構文を理解したところで、基本的なループ処理をサンプルコードで確認しましょう。

サンプルコードでは、1から100までの数値を加算し、ログに出力しています。

let sum = 0;
for(let i = 1; i <= 100; i++){
  sum += i;
}

console.log(sum);

実行結果：

5050

実行結果から、1から100まで加算されていることがわかりますね。

③配列を使ったループ処理

for文は、配列要素を順に取得する、といったことにも使われます。カウンタ変数で配列要素を指定し、値を取り出します。サンプルコードを確認しましょう。

var dayofweek = ['Mon.','Tue.','Wed.','Thu.','Fri.','Sat.','Sun.'];

for(let i = 0; i < dayofweek.length; i++){
  console.log(dayofweek[i]);
}

実行結果：

Mon.
Tue.
Wed.
Thu.
Fri.
Sat.
Sun.

for文を使うと、配列の中身を簡単に出力できることがわかりますね。

4．カンマ演算子で複数の変数・変化式を記述

ここでは、JavaScriptで複数の式を記述できるカンマ演算子について説明していきます。カンマ演算子を使うと、複数の変数に対して初期値を設定できたり、複数の変化式を設定できたりします。

for文におけるカンマ演算子の構文は次の通りです。

for(初期値1,初期値2; 条件式; 変化式1,変化式2){
  処理1;
  処理2;
}

具体的には、以下のように記述します。

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

実行結果：

1,10
2,9
3,8
4,7
5,6
6,5
7,4
8,3
9,2
10,1

このサンプルコードでは、変数iと変数jを宣言し、それぞれ初期値を設定しています。変化式もiはインクリメント（++）を設定し、jはデクリメント（—）を設定しています。

実行結果から、iは1ずつ加算され、jは1ずつ減算されていることがわかりますね。

5．for文を途中で抜ける方法

ここでは、実務作業でもよく使用される”break文”や”continue文”について説明していきます。

①break文

JavaScriptのfor文で、処理の途中でループから抜けるには、break文を使います。

サンプルコードで確認してみましょう。

let multi = 0;
for(let i = 1; i <= 10; i++){
  multi = i*i;
  if (multi >= 10){
    break;
  }
  console.log(multi);
}

実行結果：

1
4
9

サンプルプログラムは、カウンタ変数を二乗した結果が10以上の場合、ループを抜けるようにしています。

②continue文

continue文は、以降の繰り返し処理をスキップし、次の繰り返し処理を開始します。

サンプルコードで確認してみましょう。

for(let i = 1; i <= 10; i++){
  if (i % 2 != 0){
    continue;
  }
  console.log(i);
}

実行結果：

2
4
6
8
10

このサンプルコードは、カウンタ変数が2で割り切れない奇数のときにcontinueする条件にしています。実行結果から、カウンタ変数が奇数のときは、スキップされているのがわかりますね。

6．for-in文の使い方

for-in文を使うことで、オブジェクトの中身を効率よく抽出できます。for文との違いは、初期化やループ条件の記述をしなくても、中身のそれぞれを抽出できることです。

①基本構文

for-in文の基本構文は次の通りです。

for(let 変数 in オブジェクト){
  繰り返す処理1
  繰り返す処理2
}

このように記述することで、”変数”にオブジェクトのプロパティ名が格納され、ループ処理します。

②サンプルコード

では、実際のサンプルコードで確認してみましょう。

let objPC = {
  CPU:'Core i9',
  Memory:'16GB',
  Storage:'256GB'
}

for (let item in objPC){
  console.log(item);
}

実行結果：

CPU
Memory
Storage

実行結果からもわかるように、変数にはオブジェクトのプロパティ名が入ります。オブジェクトの値を出力したい場合は、次のように記述します。

let objPC = {
  CPU:'Core i9',
  Memory:'16GB',
  Storage:'256GB'
}

for (let item in objPC){
  console.log(objPC[item]);
}

実行結果：

Core i9
16GB
256GB

7．for-of文の使い方

for-of文は、配列など複数要素をもつiterableオブジェクトに対し、要素をひとつずつ取り出して繰り返し処理を行います。

①基本構文

for-of文の基本構文は以下の通りです。

for(let 変数 of iterableオブジェクト){
  繰り返す処理1
  繰り返す処理2
}

②サンプルコード

それでは、for-of文のサンプルコードを見てみましょう。

let numbers = ['one','two','three'];

for(let number of numbers){
  console.log(number);
}

実行結果：

one
two
three

このように、for-of文は、for文のように条件式や変化式を書く必要がないので、コードがシンプルになります。

8．forEachメソッドの使い方

forEachメソッドは、配列に含まれる要素をひとつずつ順に取り出し、コールバック関数へ渡して処理を行います。for-in文やfor-of文と違う点は、forEachはArrayオブジェクトのメソッドなので、配列の繰り返し処理のみ行えるところです。

forEachメソッドについてより詳しく知りたい方は、以下の記事もチェックしてみてください。

9．繰り返し処理の比較

最後に、JavaScriptにおける繰り返し処理を比較します。それぞれの特徴を把握し、適切なシーンで使用しましょう。

while文もfor文と同様に繰り返し処理ができます。使い分けとして、繰り返し回数が決まっているときはfor文を使い、繰り返し回数が決まっていないときはwhile文を使うのがおすすめです。

ただしwhile文は、終了条件を間違えたりbreakを忘れたりすると、無限ループになるので気をつけましょう。