JavaScriptの繰り返し構文まとめ

  • 投稿日
  • 著者 ともすた
  • カテゴリー ブログ

JavaScriptには、何度も処理を繰り返す「繰り返し構文（またはループ構文）」として、次のようなものがあります。

  • for
  • for of
  • for in
  • while
  • do while

それぞれについて紹介しましょう。

for構文

繰り返し構文の基本となるもので、「何回繰り返す」といった決められた数を繰り返したいときによく使われます。次のような特殊な書式で記述されます。

for (初期化処理; 繰り返し条件; 更新処理) {
}

例えば、「10回繰り返す」というプログラムを作りたい場合、カウント用の変数を準備して0を代入しておき（初期化処理）、それを1ずつ加えながら（更新処理）、10になるまで（繰り返し条件）繰り返せば良いので、次のようになります。

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

なお、iというのは適当に準備した変数の名前で、他の「x」とか「count」とか何でもかまいません。ただ、繰り返し構文ではよくこの「i」というアルファベットが使われます（おそらく、indexのi）。

また、更新処理の「i++」というのは「iという変数に1を加えて、iに再び代入する」という処理をするもので「インクリメント」と呼ばれます。これにより、iという変数が0から始まって1ずつ加えられながら10になるまで繰り返されて、画面に1から10までの数字が表示されます。

配列との組み合わせ

また、「配列」を使っている場合に、その内容を取り出すときにもよく使われます。

const pref = [
  '北海道',
  '青森県',
  '岩手県'
];

for (let i=0; i<pref.length; i++) {
  console.log(pref[i]);
}

この場合、画面には配列の内容がすべて表示されます。iという変数に0を代入して1ずつ加えるのは変わりませんが、繰り返し条件が次のようになっています。

i<pref.length

「pref」という配列は「オブジェクト」と呼ばれるもので、「プロパティ」というものを持っているため、ここでは「length」という配列の長さ（=個数）を取得できるプロパティを使うことで「配列の内容全部」という意味を表すことができます。

for of構文

配列の内容を繰り返し構文で取得する場合は、先のfor構文を使うよりも「for of」構文を使う方が便利です。次のように利用できます。

const pref = [
  '北海道',
  '青森県',
  '岩手県'
];

for (let name of pref) {
  console.log(name);
}

これでも同じように都道府県の名前を順番に表示できます。for of構文は次のような書式です。

for (let 変数名 of 配列等) {
}

これで、配列の内容を先頭から順番に取得して、すべて取り出されるまで繰り返すことができます。単純に配列の内容を取り出したいときは、こちらを使うと便利でしょう。

for in構文

for in構文は、for ofと同様に配列に対する繰り返し構文ですが、取り出されるのが値ではなく、配列の「インデックス」の方になります。そのため、この構文は配列の中でもインデックスを自由なキーワードにできる「連想配列」に対して利用されます。次のように連想配列を準備しましょう。

const pref = {
  "hokkaido": "北海道",
  "aomori": "青森県",
  "iwate": "岩手県"
};

これを、for in構文で取り出します。

for (let key in pref) {
  console.log(key);
}

すると、キーの「hokkaido」や「aomori」という値が取り出されます。もしここから、値を取り出したい場合はこのキーを使って配列から取り出します。

for (let key in pref) {
  console.log(pref[key]);
}

連想配列のキーも使いたい場合に利用されます。

while構文

while構文は、繰り返す回数が決まっていない場合や「繰り返すかどうか分からない」というプログラムに利用されます。

例えば、「1ずつ順番に足していって、答えが10以上になったらやめる」というプログラムを作成したい場合、次のようなプログラムになります。

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

すると、画面には「1, 3, 6, 10」と表示されて繰り返しが終了します。1 + 2 + 3 + 4で10以上になったということで、4回繰り返されたことが分かります。このように、更新処理と繰り返しの条件が異なるときなどに利用されます。

ただし、while構文とfor構文は、どちらを使っても表現することはでき、このプログラムもfor構文で書くこともできます。

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

ただ、このようにfor構文の中に複数の変数名が入り込むのは、若干奇妙なプログラムに見えるため、この場合はwhile構文を使う方が適切かもしれません。

do while構文

while構文は、条件によっては「1回も実行されない」というケースがあります。例えば先の例でも、answerが最初から10より大きい場合は1度も実行されません。

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

しかし、これではプログラムが正しく動作しているのかどうか分からないかもしれません。このような場合に、「do while」構文を利用すると「少なくとも1回は実行される」繰り返し構文を書くことができます。次のように書き換えましょう。

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

すると、「11」とだけ表示されてプログラムが終了します。最初の値である「10」に1を加えて画面に表示した後、10未満という条件が満たせなくなり、繰り返し構文が終了するというわけです。

do while構文を利用するケースはかなりまれです。あまり使う機会はないでしょう。

JavaScript