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

JavaScriptでforEachとアロー関数を使った処理の例JS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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);
  }
});

●注意点と対処法

  1. forEachは配列に対してのみ使用可能です。
    オブジェクトには使用できません。
  2. forEachは、途中で処理を中断できません。
    中断が必要な場合は、for文やfor…of文を使用してください。
  3. アロー関数では、thisが自動的に束縛されません。
    thisを利用する必要がある場合は、通常の関数式を使用してください。

まとめ

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

これらの機能を理解し、上手に活用することで、コードがシンプルで効率的になります。

是非、日々の開発で活用してみてください。