この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:2
ページ更新者:atom
更新日時:2026-06-10 16:39:53

タイトル: ループ処理

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 は意図通り動かない）

関連