JavaScriptの繰り返し（ループ）処理

この記事では、JavaScriptでの繰り返し（ループ）処理について、種類とそれぞれの書き方を解説しています。

繰り返し（ループ）とは

世の中に存在するほぼ全てのプログラミング言語には、処理の流れを制御するための構文（制御構文）が3種類があり、その中の一つが「繰り返し」（ループ）です。

JavaScriptは、ループ用の構文に豊富なバリエーションがあります。

まず大きく分けると、言語の構文としてのループと、オブジェクトが持つメソッドとしてのループがあります。
本記事では「言語の構文としてのループ」から最も基本的な「for 文」、「while 文」、「do…while 文」の3種類を説明対象とし、その他の構文と、オブジェクトが持つメソッドとしてのループは別途、続編記事で詳しく説明していきます。

JavaScriptのループの種類

• for 文（本記事の対象）
• while 文（本記事の対象）
• do…while 文（本記事の対象）
• for…in 文（続編記事）
• for…of 文（続編記事）

for 文でのループ処理

for 文は、多くのプログラミング言語が持つ基本的な繰り返し構文です。回数が決まっている繰り返し処理が主な使いどころです。

for (let i = 0; i < 5; i ++) {
  console.log("Hello");
}

> Hello
> Hello
> Hello
> Hello
> Hello

for 文の丸カッコ内には、繰り返すための条件式を3種類、セミコロン「;」で区切って指定します。

それぞれの条件式の意味

// 左から条件式①; 条件式②; 条件式③
for (let i = 0; i < 5; i ++) {
  console.log("Hello");
}

条件式①

let i = 0

最初の条件式①は、繰り返し回数をいくつから数え始めるかを指定します。
特別が理由がなければ、一般的には「0」から数え始めます。

繰り返し回数を数えるための変数は、ループ回数をカウントするものとして「ループカウンター」と呼ばれます。この用語は覚えておきましょう。

ループカウンター用の変数名には、慣例として「i」が用いられます。

i が使われるようになった理由は諸説あり、「index」の i、「integer」の i などが有力です。

条件式②

i < 5

真ん中の条件式②は、繰り返す条件を指定します。

今回の場合は、「0」から数え始めたループカウンター i が5より小さい（5未満）の間、繰り返すことになります。

条件式③

i ++

最後の条件式③は、ループカウンターの増減を指定します。

今回の場合、ループカウンター i は、繰り返すたびに 1 ずつ増加します。

「i ++」という式は、「i = i + 1」あるいは「i += 1」と同じです。
日本語に訳すと、「変数 i に 1 を加算したものを、i に代入する」という文章で表現できます。

2ずつ増加させたい場合は次の式になります。

i += 2

1ずつ減らしたい場合：

i --

ループと配列

ループ処理には配列が多く使われます。
（※「配列」についてまだ学習されていない方は、まだ理解できなくとも良い内容です。）

配列は「length」（長さ）という属性を持っており、繰り返し回数を指定する際に使用できます。
これは大変便利でよく使われますので覚えておきましょう。

// 配列を宣言し、初期化している
let week= ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

// 配列「week」のlength は 7
for (let i = 0; i < week.length; i ++) {
  console.log(week[i]);
}

> Sun
> Mon
> Tue
> Wed
> Thu
> Fri
> Sat

ループの入れ子（ネスト）

ループ処理は入れ子（ネスト）にできます。
これは for 文に限らず、後述の while などすべてのループ構文に適用されます。

for (let i = 1; i <= 9; i ++) {
  for (let j = 1; j <= 9; j ++) {
    console.log( i * j );
  }
}

ループカウンターの変数名には一般的に「i」が使用されるというのは前述の通りですが、入れ子（ネスト）にした場合は内側に行くにつれアルファベットの順番に j, k, l… と続いていきます。

ただし、入れ子（ネスト）が何重にもなるとロジックが分かりづらくなり、コードも読みにくくなります。
できるだけ入れ子（ネスト）は使わないロジックで実現するに越したことはありません。

while 文でのループ処理

while 文も、for 同様、多くのプログラミング言語が持つ基本的な繰り返し構文の1つです。繰り返し回数が事前に決まっていない場合や、回数以外を条件とした繰り返し処理が主な使いどころです。

let names = ["taro", "jiro", "名無し", "saburo"];

let i = 0;
while (names[i] != "名無し") {
  console.log(names[i]);
  i ++;
}

> taro
> jiro

「taro」「jiro」が表示された後、「名無し」が現れたため、繰り返しが終了します。
よって、「saburo」が表示されていませんね。

// 「taro」、「jiro」、「名無し」、「saburo」の情報が入った配列を作成
let names = ["taro", "jiro", "名無し", "saburo"];

// 上記の配列のインデックスを 0 で初期化
let i = 0;

// namesの i 番目が「名無し」と一致しない場合繰り返す
while (names[i] != "名無し") {

  // コンソールにnamesの i 番目を表示する
  console.log(names[i]);

  // インデックスを 1 増加させる
  i ++;
}

do…while 文でのループ処理

先ほど while ループで作成したプログラムに、次のような機能を追加しなければならなくなったとします。

これを while ループのまま実現させると、以下のようなプログラムになります。（太字、文字色緑の箇所が追加、修正されている）

let names = ["taro", "jiro", "名無し", "saburo"];

let i = 0;
while (true) {
  if (i > 0 && names[i] == "名無し") {
    break;
  }

  console.log(names[i]);
  i ++;
}

ループ内に、たった一度しか実行されない処理なのに3行も増えることになり、プログラムのロジックもなんだか複雑で分かりにくくなります。

※ ここで初めて出てきた「break」とは、繰り返しから抜けるための文です。ループ処理には欠かせない重要な命令文なので、覚えておきましょう。

このように「最初の一度だけ何かやってから繰返しを始めたい」というケースで、do…while 文が活躍します。

早速、do…while を使ってプログラムを書き直してみます。

// 配列の最初に「名無し」さんを追加しておく
let names = ["名無し", "taro", "jiro", "名無し", "saburo"];

let i = 0;
do {  // まず始めにブロック内が処理される
  console.log(names[i]);
  i ++;
} while (names[i] != "名無し");  // その後、条件が発動する

> 名無し
> taro
> jiro

初回の「名無し」さんが表示されました！

continue と break

break 文

break は、do…while の説明にも登場しましたが、ループから抜け出す時に使用します。

ループ処理の後に記述されている処理は実行されていきます。

次に、breakを使ったサンプルコードおよび実行結果を掲載します。
ぜひ、実際に手を動かして作成し、実行してみてください。

let results = ["OK", "OK", "NG", "OK", "NG", "OK"];

for (let i = 0; i < results.length; i ++) {
  if (result[i] == "NG") {
    break;
  }

  console.log( i );
}

> OK
> OK

continue 文

continue は break とは異なり、continue 以降のループ内処理がスキップされますが、繰り返しから抜けることはありません。

次に、continue を使ったサンプルコードおよび実行結果を掲載します。
ぜひ、実際に手を動かして作成し、実行してみてください。

for (let i = 1; i <= 10; i ++) {
  if (i == 3 || i == 5) {
    continue;
  }

  console.log( i );
}

> 1
> 2
> 4
> 6
> 7
> 8
> 9
> 10

記事の最後に

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

『詳説 JavaScript』メニューに戻る