JavaScriptのeachを活用！初心者向け10選サンプルコード

はじめに
●JavaScriptのeachとは
- ○eachの基本
●JavaScript eachの使い方
●JavaScript eachの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのeachを使った処理ができるようになります。

JavaScript初心者の方でも理解しやすいよう、基本的な使い方から応用例まで、実際のサンプルコードを交えて徹底解説していきます。

注意点やカスタマイズ方法も紹介するので、ぜひ最後までお読みください。

●JavaScriptのeachとは

eachは、JavaScriptで配列やオブジェクトの要素を繰り返し処理する際に使用するメソッドです。

jQueryのeachメソッドや、Array.prototype.forEach()などがよく使われます。ここでは、それぞれの基本的な使い方を解説します。

○eachの基本

JavaScriptには、繰り返し処理を行うための様々な方法がありますが、eachはその中でも非常に便利です。

eachを使用することで、簡潔なコードで繰り返し処理を実現することができます。

●JavaScript eachの使い方

ここでは、JavaScriptのeachを使った処理を行うサンプルコードを紹介していきます。

○サンプルコード1：配列の要素を順番に処理する

このコードでは、配列の要素を順番に処理するコードを紹介しています。

この例では、forEachを使って配列の各要素にアクセスし、その要素をコンソールに表示しています。

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

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

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

このコードでは、オブジェクトのプロパティを操作するコードを紹介しています。

この例では、オブジェクトの各プロパティ名と値をコンソールに表示しています。

const person = {
  name: "Taro",
  age: 25,
  city: "Tokyo"
};

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

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

このコードでは、DOM要素を操作するコードを紹介しています。

この例では、クラス名が”item”の要素をすべて取得し、各要素に対して背景色を変更しています。

document.querySelectorAll('.item').forEach((element) => {
  element.style.backgroundColor = 'red';
});

●JavaScript eachの応用例

次に、JavaScriptのeachを使った応用例を紹介していきます。

○サンプルコード4：要素の合計値を求める

このコードでは、配列内の要素の合計値を求めるコードを紹介しています。

この例では、reduceメソッドを用いて配列内の数値を合計しています。

const numbers = [10, 20, 30, 40, 50];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 150

○サンプルコード5：配列から特定の要素を検索・抽出する

このコードでは、配列から特定の条件に合致する要素を検索・抽出するコードを紹介しています。

この例では、filterメソッドを使って偶数の要素のみを新しい配列に格納しています。

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

const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

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

○サンプルコード6：特定条件に合致する要素を削除する

このコードでは、特定条件に合致する要素を削除するコードを紹介しています。

この例では、filterメソッドを使って、特定の条件に合致しない要素だけを新しい配列に格納しています。

const words = ["apple", "banana", "orange", "grape", "peach"];

const filteredWords = words.filter((word) => {
  return word.length > 5;
});

console.log(filteredWords); // ["banana", "orange"]

○サンプルコード7：2つの配列を結合する

このコードでは、2つの配列を結合するコードを紹介しています。

この例では、concatメソッドを使って2つの配列を1つにまとめています。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const combinedArray = array1.concat(array2);

console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

○サンプルコード8：連想配列のソート

このコードでは、連想配列をソートするコードを紹介しています。

この例では、sortメソッドを使って、連想配列内のオブジェクトを特定のプロパティの値に基づいて並び替えています。

const items = [
  { name: "apple", price: 120 },
  { name: "orange", price: 100 },
  { name: "banana", price: 80 },
];

const sortedItems = items.sort((a, b) => {
  return a.price - b.price;
});

console.log(sortedItems);
// [
//   { name: "banana", price: 80 },
//   { name: "orange", price: 100 },
//   { name: "apple", price: 120 }
// ]

○サンプルコード9：テーブルの行を追加・削除する

このコードでは、テーブルの行を追加・削除するコードを紹介しています。

この例では、ボタンをクリックすることでテーブルの行を追加・削除できるようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブルの行を追加・削除する</title>
</head>
<body>
  <table id="myTable">
    <tr>
      <td>行1</td>
    </tr>
  </table>
  <button id="addRow">行を追加</button>
  <button id="removeRow">行を削除</button>
<script>
document.getElementById('addRow').addEventListener('click', () => {
  const newRow = document.createElement('tr');
  const newCell = document.createElement('td');
  const table = document.getElementById('myTable');
  const rowIndex = table.rows.length + 1;

  newCell.textContent = `行${rowIndex}`;
  newRow.appendChild(newCell);
  table.appendChild(newRow);
});

document.getElementById('removeRow').addEventListener('click', () => {
  const table = document.getElementById('myTable');

  if (table.rows.length > 0) {
    table.deleteRow(-1);
  }
});
</script>
</body>
</html>

○サンプルコード10：入力フォームの値をバリデーションする

このコードでは、入力フォームの値をバリデーションするコードを紹介しています。

この例では、正規表現を使ってメールアドレスが正しい形式で入力されているかチェックしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力フォームの値をバリデーションする</title>
</head>
<body>
  <form id="myForm">
    <label for="email">メールアドレス:</label>
    <input type="text" id="email">
    <button type="submit">送信</button>
  </form>
  <p id="error" style="color: red;"></p>
<script>
document.getElementById('myForm').addEventListener('submit', (e) => {
  e.preventDefault();

  const email = document.getElementById('email').value;
  const error = document.getElementById('error');
  const pattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;

  if (pattern.test(email)) {
    error.textContent = "";
  } else {
    error.textContent = "正しいメールアドレスを入力してください";
  }
});
</script>
</body>
</html>