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

はじめに
●JavaScriptのforEachとは
- ○基本的な使い方
●アロー関数とは
- ○基本的な使い方
●forEachとアロー関数の使い方10選
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptのforEachとアロー関数の使い方がマスターできるようになります。

●JavaScriptのforEachとは

forEachは、配列に対して繰り返し処理を行うためのメソッドです。

○基本的な使い方

配列の要素ごとに処理を行いたい場合、forEachを使用します。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function (number) {
  console.log(number);
});

●アロー関数とは

アロー関数は、短くコンパクトな関数を書くための機能です。

○基本的な使い方

アロー関数を使用すると、無名関数を短く書くことができます。

const add = (a, b) => a + b;
console.log(add(1, 2)); // 3

●forEachとアロー関数の使い方10選

ここでは、forEachとアロー関数の使い方を10個のサンプルコードを用いて解説します。

○サンプルコード1：配列の要素を表示

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number);
});

○サンプルコード2：オブジェクトのプロパティを操作

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

users.forEach((user) => {
  user.name = user.name.toUpperCase();
});

console.log(users);

○サンプルコード3：フィルタリング

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = [];

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

console.log(evenNumbers); // [2, 4]

○サンプルコード4：DOM要素の操作

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const listItems = document.querySelectorAll("#list li");
  listItems.forEach((item) => {
    item.style.color = "red";
  });
</script>

○サンプルコード5：非同期処理

const urls = ["url1", "url2", "url3"];

urls.forEach(async (url) => {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
});

○サンプルコード6：数値配列の計算

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach((number) => {
  sum += number;
});

console.log(sum); // 15

○サンプルコード7：二次元配列の操作

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

matrix.forEach((row) => {
  row.forEach((cell) => {
    console.log(cell);
  });
});

○サンプルコード8：条件分岐

const fruits = ["apple", "banana", "orange", "kiwi", "grape"];

fruits.forEach((fruit) => {
  if (fruit === "orange") {
    console.log(`${fruit} is my favorite!`);
  } else {
    console.log(`${fruit} is not my favorite.`);
  }
});

○サンプルコード9：チェーン処理

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

const doubledNumbers = numbers.map((number) => number * 2);

doubledNumbers.forEach((number) => {
  console.log(number);
});

○サンプルコード10：エラーハンドリング

const numbers = [1, 2, "error", 4, 5];

numbers.forEach((number) => {
  try {
    if (typeof number !== "number") {
      throw new Error("Invalid number!");
    }
    console.log(number);
  } catch (error) {
    console.error(error.message);
  }
});