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

※本ページはプロモーションが含まれています。

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

UIHACK 編集長

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

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

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

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

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

JavaScript forEachメソッドの基本的な使い方
forEachメソッドを使った連想配列の反復処理方法
forEachメソッドを使った多次元配列の反復処理方法
1. 例として、多次元配列を用意しました
JavaScriptのforEachメソッドでは、breakやcontinueが使えないのか？
1. someメソッドを使った中断
2. everyメソッドを使った中断
forループとforEachメソッドの比較！どちらを使うべき？
1. 「forループ」と「forEachメソッド」の使い所に関する比較表
【応用編】JavaScript forEachメソッドのコールバック関数
1. 条件付き処理の実現
2. 新しい配列の作成
上記のコードを実行すると、以下のような結果が表示されます。
1. インデックスの取得
2. 元の配列の変更
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メソッドを使った連想配列の反復処理方法

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を使って順番に処理しています。

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

目次に戻る

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メソッド」の使い所に関する比較表

	forループ	forEachメソッド
処理内容	汎用的なループ処理	配列要素の順番に処理
使用方法	配列のインデックスを利用	コールバック関数を使う
ループの制御	可能（breakやcontinueを使用）	不可能（someやeveryを代替）
コードのシンプルさ	やや複雑	シンプル
配列の操作	自由な操作が可能	基本的な操作のみ
複数配列の同時処理	可能	不可能
途中終了が必要な場合	適している	適していない
配列要素を繰り返し処理	適している	適している

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]

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