JavaScript　#3　繰り返し処理

2020年12月12日

前回は、条件分岐に関してまとめてみましたので、今回は繰り返しの処理制御に関してまとめていきたいと思います。

繰り返し処理

プログラムでは、データに対して何回も処理を繰り返し行うケースがあるかと思います。JavaScriptでは繰り返し処理は以下の構文にて行うことができます。個人的な考えではfor、Whileと２つの実装ができるが、コード上ではどちらからに統一しておいたほうがメンテナンスしやすいと思います。

for特定の回数を繰り返すときに使用する。
for in配列やオブジェクトの要素に対して繰り返し実行するときに使用するが、
実行環境（ブラウザなど）によっては順序性が保証されていない問題点もあるため、あまり使わないほうが良い。
for of 配列の要素に対して繰り返しなどを行うときに使用する。
ES6以降で実装された機能で、便利！
whileforと同じような使い方ができるが、コードはforで統一したほうが見やすい。
labelBasic言語のgoto文のような繰り返しが実装できるが、ほとんど使わない。

for文

それではfor文から見ていきましょう。
for文は以下のような構文となっており、特定回数を繰り返すときに使用します。
変数ｉの値を最初は0とし、1回繰り返すごとに変数iに１を足して、変数iが10より小さい間繰り返す。
（要は１０回繰り返します）

for(i=0;i<10;i++){
  console.log("いまは" + i + "回目の処理です。");
}

if文同様にfor文の中にfor文を入れることは可能です。ただし、繰り返しの順番は、内側のforが繰り返し終わってから外側のforが繰り返すため、処理の順序性には気をつける必要があります。

for(i=0;i<3;i++){
  console.log("変数iの" + i + "回目の処理です。");
  for(j=0;j<5;j++){
    console.log("変数jの" + j + "回目の処理です。");
  }
}

ちなみに繰り返し用の変数は減らしていくこともできます。（カウントダウン）

for(i=10;i>=0;i--){
  console.log("カウント" + i + "！！");
}

for of

for ofとは、配列やオブジェクトの要素を一つずつ格納されている順番に、取得して繰り返す構文です。
JavaScriptのES6から実装されたものですが、配列、オブジェクトに格納されているデータに対してはforに比べると非常に使いやすいです。

使い方はこんな感じ。
配列fruitsに格納されているデータを一つずつ繰り返し処理用の変数value順番に格納し、for文内の処理（この例ではconsole.log）を行います。

//配列
const fruits = [
  'りんご','ばなな','なし','みかん'
];

for ( value of fruits ){
  console.log(value);
}

ちなみに、非推奨となっているfor inは上記の例のof部分をinに変えれば動作しますが、この場合、変数Valueには配列のデータではなくインデックス（データの格納番号）が取得されます。処理として配列のインデックスがほしいケースよりデータが欲しい場合のほうが多いので、for ofのほうが使いやすいですね。

while

while構文は多くの言語同様にforと同種の繰り返し処理を作ることができます。ただし、同じプログラムの中に、forとWhileを混在するとメンテナンス性が損なわれるので基本はforで統一したほうが良いです。

While文の書き方はこんな感じ。
while()内に指定した評価式が真（number<10)が条件を満している間）の場合に繰り返し処理を行います。While文で気をつけたいのは、評価式の値を変化する処理（この例だとnumber++）を忘れたりすると無限ループに陥るのでその点は注意が必要です。

let number =0;

while (number < 10){
  console.log("いまは" + number + "回目の処理です");
  number++;
}

以上、今回は代表的な繰り返し制御構文をまとめてみました。

Program

Posted by Qtaro