JavaScriptのforEachメソッドで配列要素の処理を簡単に！

本記事は、「そもそも何故、同じ繰り返し処理なのでfor文と何か違うんだろうと」と思いつつ

UIHACK 編集長

・繰り返し処理を行う際どのメソッドを使うのか
・そもそも配列の繰り返し処理って難しいそう

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します

この記事では、JavaScriptのforEachメソッドを使って、配列要素を効率的に処理する方法を学びましょう。ループ変数の使い方やコールバック関数の活用法についても解説するので、あなたもプロの開発者に一歩近づくこと間違いなしです！

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

JavaScript forEachメソッドの基本的な使い方

JavaScriptのforEachメソッドは、配列の各要素に対して順番に指定したコールバック関数を実行するための組み込みメソッドです。forEachメソッドはループ処理を行うため、配列の要素を繰り返し処理するのに便利です。

基本的な使い方は以下のようになります。

// 配列を定義します
const fruits = ["りんご", "バナナ", "オレンジ", "グレープ"];

// forEachメソッドを使用して配列の各要素に対して処理を行います
fruits.forEach(function(fruit) {
  console.log(fruit);
});

UIHACK 編集長

解説

上記のコードでは、fruitsという配列を定義し、forEachメソッドを使用して配列の各要素をconsole.logで表示しています。

以下が、実行結果です。

上記のコードを実行すると、以下のような結果が表示されます。

りんご
バナナ
オレンジ
グレープ

forEachメソッドを使った連想配列の反復処理方法

JavaScriptのforEachメソッドは、連想配列（オブジェクト）の反復処理にも利用できます。連想配列は、キーと値のペアが格納されているオブジェクトのことを指します。

以下は、forEachメソッドを使った連想配列の反復処理の例です。

const person = {
  name: "John",
  age: 30,
  occupation: "Developer"
};

// 連想配列の反復処理
Object.keys(person).forEach(function(key) {
  console.log(key + ": " + person[key]);
});

上記のコードでは、personという連想配列（オブジェクト）を定義し、Object.keys()メソッドを使ってオブジェクトのキーを配列として取得しています。そして、取得したキーの配列に対してforEachメソッドを適用して、連想配列の各キーとその値を順番に取得してコンソールに表示しています。

上記のコードを実行すると、以下のような結果が表示されます。

name: John
age: 30
occupation: Developer

UIHACK 編集長

解説

このように、forEachメソッドを使って連想配列のキーと値に順番にアクセスすることができます。連想配列を効果的に処理する際には、forEachメソッドの他にも、for…inループやObject.entries()メソッドも使うことができます。適切な方法を選択して処理を行いましょう。

forEachメソッドを使った多次元配列の反復処理方法

forEachメソッドを使って多次元配列を反復処理する方法は、ネストされた配列の各要素を順番に処理することです。以下の例を見てみましょう。

例として、多次元配列を用意しました

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

これは3つのサブ配列を持つ2次元配列です。この配列の要素に対してforEachメソッドを使って反復処理を行う方法を見てみます。

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

// 多次元配列の各要素を順番に処理
multiDimensionalArray.forEach(function(subArray) {
  // サブ配列の各要素を順番に処理
  subArray.forEach(function(element) {
    console.log(element);
  });
});

UIHACK 編集長

解説

このコードでは、multiDimensionalArrayの各要素（サブ配列）をforEachメソッドで順番に処理しています。そして、さらに各サブ配列の要素（値）をsubArray.forEachを使って順番に処理しています。

上記のコードを実行すると、以下のような結果が表示されます。

1
2
3
4
5
6
7
8
9

JavaScriptのforEachメソッドでは、breakやcontinueが使えないのか？

forEachメソッドは、配列の各要素に対して指定したコールバック関数を順番に実行します。コールバック関数が全ての要素に対して順番に実行されるため、ループが途中で終了することができません。

しかし、代わりにsomeメソッドやeveryメソッドを使うことで、breakやcontinueのような動作を実現することができます。

someメソッドを使った中断

someメソッドは配列の各要素に対してコールバック関数を実行し、一度でもtrueを返すと、処理を中断してループを終了します。このように、someメソッドを使って途中で中断させることができます。

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

numbers.some(function(number) {
  console.log(number);
  return number === 3; // 3を見つけたら中断
});

everyメソッドを使った中断

everyメソッドは配列の各要素に対してコールバック関数を実行し、一度でもfalseを返すと、処理を中断してループを終了します。これも、breakのような動作を実現する手段として使用できます。

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

numbers.every(function(number) {
  console.log(number);
  return number !== 3; // 3を見つけたら中断
});

UIHACK 編集長

解説

上記のコードでは、numbers配列の各要素を順番に処理して、console.logで表示します。someメソッドを使うと、3を見つけた時点でループが中断され、everyメソッドを使うと、3を見つけた時点でループが中断されます。

一方、forループでは、break文を使うことでループを途中で終了させることができます。

JavaScriptのfor文の使い方も学びたい方はぜひ以下の記事もご覧ください。

2023年7月14日 【JavaScript】for文の繰り返し処理と無限ループの回避方法

forループとforEachメソッドの比較！どちらを使うべき？

forループとforEachメソッドは、配列の要素を処理するための異なるアプローチです。どちらを使うべきかは、処理内容やコードのシンプルさ、パフォーマンスなどの要素によって異なります。以下に、両者の比較と使いどころを説明します。

「forループ」と「forEachメソッド」の使い所に関する比較表

UIHACK 編集長

解説

この表を参考にして、処理内容やループの制御、コードのシンプルさなどを考慮して、forループとforEachメソッドのどちらを使うべきかを選択してください。各メソッドには得意な使い方がありますので、適切な選択を行うことで効率的なコーディングが可能になります。

【応用編】JavaScript forEachメソッドのコールバック関数

JavaScriptのforEachメソッドのコールバック関数にはさまざまな応用技術があります。以下にいくつかの応用技術を紹介します。応用編なので興味ない方は、読み飛ばして下さい！

条件付き処理の実現

コールバック関数内で条件式を使用することで、特定の条件を満たす場合にのみ処理を実行することができます。

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

numbers.forEach(function(number) {
  if (number % 2 === 0) {
    console.log(number + "は偶数です");
  }
});

上記のコードを実行すると、以下のような結果が表示されます。

2は偶数です
4は偶数です

新しい配列の作成

forEachメソッド自体は新しい配列を返しませんが、コールバック関数内で新しい配列を作成することができます。

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

numbers.forEach(function(number) {
  squaredNumbers.push(number * number);
});

console.log(squaredNumbers);

上記のコードを実行すると、以下のような結果が表示されます。

[1, 4, 9, 16, 25]

インデックスの取得

コールバック関数に第2引数としてインデックスを取得することができます。

const fruits = ["りんご", "バナナ", "オレンジ"];

fruits.forEach(function(fruit, index) {
  console.log(`要素${index}: ${fruit}`);
});

上記のコードを実行すると、以下のような結果が表示されます。

要素0: りんご
要素1: バナナ
要素2: オレンジ

元の配列の変更

forEachメソッドは元の配列を直接変更します。コールバック関数で配列の要素を変更すると、元の配列にも反映されます。

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

numbers.forEach(function(number, index, array) {
  array[index] = number * 2;
});

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

上記のコードを実行すると、以下のような結果が表示されます。

[2, 4, 6, 8, 10]

UIHACK 編集長

解説

これらの応用技術を使うことで、forEachメソッドの柔軟性と便利さを最大限に引き出すことができます。コールバック関数を活用して、さまざまな処理を簡潔に実現しましょう。ただし、配列を変更する場合は注意して使用してください。必要に応じて、新しい配列を作成するなどの工夫を行うことが大切です。

JavaScriptのforEachメソッドの結論とまとめ

UIHACK 編集長

今回は、JavaScriptのforEachメソッドで配列要素にアクセスする方法についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

もう一度、最初から「JavaScript forEachメソッドの基本的な使い方」を読む↑

JavaScriptの他の基本的な変数の使い方も学びたい方はぜひ以下の記事もご覧ください。

2022年8月17日 【Javascript】初心者向けに変数の意味と3つ(var・let・const)の宣言の使い分け方法を解説！

JavaScriptのみで、アコーディオンメニューを実装したいあなたに！

2023年7月12日 【JavaScript】アコーディオンメニューを実装！クリックでスムーズな開閉効果を実現！【jQuery不要】