JavaScriptでforEachとアロー関数を使いこなす10の方法

const fruits = ['りんご', 'バナナ', 'オレンジ'];
fruits.forEach(function(fruit) {
  console.log(fruit + 'は美味しい果物です。');
});

const greet = (name) => {
  return 'こんにちは、' + name + 'さん！';
};

console.log(greet('田中')); // 出力: こんにちは、田中さん！

const colors = ['赤', '青', '緑', '黄', '紫'];
colors.forEach((color) => {
  console.log(color + 'は美しい色です。');
});

const students = [
  { name: '佐藤', score: 85 },
  { name: '鈴木', score: 92 },
  { name: '高橋', score: 78 }
];

students.forEach((student) => {
  student.grade = student.score >= 90 ? 'A' : student.score >= 80 ? 'B' : 'C';
});

console.log(students);

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = [];

numbers.forEach((number) => {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
});

console.log('偶数：' + evenNumbers.join(', '));

<ul id="taskList">
  <li>買い物に行く</li>
  <li>レポートを書く</li>
  <li>運動する</li>
</ul>

<script>
  const tasks = document.querySelectorAll('#taskList li');
  tasks.forEach((task, index) => {
    task.textContent = `タスク${index + 1}: ${task.textContent}`;
    task.style.color = index % 2 === 0 ? 'blue' : 'green';
  });
</script>

const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

urls.forEach(async (url) => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(`${url}からのデータ:`, data);
  } catch (error) {
    console.error(`${url}の取得に失敗:`, error);
  }
});

const prices = [1200, 1500, 800, 2000, 950];
let total = 0;

prices.forEach((price) => {
  total += price;
});

const average = total / prices.length;
console.log(`合計金額: ${total}円`);
console.log(`平均価格: ${average.toFixed(2)}円`);

const chessBoard = [
  ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
  ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
  ['　', '　', '　', '　', '　', '　', '　', '　'],
  ['　', '　', '　', '　', '　', '　', '　', '　'],
  ['　', '　', '　', '　', '　', '　', '　', '　'],
  ['　', '　', '　', '　', '　', '　', '　', '　'],
  ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
  ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
];

chessBoard.forEach((row, rowIndex) => {
  let rowString = '';
  row.forEach((piece, columnIndex) => {
    rowString += piece + ' ';
  });
  console.log(`${8 - rowIndex} ${rowString}`);
});

console.log('  a b c d e f g h');

const temperatures = [18, 25, 30, 15, 22, 28, 12];

temperatures.forEach((temp) => {
  if (temp < 20) {
    console.log(`${temp}℃: 寒い日です。暖かい服装を心がけましょう。`);
  } else if (temp >= 20 && temp < 25) {
    console.log(`${temp}℃: 快適な気温です。外出日和ですね。`);
  } else {
    console.log(`${temp}℃: 暑い日です。熱中症に注意しましょう。`);
  }
});

const words = ['Hello', 'World', 'JavaScript', 'Programming'];

words
  .map((word) => word.toUpperCase())
  .forEach((word) => {
    console.log(word);
    console.log('文字数:', word.length);
    console.log('-'.repeat(20));
  });

const mixedData = [5, 'ten', 15, 'twenty', 25, null, 35, undefined, 45];

mixedData.forEach((item, index) => {
  try {
    if (typeof item !== 'number') {
      throw new Error(`インデックス${index}の要素が数値ではありません。`);
    }
    console.log(`${item}の2倍は${item * 2}です。`);
  } catch (error) {
    console.error(error.message);
  }
});