format_list_bulleted
【JavaScript】ループ処理(for・forEach・do~while・map)について解説
最終更新日時:2020-05-03 12:47:13



JavaScriptのfor文などの文法による繰り返し処理はコードを簡略化したり、保守性を高める際に非常に有効です。JavaScriptのフレームワークであるVue.jsやReact.jsを使用する際も、こうしたJavaScriptの基本文法の理解は必須なので、しっかりと勉強しましょう。

forを用いたループ

for文は指定した回数、繰り返し処理を行う文法です。例えば以下のように書きます。

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

for文の中のlet i= 5では初期値iを宣言します。i<10では終了条件を記述します。iの値が条件式を満たさず、falseとなったときループ処理を終了します。i++i--のように増減式を書くことで、ループが一度実行されるたびにiが1ずつ増加し、条件式がfalseとなるまでループが繰り返されます。初期値の宣言は最初のループでのみ実行されます。

結果は次のようになります。

5
6
7
8
9

whileを用いたループ

while文はfor文とよく似た文法で、定義した条件式がtrueである際に処理が繰り返される処理を実装します。次のようなコードになります。

let y = 1;
while(y < 10){
  console.log(y);
  y++;
}

初期値yはwhile文の処理外で宣言します。while文の()内に記述されている、y<10は条件式です。yの値が10より小さい場合はwhile内の処理を繰り返します。yが10以上になった場合にループ処理を終了します。

結果は次のようになります。

1
2
3
4
5
6
7
8
9

for文と違うところは「()」内に条件式のみを記述し、増減式や実行したい処理は「{}」(カギかっこ)内に全て記述すると言う点です。

do~whileを用いたループ

do~while文はwhile文とよく似た分布で、最初のdoの{}内で実行する処理、最後のwhileの()内に条件式を記述します。

do{   
  console.log(y);
  y++;
}while(y < 10)

結果は次のようになります。

1
2
3
4
5
6
7
8
9
10

whileとdo~whileの違い

上記の結果とwhile文との結果を見比べると、while文ではyが9までしか出力されていないのに対し、do~while文では10まで出力されています。これはwhile文では最初に条件式の真偽を判定するため、yが10であるとループが終了されるのですが、do~while文では条件の真偽の判定が処理を実行した後に行われるので、y=10が出力されてからループが終了するからです。同じ条件式や同じ処理であってもこうした違いが出るので注意しましょう。

無限ループ

JavaScriptにおいては無限ループを防止することは非常に重要な課題です。無限ループとは条件が永遠にtrueとなり処理が繰り返されることをいいます。次のコードは無限ループを発生させるコードなのでテキストエディターなどに記述しないでください。

let y = 1;
while(y < 10){
  console.log(y);
}

上記のコードにはy++のような増減式が存在せず、yが10以上となることはありません。そのため、while文は処理を永遠に実行し続けてしまいます。こうした無限ループはブラウザーに非常に負荷を与え、様々な障害を招くので注意してください。

forEachを用いた配列のループ処理

forEachメソッドは配列の要素を、順番に定義した関数で処理するメソッドです。配列でループ処理を実装するときはfor文より便利なのでfroEachメソッドを使うほうが良いでしょう。xと言う配列があり、それぞれの要素の数字を二乗させる処理をループさせたい場合は次のようになります。

let x = [1,3,5,7,9]
x.forEach(function(value,index,array){
  console.log(value * value)
});

第一引数のvalueには要素の値、第二引数のindexはインデックス番号、第三引数にはarrayには元の配列を渡すことができます。引数を指定しないと配列の情報を受け取ることができないので注意してください。

結果は次のようになります。

1
9
25
49
81

 mapを用いた配列のループ

mapメソッドはforEachメソッドと同様に配列の要素を順番に処理していくものです。主な違いは mapメソッドは return文による返り値が必須、配列の要素を変更することができないなどの違いがあります。一方で、forEachメソッドは配列の要素を変更させることができ、返り値は常にundefinedとなります。

mapメソッドを使用した例は次のようになります。

let x = [1,3,5,7,9]
let data =x.map(function(value,index,array){
  return value * 2
});
console.log(data)//結果:[2, 6, 10, 14, 18]

上記のコードではxという配列の中の要素を2倍して新しい配列を作る処理を実装しました。mapメソッドもforEachと同様に配列のインデックス番号や値などを引数に指定しないと、配列の情報を処理に受け渡すことができないので注意してください。mapオブジェクトの返り値は配列となります。dataという変数に返り値を格納して、console.logで表示すると、配列として元の要素を2倍した値が格納されていることがわかります。

この記事のまとめ

本記事ではJavaScriptのfor文などを使ったループ処理の扱い方について学びました。ループ処理が実装できるようになると、処理を逐次記述する必要がなくなり、コードの冗長化などを防ぐことができます。最後に本記事で勉強したことをまとめます。

  • 基本的なループ処理はfor文で実装することができる
  • while文もfor文と同じようにループ処理を実装できるが、初期値や処理を記述する場所が違う
  • while文とdo~while文はどちらもループ処理を実行するが、前者が条件式の判定が毎回のループの最初に行われ、後者は最後に行われる
  • 無限ループはブラウザーなどに負担をかけ障害を招くので、注意する必要がある
  • forEachメソッドとmapメソッドはどちらも配列の各要素にループ処理を施すものである
  • forEachメソッドは元の配列の要素変更することができ、返り値は常にundefinedとなる
  • mapメソッドは元の配列の要素を変更することはできず、処理を施した結果の値の配列を返り値として返す

ぜひ、ループ処理を利用して、JavaScriptをさらに便利に使用しましょう!