◀ 9.

ループ処理

▶

編集

JavaScriptにおいてループ処理をおこなう際は、for文と while文という2種類を使い分ける。

大まかには以下のような使い分けを行う。

・繰り返し回数が決まっている場合はfor文を使用する。

・繰り返し回数が決まっていない場合はwhile文を使用する。

子ページから選択して下さい。

本ページの子ページ

for文 — 回数を決めて繰り返す

JavaScriptのループ構文一覧

構文	用途
`for`	回数が決まっている繰り返し
`while`	条件が真の間繰り返し
`do...while`	最低1回は実行してから条件判定
`for...in`	オブジェクトのキーを列挙
`for...of`	配列・iterableの値を列挙
`forEach`	配列の各要素にコールバック適用
`map` / `filter` / `reduce`	関数型風のシーケンス処理

主要なループの書き方

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

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

// do...while（最低1回実行）
let n = 0;
do {
console.log(n);
n++;
} while (n < 3);

// for...of（配列を順に）
const fruits = ['apple', 'banana', 'orange'];
for (const fruit of fruits) {
console.log(fruit);
}

// for...in（オブジェクトのキー）
const user = { name: 'Taro', age: 20 };
for (const key in user) {
console.log(key, user[key]);
}

// forEach
fruits.forEach((fruit, i) => {
console.log(i, fruit);
});

map / filter / reduce（関数型風）

const nums = [1, 2, 3, 4, 5];

// map：各要素を変換
const doubled = nums.map(n => n * 2); // [2,4,6,8,10]

// filter：条件で絞り込み
const evens = nums.filter(n => n % 2 === 0); // [2,4]

// reduce：合計や集約
const sum = nums.reduce((acc, n) => acc + n, 0); // 15

break / continue

for (let i = 0; i < 10; i++) {
if (i === 5) break; // ループ脱出
if (i % 2 === 0) continue; // 偶数はスキップ
console.log(i);
}

使い分けの目安

場面	推奨
回数が決まっている	`for`
条件で続ける／停止	`while` / `do...while`
配列を順に処理	`for...of` / `forEach`
オブジェクトのキーを列挙	`for...in` または `Object.keys(...)`
変換・集約を簡潔に	`map` / `filter` / `reduce`

注意点

for...in は配列に対しては推奨されない（インデックスが文字列、順序保証なし、継承プロパティも含む）。配列なら for...of
無限ループ: 条件式が常に true だと止まらない。break を必ず想定
forEach は break できない。途中で抜けたい場合は for...of や some/every
非同期処理を含むループは for...of + await が読みやすい（forEach+await は意図通り動かない）

ページ一覧

その他