![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
JavaScriptで同じ処理を何度も実行したい場合、
同じコードを繰り返し書くのではなく 繰り返し処理（ループ） を使います。
本記事では、JavaScriptの代表的な繰り返し処理である
for / while / for…of / forEach の基本的な使い方を、初心者向けに解説します。
繰り返し処理とは？
繰り返し処理とは、同じ処理を何度も実行する仕組みのことです。
例えば、
・1～10までの数字を表示する
・配列の中身をすべて表示する
・条件を満たす間、処理を続ける
といった場面で使われます。
JavaScriptには用途に応じて、複数の繰り返し処理が用意されています。
for文：回数が決まっている繰り返し
for文 は「繰り返す回数が決まっている場合」に使われる基本的な構文です。
|
1 2 3 |
for (let i = 0; i < 5; i++) { console.log(i); } |
このコードでは、i が 0 から 4 まで変化し、
合計5回処理が実行されます。
- 初期化：let i = 0
- 条件式：i < 5
- 増減処理：i++
この3つを指定するのが for文の特徴です。
while文：条件がtrueの間くり返す
while文 は「条件が true の間、処理を繰り返す」構文です。
|
1 2 3 4 5 6 |
let count = 0; while (count < 3) { console.log(count); count++; } |
条件が false になるまで処理が続くため、
終了条件を書き忘れると無限ループになる点に注意が必要です。
for…of：配列の要素を順番に処理する
for…of は「配列の中身を1つずつ取り出して処理したい場合」に便利です。
|
1 2 3 4 5 |
const fruits = ["apple", "banana", "orange"]; for (const fruit of fruits) { console.log(fruit); } |
配列のインデックスを意識せずに書けるため、
シンプルで読みやすいコードになります。
forEach：配列専用の繰り返し処理
forEach は「配列が持つメソッドで、配列の各要素に対して処理を実行」します。
|
1 2 3 4 5 |
const numbers = [1, 2, 3]; numbers.forEach(function(number) { console.log(number); }); |
以下のように、より簡潔に書くこともできます。
|
1 2 3 |
numbers.forEach(number => { console.log(number); }); |
配列処理に特化しているため、
配列を扱う場面ではよく使われます。
どの繰り返し処理を使えばいい？
繰り返し処理は、用途に応じて使い分けるとコードが読みやすくなります。
- for文：回数が決まっている
- while文：条件を満たす間繰り返す
- for…of：配列の要素を順番に処理したい
- forEach：配列をシンプルに処理したい
目的に合った構文を選びましょう。
まとめ
- 繰り返し処理は、同じ処理を何度も実行する仕組み
- for文 は、回数が決まっている処理に向いている
- while文 は、条件が true の間処理を続ける
- for…of と forEach は、配列処理に便利
- 用途に応じて繰り返し処理を使い分けることが大切