【JavaScript】ループ処理の書き方｜for・for…of・forEach・while・map の使い分けまで解説

// 0 から 4 まで（5 回）ループ
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// 配列のインデックスでループ
const fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}: ${fruits[i]}`);
}

// 逆順ループ
for (let i = fruits.length - 1; i >= 0; i--) {
  console.log(fruits[i]); // cherry, banana, apple
}

// 配列
const colors = ["red", "green", "blue"];
for (const color of colors) {
  console.log(color); // red, green, blue
}

// 文字列（1 文字ずつ）
for (const char of "Hello") {
  console.log(char); // H, e, l, l, o
}

// Map
const map = new Map([["a", 1], ["b", 2]]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`); // a: 1, b: 2
}

// Set
const set = new Set([1, 2, 3]);
for (const num of set) {
  console.log(num); // 1, 2, 3
}

// NodeList（DOM 要素）
for (const el of document.querySelectorAll(".item")) {
  el.classList.add("active");
}

// オブジェクトのキーを列挙
const user = { name: "Tanaka", age: 30, role: "admin" };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
  // name: Tanaka, age: 30, role: admin
}

const fruits = ["apple", "banana", "cherry"];

// 要素だけ
fruits.forEach(fruit => {
  console.log(fruit);
});

// 要素 + インデックス
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

// 第 3 引数で元の配列にアクセス
fruits.forEach((fruit, index, arr) => {
  console.log(`${fruit} (全${arr.length}件中)`);
});

// 各要素を変換して新しい配列を返す
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// オブジェクト配列から特定のプロパティだけ抽出
const users = [{ name: "A", age: 20 }, { name: "B", age: 30 }];
const names = users.map(u => u.name);
console.log(names); // ["A", "B"]

// 条件に合う要素だけの新しい配列を返す
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// 空文字を除外
const items = ["apple", "", "banana", "", "cherry"];
const nonEmpty = items.filter(Boolean);
console.log(nonEmpty); // ["apple", "banana", "cherry"]

// 合計を計算
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// オブジェクトに集約
const fruits = ["apple", "banana", "apple", "cherry", "banana", "apple"];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, cherry: 1 }

// while: 条件が true の間ループ
let i = 0;
while (i < 5) {
  console.log(i); // 0, 1, 2, 3, 4
  i++;
}

// do...while: 最低 1 回は実行
let j = 10;
do {
  console.log(j); // 10（条件は false だが 1 回は実行）
  j++;
} while (j < 5);

// 実用例: ランダムな値が条件を満たすまでループ
let random;
do {
  random = Math.random();
} while (random < 0.9);
console.log(`0.9 以上の値: ${random}`);

// break: ループを途中で終了
for (let i = 0; i < 10; i++) {
  if (i === 5) break; // 5 でループ終了
  console.log(i); // 0, 1, 2, 3, 4
}

// continue: その回だけスキップして次へ
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // 偶数をスキップ
  console.log(i); // 1, 3, 5, 7, 9
}

// for...of + break: 配列から条件に合う最初の要素を見つける
const items = [1, 3, 5, 8, 10];
let firstEven;
for (const item of items) {
  if (item % 2 === 0) {
    firstEven = item;
    break;
  }
}
console.log(firstEven); // 8

// ↑ Array.find() で書くとより簡潔
const firstEven2 = items.find(n => n % 2 === 0); // 8

const user = { name: "Tanaka", age: 30, role: "admin" };

// Object.keys: キーの配列
Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});

// Object.values: 値の配列
Object.values(user).forEach(value => {
  console.log(value); // "Tanaka", 30, "admin"
});

// Object.entries: [key, value] のペア配列
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

document.querySelectorAll(".btn").forEach(btn => {
  btn.addEventListener("click", () => {
    console.log(btn.textContent);
  });
});

const apiUsers = [
  { id: 1, firstName: "Taro", lastName: "Yamada" },
  { id: 2, firstName: "Hanako", lastName: "Suzuki" },
];

// フルネームの配列に変換
const fullNames = apiUsers.map(u => `${u.lastName} ${u.firstName}`);
console.log(fullNames); // ["Yamada Taro", "Suzuki Hanako"]

const products = [
  { name: "Apple", price: 150, inStock: true },
  { name: "Banana", price: 100, inStock: false },
  { name: "Cherry", price: 300, inStock: true },
];

// 在庫ありの商品名だけ抽出
const available = products
  .filter(p => p.inStock)
  .map(p => p.name);
console.log(available); // ["Apple", "Cherry"]

// カテゴリ別に商品をグルーピング
const items = [
  { name: "A", category: "food" },
  { name: "B", category: "drink" },
  { name: "C", category: "food" },
];

const grouped = items.reduce((acc, item) => {
  const key = item.category;
  (acc[key] ??= []).push(item);
  return acc;
}, {});
// { food: [{...}, {...}], drink: [{...}] }