javascriptの繰り返し処理（for文）の使い方【現役SEが紹介】

javascripで繰り返し処理の書き方を知りたい。

for文以外にも色々あるので、どれを使ったらいいかよく分からない。

わかりやすく教えてほしい。

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

■本記事の信頼性

ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

javascriptの繰り返し処理についてお伝えします。

基本的にfor文を使用することが多いですが、用途により別の繰り返しの書き方をしたりします。

とりあえず、for文だけ知っておけばある程度の繰り返し処理を実現することができますが、複数の書き方を知っておくことで、少ないコード量で分かりやすく処理を書くことができます。

今回は基本となる繰り返し処理の書き方と、他にどのような書き方があるか解説していきます。

javascriptのfor文の基本的な使い方

はじめにjavascripのfor文を使った基本的な繰り返し処理の書き方について説明します。

そもそも繰り返し処理とは？

まず、繰り返し処理とは何かというところからお話していきます。

繰り返し処理とは、そのままですが同じ処理を繰り返し行うことを指し、同じ処理を指定した回数分だったり、配列や要素の数分だったりなど、繰り返す条件を指定して実装します。

プログラミングを行う上で繰り返し処理は必ずと言っていいほど登場してきますので、早いうちに理解しておきましょう。

for文の書き方

繰り返し処理を書く際によく使用するのがfor文です。
はじめとりあえずこれだけ覚えておいたらいいです。

書き方は以下のような感じです。

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

iという変数をfor文内に定義して、真ん中にあるのがいつまで繰り返すかの条件を書きます。
最後のi++はカウンタのようなもので一回の処理で終わるごとにiの値を+1加算をする指定になります。

日本語で分かりやすく書くと以下のような感じです。

for ([変数定義と初期化]; [条件]; [加算または減算式]){}

上記の場合だと処理を行うたびに i の値が1ずつ上がっていき、最終的に真ん中の条件から外れて、繰り返しが終わるといった流れになります。

このように必ずいつかこの条件から外れるようにプログラミングするように注意してください。

もし、この繰り返し処理でこの条件の外れるケースがなかった場合、無限ループと言われる不具合となり、いつまでたっても処理が終了しない状態になってしまいます。

ちなみに i の初期値を今は0としていますが、0以外の数字を入れることもできますし、最後のカウンタの部分についても++と書けば+1ずつされますが、–として-1して減らすことも可能です。

javascriptの繰り返し処理の書き方は複数ある

javascripの繰り返し処理の書き方でfor文をお伝えしましたが、他にも書き方が存在します。

その中でも有名なものだけチョイスしたので、さらっと頭の片隅に入れておくと良いです。今後使用用途にあった仕様が出てきた際に詳しく調べるきっかけができますので。

ただ、基本的に先ほどお伝えしたfor文でそれも実現可能なので、無理して完璧に覚える必要はないです。

do while

最後に繰り返す条件を判定する書き方です。
先ほどお伝えしたfor文ははじめに判定して、条件を満たしていれば処理を実行するといった形でしたが、こちらは後で判定するので必ず1回目は実行されるといった特徴があります。

回数を指定した条件というよりも、何かの処理をした結果で判定する繰り返しに向いています。
回数指定の繰り返しの場合はfor文のほうがわかりやすいです。

let i = 0;
do {
  console.log(i);
  i += 1;
} while (i < 10);

上記ははじめに書いたfor文と同じ処理を例で書いています。

while

先ほどのdo whileの条件を頭にもってきたパターンです。

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

上記に関しても回数指定する場合はfor文のほうが見やすいです。
何かしらtrue、falseで判定する繰り返し処理のときに使用するといいでしょう。

for in

最後に紹介するのが配列の要素数を繰り返す処理です。
結構よく使用するので覚えておくといいのと、こういう処理をしたい仕様が多々あるので、知っていると簡潔に書くことができます。

const arr = [1, 2, 3, 4, 5];
for (let i in arr) {
  console.log(i);
}

arrの配列の要素数分繰り返しつつ、in の左辺に配列の要素を代入してくれます。
もし、for文で実装しようとすると、繰り返しのカウンタを配列に指定して対象の要素を取得する形になります。

最後に

javascriptの繰り返し処理について説明しました。

まとめると以下の通りです。

もし、全部覚えられない場合はとりあえずはfor文だけ覚えましょう。