JavaScriptとループ処理

おはようございます、hamatakBlogです！

今回は、ループ処理を解説したいと思います!

ループってことは、繰り返すって意味かな～？！

そうです！ループ処理は繰り返し処理を行うができるようになります！

プログラムを組むにあたって、必須な処理なので、ぜひ覚えましょう！

ループ処理には、複数の実装方法があります。用途によって使い分けましょう！

それでは、学習スタート！！

for文
while文
do while文
continue文
break文
label文
for in文
for of文

for文

まずは、ループ処理の基本の一つであるfor文について解説します！

JavaScript

// ( 変数の初期化; ループ条件; 加算式 )
for (let i = 0; i <= 5; i++) {
  console.log("for文:" + i);
}

for文は、上記のように記述します。

大きく3つに分かれています。

for文であることを定義するfor
ループ処理の条件やループ回数を記述する( )
ループする処理を記述する{ }

さらに( )の中は、(変数の初期化; ループ条件; 加算式 )に分かれており、セミコロンで区切って定義することができます。

つまり、上記の式は、変数 i = 0 をループするごとに、i++ で加算し、i が 5 以下の場合ループ処理を行うとなります。

そして、ループ内の処理は、console.logで i が加算されていることを確認するようログ出力を行っています。

また、for文の ( ) 内は省略が可能で下記のように記述ができます。

JavaScript

// for文の（;;）内は省略可能
// 条件なしとなるため無限ループに気を付ける必要がある
let forCount = 0;
for (; ;) {
  if (forCount > 5) {
    // 下記でも説明しますが、breakでループ処理を抜けます
    break;
  }
  console.log("for文省略:" + forCount++);
}

ただし、すべてを省略した場合は無限ループとなるためループを抜けるための処理をいれるようにしましょう。break文に関しては、後程解説します。

while文

2つ目は、こちらもfor文と同様にループ処理の基本の一つであるwhile文について解説します！

JavaScript

// for文と違い、ループの条件のみです
let whileCount = 0;
while (whileCount <= 5) {
  console.log("while文:" + whileCount++);
}

while文も、for文と同様の構成となってます。

while文であることを定義するwhile
ループ処理の条件やループ回数を記述する( )
ループする処理を記述する{ }

ただし、for文と違い、( ) の中は、ループの条件式のみ記述が可能です。

またwhile文は ( ) の中を省略はできません。

do while文

while文の派生であるwhile文について解説します！

JavaScript

// 条件：カウントが5以上の場合、ループ処理を行う
// do while文では条件に限らず1回は処理を行い2回目のループを行う時に、
// 条件処理を適応するため、下記では初期値カウント0で「カウントが5以上」の条件を
// 満たさないが、1度だけログ出力処理を行っている
let doWhileCount = 0;
do {
  console.log("do while文:" + doWhileCount++);
} while (doWhileCount > 5);

while文と構成が少し違って見えますが、基本的には、同じです。

while文であることを定義するwhile
ループ処理の条件やループ回数を記述する( )
ループする処理を記述する{ }
do while文であることを定義するdo

ただし、ループ処理の仕方が違います。

do while文では条件に限らず1回は処理を行い2回目のループを行う時に、条件処理を適応します。

そのため上記処理では、初期値カウントが0で、本来「カウントが5以上」の条件を満たさないが、1度だけログ出力処理を行っています。

continue文

続いて、ループ処理内で使うcontinue文について解説します！

JavaScript

// continueは、ループ処理内で使用します
// continueが実行されるとループ内のcontinue以下のループ内処理をスキップし
// ループ処理を再開します
let continueCount = 0;
while (continueCount <= 10) {
  if (continueCount === 5) {
    continueCount++;
    continue;
  }
  console.log("continue文:" + continueCount++);
}

continue文は、ループ処理そのものではなく、実行した時、continue以下のループ内処理をスキップし、またループ処理に戻ります。

上記の例では、continue文が実行されるのはcontinueCountが5の時で、continueが実行された後、continue以下の処理である、console.logは実行がスキップされループ処理に戻ります。

break文

continueと同様にループ処理内で使うbreak文について解説します！

JavaScript

// continueと同様に、ループ処理内で使用します
// breakが実行されると、break以下処理を実行せずに、ループ処理を抜けます
let breakCount = 0;
while (breakCount <= 10) {
  if (breakCount > 5) {
    break;
  }
  console.log("break文:" + breakCount++);
}

break文は、ループ処理そのものではなく、実行した時ループ処理を抜けます。

上記の例では、本来10回ループされるよう条件定義されたwhile文ですが、break文が実行されてループ処理を終了します。

label文

for文、while文などに使うlabel文について解説します！

JavaScript

// 特定のforやwhileに対して、break、continueを実行したいときに、label文をしようします
// 下記では、本来breakしたときに、内側のfor文を抜けるbreakにlabelをつけることによって、
// labelされたwhile文を抜けるよう処理を行っています
// ループ処理がネストされた場合などで使用します
let labelCount = 0;
markLoop:
while (labelCount <= 10) {
  for (let i = 0; i <= 3; i++) {
    if (i === 2) {
      break markLoop;
    }
    console.log("labelCount:" + labelCount + " i:" + i);
  }
  labelCount++;
}

label文は、特定のforやwhileに対して、break、continueを実行したいときに、label文をしようします。

使い方は、for文やwhile文の前に、ラベルを記述。この時ラベルの値は、JavaScriptの予約語でなければどんな文でも問題ありません。そして同じラベルをbreakやcontinueのあとに記述します。

上記の例では、通常直近のループを抜けるbreak文（今回はfor文）ですが、ラベル（markLoop）を記述しているため、while文のループを抜けます。

for in文

forの派生であるfor in文について解説します！

JavaScript

// for文の派生系
// ( 変数 in オブジェト )でオブジェクトのプロパティ（name,age）を
// valueに代入し、valueの数だけループを行う
let object = { name: "Taro", age: 20 };
for (let value in object) {
  console.log("for in文object:" + value + "_" + object[value]);

}
// 配列をいれた場合は、配列のインデックス番号をvalueに代入する
let array = ["a", "b", "c", "d"];
for (let value in array) {
  console.log("for in文array:" + value);
}

for in 文は、オブジェクトのプロパティの数ループ処理を行います。

( 変数 in オブジェクト)の形で定期を行います。上記の例では、nameとageのプロパティを持つ変数objectをfor in文で、ループを行っています。プロパティname、ageはvalueに代入されます。

配列をfor in文に記述した場合は、valueにインデックス番号を代入します。

for of文

forの派生であるfor of文について解説します！

JavaScript

// for文の派生系
// ( 変数 of 配列 )で配列の値を変数に代入し、配列の数だけループを行う
let array = ["a", "b", "c", "d"];
for (let value of array) {
  console.log("for of文:" + value);
}