catch-img

新人SE・PG研修にも使える!JavaScript入門者向けfor文の使い方。基本から発展まで

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

目次[非表示]

  1. 1.JavaScriptにおけるforの役割
    1. 1.1.forとは?基本を整理しよう
    2. 1.2.for文とwhile文との違い
      1. 1.2.1.反復処理と無限ループの注意点
  2. 2.JavaScriptのfor文で配列を扱うポイント
    1. 2.1.for文における配列の基本
    2. 2.2.「for of」と「for in」の違い
    3. 2.3.処理をスキップする continue
    4. 2.4.処理を強制的に抜ける break
  3. 3.JavaScriptのfor文で「forEach」
    1. 3.1.「forEach」は配列を繰り返せる
    2. 3.2.continueやbreakを使えない
  4. 4.JavaScriptで基本の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);
}

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

■関連記事

  JavaScriptで条件分岐の方法。ifとelseの書き方と使い方の違い | 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート ifとelseを使った条件分岐の記述は色々なプログラミング言語で使いますが、JavaScriptの場合はどのように記述をするのでしょうか。それぞれの使い方、書き方の違いについて、サンプルコードを使いながら詳しく解説します。 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート

フロントエンド(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]);
}

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

りんご
みかん

■関連記事

  JavaScriptの本9選。初心者から中級者までレベル別に紹介 | 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート JavaScriptを基礎から学びたい初心者や、現場で使えるテクニックを身に付けたい中級者には、自分の実力に合った本での学習がおすすめです。初心者から中級者までにおすすめできる、JavaScriptの学習本を紹介します。 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート

オンライン・リモート講座(入門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になり、処理が中断されます。

りんご
みかん 
バナナ

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

■関連記事

  基礎から学ぶJavaScript研修。プランやカリキュラム解説 | 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート JavaScriptに関して知識があまりなく、どのような研修を行えばエンジニアやエンジニアを目指す従業員に効果的か分からない人事の方もいるでしょう。この記事では、研修の具体的なプランやカリキュラムについて解説していきます。 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート

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

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

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

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

ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava・フロントエンド研修(通学、オンライン・リモート講座)の受け入れを行っており、助成金を活用すれば費用負担を軽減して研修受講ができるのでお気軽にお問い合わせ下さい。


下記フォームを入力して

資料(全12P)を見る

職場で使用されているアドレスをご記入下さい。

アップロードしています。少々お待ちください。