JavaScriptで同じ処理を繰り返す場合に使うのが「for文」です。for文はJavaScriptを扱う上では、使用頻度の高い構文の一つになります。for文の基本的な使い方から応用までを解説します。新人SE・PG研修でも重要度の高いfor文を使えるようになりましょう。

JavaScriptにおけるforの役割

JavaScriptで、同じ処理を何回も繰り返したいときがありますが、何度も同じ命令文を繰り返し書くのは手間がかかりますし、スムーズなコードとは言えません。そのようなときに使うのがfor文です。

for文を使うために、まずはforの役割について理解しましょう。

forとは？基本を整理しよう

for文は、決められた回数を繰り返すための構文です。JavaScriptに限らず、色々なプログラミング言語でfor文は使われます。

JavaScriptの場合、for文は以下のように記述します。

for(初期値;条件式;変数の増減){
　//処理の内容
}

「初期値」とは、繰り返す回数の初期値、「条件式」とは、繰り返しを行う条件です。「変数の増減」は、初期値を増減する式のことです。

例えば、以下のようなfor文があったとしましょう。

for(let count = 1;count<=10;count + =1){
　//処理の内容
}

これは、カウントを1から始め、1回処理をするごとに回数に1が加算される。それを10回繰り返す、という意味になります。

for文とwhile文との違い

for文は繰り返す回数が決まっているときに使い、while文は繰り返す回数が決まっていないときに使います。for文と比べて処理速度が速いという特徴があって、動的なアプリやゲームなどで使われます。

let count = 1; while(count <= 100){
　//繰り返し処理の内容
}

例えばこのように記載した場合は、「countの値が100になるまで、繰り返し処理を実行する」という処理を行います。

反復処理と無限ループの注意点

例えば、次の式を見てみましょう。

for(let count = 1;count<=10;count - =1){
　//処理の内容
}

これは、「処理を行うごとに値を1減算する」という処理になっています。この式では、逆に値が減っていくため、いつまで繰り返しても10に移行することなく、条件を満たし続けます。

この場合、処理が無限にループしてしまいます。また、次の式も見てみましょう。

let count = 1; while(count <= 100){
　console.log(count);
}

この式では、値を更新する記述がありません。この場合、何度繰り返しても値が更新されずに無限ループしてしまいます。

■関連記事

フロントエンド(HTML・CSS・JavaScript)入門5日ー株式会社ジョブサポート

JavaScriptのfor文で配列を扱うポイント

for文では、配列の処理をループさせることも可能です。その場合どのように記述をするのか、また配列でfor文を使う場合の「for of」と「for in」の違いについても見ていきましょう。

for文における配列の基本

配列を使うと言っても、基本文と大きな差はありません。

let vegetable = ["じゃがいも", "にんじん", "たまねぎ","ピーマン"];
for(let i = 0;i<4;i ++){
　console.log(vegetable[i]);
}

この式では、配列の要素数は4です。全ての要素を出力するためには、条件を4までとしなければなりません。

また、「i ++」は、「i = +1」を省略した書き方です。

「for of」と「for in」の違い

「for of」と「for in」でそれぞれ、コードを見てみましょう。

for (let fruit of ["りんご", "みかん", "バナナ", "レモン", "なし", "パイナップル"])
console.log(fruit);

この場合、以下のように出力されます。

りんご みかん バナナ レモン なし パイナップル

つまり、「for of」はvalue（オブジェクトの値）を取り出す際に用います。

for (let fruit in ["りんご", "みかん", "バナナ", "レモン", "なし", "パイナップル"])
console.log(fruit);

一方、先ほどの「for of」を「for in」に変えて出力すると以下のようになります。

0 1 2 3 4 5

つまり、「for in」で処理するのはインデックス番号です。

処理をスキップする continue

繰り返しの中でも、特定の処理をスキップする際に使われるのが「continue」です。

let fruit = ["りんご","みかん","バナナ","なし","パイナップル"];
for (let i=0;i<fruit.length;i++){
　if(fruit[i]=="りんご"||fruit[i]=="なし"){
　　continue;
　}
　console.log(fruit[i]);
}

この式では、「配列のデータが”りんご”と”なし”のときはスキップする」という処理をしています。そのため、結果は以下のように表示されます。

みかん
バナナ
パイナップル

この特定の条件のときにスキップするのが、continueの基本的な使い方です。

処理を強制的に抜ける break

「break」は、ループ処理を強制的に抜ける場合に使われます。

let fruit = ["りんご","みかん","バナナ","なし","パイナップル"];
for (let i=0;i<fruit.length;i++){
　if(fruit[i]=="バナナ"){
　　break;
　}
　console.log(fruit[i]);
}

上記の式では、「オブジェクトの値が”バナナ”のとき、強制的にループを抜ける」という処理をしています。そのため、結果は以下のようになります。

りんご
みかん

■関連記事

オンライン・リモート講座(入門5日・基礎10日)ー株式会社ジョブサポート

JavaScriptのfor文で「forEach」

配列でfor文を使う場合、もっと簡単な処理の仕方があります。

それが「forEach」メソッドを使う処理です。具体的な記述の仕方を見てみましょう。

「forEach」は配列を繰り返せる

「forEach」は、配列にのみ使用できるfor文です。配列でfor文を記述する際にコードを省略した上でさまざまなことができます。

const data = ["りんご","みかん","バナナ"]; data.forEach((value,index,array) => { 
　console.log(××××);
});

この「××××」に、データとして指定しているいずれかを記述してみましょう。結果は次の通りになります。

//console.log(value);と記述した場合
りんご
みかん
バナナ
//console.log(index);と記述した場合
0
1
2
//console.log(array);と記述した場合
['りんご','みかん','バナナ']
['りんご','みかん','バナナ']
['りんご','みかん','バナナ']

continueやbreakを使えない

forEachを使う場合の注意点として、通常のfor文のように、処理のスキップや中断をする「continue」や「break」の処理を記述できません。

処理を中断する場合の方法の一つとしては、「some関数」を使うという方法があります。

let arr = ["りんご","みかん","バナナ","なし","パイナップル"];
arr.some(function(i){
　if( i == "なし" ){
　　return true; 
　}
　console.log(i);
});

some関数は、trueの値を返すまで処理を継続するという関数です。上記の場合、「なし」の値を返したとき、値がtrueになり、処理が中断されます。

りんご
みかん 
バナナ

結果、上記のような値が返って来ます。

■関連記事

プロエンジニア育成コース(Java1~3ヶ月)ー株式会社ジョブサポート

JavaScriptで基本のfor文。上手な使い分けを

繰り返し処理のfor文は、JavaScriptを使う上では基本となります。条件による使い分けや、配列によって色々な使い方ができるので、習得していきましょう。

for文の中にも、「for in」「for of」「forEach」などがあります。それぞれの役割と使い方を知ることが、JavaScriptへの理解を深めることにつながります。