【JavaScript入門】forEachメソッドで配列の各要素に処理を繰り返す！使い方から注意点まで徹底解説 │ TechMania

配列内の各要素を取り扱いたい場合に、配列に対してループ処理を使用するケースはよくあると思います。
JavaScriptには様々なループ処理機能が用意されていますが、その中の1つに、Arrayオブジェクトなどで使用可能な「forEach」メソッドというものがあります。

今回の記事では、forEachメソッドの使い方や注意点などについて、詳しく解説をしていきたいと思います！

1. JavaScriptのforEachメソッドとは？
2. forEachメソッドの使い方
3. forEachメソッドでJSONを取得する
4. 反復処理を中断したい場合の注意点
5. forEachメソッドを応用的に使いこなす
- 5.1. アロー関数式の書き方
- 5.2. forEachメソッドの第2引数を設定する
6. forEachと似ているメソッドや文の使い方
7. まとめ
8. 関連記事
9. JavaScriptの勉強方法は？

JavaScriptのforEachメソッドとは？

forEachメソッドは、ArrayオブジェクトやMapオブジェクトで使用できるメソッドの1つで、オブジェクト内の各要素を1つずつ呼び出す反復処理を行います。
通常のループ処理の場合、ループ回数などを元に各要素にアクセスする処理を記述しなければいけないのに対し、forEachメソッドでは配列の要素数に応じてループし、各ループごとに要素が変数に格納されるため、より簡潔にコードを記述できるのが特徴です。

forEachメソッドの使い方

それでは早速、forEachメソッドの使い方について見ていきましょう！まずは、基本となる書き方から説明します。

基本構文と使い方

forEachメソッドを使用する際の基本構文は、次のように記述します。

【基本構文】

オブジェクト名.forEach(コールバック関数)

メソッドの引数に渡す関数は括弧内で直接定義することが可能ですが、既に定義済みの関数を指定することもできます。
コールバック関数の引数には、以下の3つを任意で指定することができます。

element : 処理中の配列の要素
index : 処理中の配列の要素のインデックス
array : 処理中の配列自身

関数を直接定義する場合は、次のように記述します。

【サンプルコード】

sampleArr.forEach(function (value) {
     // 処理内容の記述
});

上記の場合は引数を1つだけ指定しているので、「value」に配列の各要素が渡されます。

2つ指定した場合には要素とインデックス、3つ指定した場合には要素とインデックスと配列自身の順でそれぞれ引数に渡されます。

配列をループさせて要素を取得する

それでは、サンプルコードを元に実際の動きを見てみましょう。
まずは簡単な例として、配列の各要素を出力するだけのシンプルなコードを実行してみます。

【サンプルコード】

const sampleArr = ["東京", "大阪", "福岡", "北海道", "沖縄"];

sampleArr.forEach(function (value) {
     console.log(value);
});

【実行結果】

東京
大阪
福岡
北海道
沖縄

引数「value」に配列の要素が渡されるため、そのままコンソールに表示することができます。
また、インデックスや配列自身を引数に取り、要素の値を変更したりなど様々な処理に使用することも可能です。

【サンプルコード】

let numArr = [1, 2, 3];

numArr.forEach(function (number, index, array) {
  
     if (index === 0) {
         array[index] = number * 10;
     }
     
     console.log(array[index]);
});

【実行結果】

10
2
3

上記のサンプルコードでは、引数に渡されたインデックスを元に条件分けを行い、同じく引数に渡された配列自身を使って要素の値を変更しています。

注意点の1つとして、forEachメソッドは戻り値を持たないメソッドのため、コールバック関数内で戻り値を指定しても「undefined」が返却されてしまいます。
処理した結果を元に別の処理を行いたい場合は、コールバック関数内で直接扱うか、他の処理方法で代用するようにしましょう。

オブジェクト型のデータの中身を取得する

forEachメソッドを使用することで、複雑な内容の配列を扱う際にも、簡潔にコードを記述することができます。
以下のサンプルコードを見てみましょう。

【サンプルコード】

const fruitsList = [
    {name: "いちご", price: 500},
    {name: "りんご", price: 300},
    {name: "ぶどう", price: 400},
    {name: "みかん", price: 250},
];

fruitsList.forEach(function (fruits) {
     console.log(`${fruits.name}：${fruits.price}円`);
});

【実行結果】

いちご：500円
りんご：300円
ぶどう：400円
みかん：250円

各オブジェクトが変数に格納されているため、そのまま変数名に繋げてキーを指定することができます。
以下のfor文で記述した場合と見比べると、コードの簡潔さがより分かりやすいかと思います。

【for文を使用した場合の例】

for (let i = 0; i < fruitsList.length; i++) {
  console.log(`${fruitsList[i].name}：${fruitsList[i].price}円`);
}

forEachメソッドでJSONを取得する

プログラミングをする上で、サーバーとデータをやり取りするケースは往々にして存在します。
そこで今回は、よく使われるデータ形式であるJSONを取り扱う場合のサンプルコードも合わせて紹介したいと思います。

次のJSONデータをもとに、forEachメソッドで値を取り出してみましょう。

【使用するJSON】

{
    "name": "Yamada Taro",
    "age": 25,
    "blood": "B"
}

【サンプルコード】

const json = '{"name":"Yamada Taro", "age":25, "blood":"B"}'

const obj = JSON.parse(json);

Object.keys(obj).forEach(function (key) {

    console.log(`${key}：${obj[key]}`);

});

【実行結果】

name：Yamada Taro
age：25
blood：B

JSON形式のままではデータを扱うことができないため、まずはJSON.parse()メソッドを使用してJSONの中身をパースすることで、データの変換を行いましょう。

forEachメソッドは主に配列に対して使用できるメソッドで、オブジェクト型で返される変換後のデータには使うことができないため、Object.keys()メソッドでキーの一覧を配列として取得します。
取得した配列に対してメソッドを使用することで、JSONの中身をループ処理を使って取り出すことができるようになります。

反復処理を中断したい場合の注意点

forEachメソッドを使う上で気を付けるべき点はいくつかありますが、その中でも特に大きな注意点として、「continue」を使用しての中断処理や「break」による抜け出しができません。

例えば以下のように、for文などでよく見かける処理をforEachメソッドで行おうとすると、エラーが発生します。

【エラーが起こるコードの例】

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

sampleArr.forEach(function (value) {
  
  if(value % 2 === 0) {
      continue;
  }
  
  console.log(value);
  
});

forEachメソッドで、処理を中断して次のループ処理を実行させたい場合は、以下のように「return」での代用が可能です。

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

sampleArr.forEach(function (value) {
  
  if(value % 2 === 0) {
      return;
  }
  
  console.log(value);
  
});

【実行結果】

1
3
5

ループそのものから抜け出したい場合には、代わりにfor文などを使用しましょう。

【for文を使用する場合のサンプル】

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

for (let i = 0; i < sampleArr.length; i++) {
  
    if (sampleArr[i] === 4) {
        break;
    }
  
    console.log(sampleArr[i]);
}

【実行結果】

1
2
3

forEachメソッドを応用的に使いこなす

ここまで解説した基礎的な内容だけでも、forEachメソッドを活用することは十分可能ですが、よりコードを簡潔にできる記述方法や、forEachメソッド自身が持つ引数と組み合わせることで、応用的にメソッドを使いこなすことができるようになります。

それぞれの機能について、順に解説していきます。

アロー関数式の書き方

JavaScriptには、アロー関数式と呼ばれる記述方法が存在します。
特定の条件下において、より簡潔なコードで関数を定義することができる方法で、forEachメソッドに限らず様々なケースで活用することができます。

アロー関数は次のように記述します。

【基本構文】

(引数1, 引数2, ...) => {関数内で行う処理}

これだけでは少し分かりづらいかと思うので、実際のサンプルコードで違いを確認してみましょう。
例えば、以下のように定義された関数があるとします。

const sampleFunc = function (value) {
      console.log(value);
};

この関数をアロー関数式で記述した場合、次のようなコードになります。

const sampleFunc = (value) => {
      console.log(value);
};

これが、アロー関数式の基本的な書き方です。
この段階では通常の関数とそれほど大きな違いはありませんが、条件によって、ここからさらに簡潔にコードを記述することができます。

まず、上記の例のように処理が一文のみで完了する場合、ブロックを表す {} を省略することができます。

const sampleFunc = (value) => console.log(value);

戻り値がある関数の場合に「return」を記述する必要はなく、処理内容の結果が暗黙的に戻り値として返却されます。

さらに、引数が1つの場合には () も省略することができます。

const sampleFunc = value => console.log(value);

forEachメソッドの記述も、アロー関数式を使うことでより簡潔に記述できる場合があります。

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

numArr.forEach(value => console.log(value));

【実行結果】

forEachメソッドの第2引数を設定する

冒頭の基本的な構文についての解説では一旦説明を除きましたが、forEachメソッドにはコールバック関数だけでなく、任意のオブジェクトを引数に取ることができます。

配列名.forEach(コールバック関数, オブジェクト)

メソッドの第2引数に指定することで、コールバック関数にオブジェクトを渡すことができます。
関数内でオブジェクトを使う際は、「this」と記述してオブジェクトを使用します。

以下のサンプルコードで、実際の動きを見てみましょう。
forEachメソッドを使用する配列の他にオブジェクトを宣言し、コールバック関数内でそのオブジェクトを使用して処理を行ってみます。

【サンプルコード】

const fruitsList = ["りんご", "ぶどう", "みかん"];
const priceList = {
    "いちご": 500,
    "りんご": 300,
    "ぶどう": 400,
    "バナナ": 200,
    "みかん": 250
};
fruitsList.forEach(function (value) {
    console.log(`${value}の値段は${this[value]}円です。`);
}, priceList);

【実行結果】

りんごの値段は300円です。
ぶどうの値段は400円です。
みかんの値段は250円です。

forEachメソッドで取り出した配列の要素をキーとすることで、引数に渡したオブジェクト内の特定の要素のみにアクセスしています。
このように、任意のオブジェクトをメソッドの引数に渡すことができます。

forEachと似ているメソッドや文の使い方

forEachメソッドを使用する際のもう1つの注意点として、場合によっては他の似た機能を持つメソッドや構文で処理を行う方が、より適切なコードを書けるケースがあります。

forEachメソッドそのものは、配列の要素をループ処理するという漠然とした意味しか持ちません。
コードの内容を読むまでは、それが何を処理するためのメソッドなのかが具体的には分からないのです。
目的ごとにメソッドや構文を使い分ける利点には、コードが簡潔に書ける点や、forEachメソッドでは実現できない処理を行える点の他に、それが何を処理するコードなのかが一目で理解できるという可読性の高さがあります。

そのため今回は、forEachメソッドの代案となるいくつかのメソッドや構文についても、合わせて紹介していきたいと思います。

mapメソッドの使い方

「map」メソッドは、Arrayオブジェクトで使用可能なメソッドの1つです。
forEachメソッドと同様にループ処理を行うメソッドで、配列内の各要素に対してコールバック関数を実行し、その結果を新たな配列として返却します。

任意の配列に対して加工を行いたいケースにおいては、mapメソッドを使用する方が適切に記述できる場合があります。
例えば、forEachメソッドでmapメソッドと同様の結果を得ようとする場合、次のように記述する必要があります。

【サンプルコード】

const numArr = [1, 2, 3, 4, 5];
const changeArr = [];
numArr.forEach(function (num) {
    changeArr.push(num * 10);
});
console.log(changeArr);

【実行結果】

[10, 20, 30, 40, 50]

一方で、mapメソッドを使用した場合、より簡潔なコードで処理を記述することができます。

【サンプルコード】

const numArr = [1, 2, 3, 4, 5];
const changeArr = numArr.map(function (num) {
    return num * 10;
});
console.log(changeArr);

mapメソッドの場合は戻り値があるため、結果を変数に直接代入することができます。
また、変更した値を空の配列に格納するための処理も記述する必要がなく、forEachメソッドを使用するよりも全体的にコードが見やすくなります。

加えて、先ほど解説したアロー関数式を使用すると、さらにコードが簡潔になります。

【サンプルコード】

const numArr = [1, 2, 3, 4, 5];
const changeArr = numArr.map(num => num * 10);
console.log(changeArr);

filterメソッドの使い方

続いて、filterメソッドの使い方について解説をします。
filterメソッドは、指定の条件に合致した要素だけを抜き出し、その結果を新たな配列として返却するメソッドです。

まずは、forEachメソッドで記述した場合のコードから見てみましょう。

【サンプルコード】

const numArr = [1, 2, 3, 4, 5];
const getArr = [];
numArr.forEach(function (num) {
    if (num % 2 === 1) {
        getArr.push(num);
    }
});
console.log(getArr);

【実行結果】

[1, 3, 5]

これを、filterメソッドを使用して記述すると、次のようなコードになります。

【サンプルコード】

const numArr = [1, 2, 3, 4, 5];
const getArr = numArr.filter(function (num) {
    return num % 2 === 1;
});
console.log(getArr);

if文の記述が必要なくなる分、filterメソッドを使う方が簡潔で見やすいコードになります。
こちらも、アロー関数式を使ってさらに簡潔に記述することができます。

【サンプルコード】

const numArr = [1, 2, 3, 4, 5];
const getArr = numArr.filter(num => num % 2 === 1);
console.log(getArr);

また、先ほど紹介したmapメソッドと組み合わせ、条件に合致する要素のみを加工して新たな配列を作成するといった応用方法もあります。

【サンプルコード】

const numArr = [1, 2, 3, 4, 5];
const getArr = numArr.filter(num => num % 2 === 1)
    .map(num => num * 10);
console.log(getArr);

【実行結果】

[10, 30, 50]

余談ですが、JavaScriptでは上のサンプルコードのように、使用可能なメソッドを複数繋げて記述するメソッドチェーンという書き方があります。

このメソッドチェーンを記述するときに、メソッドの先頭にあるピリオドの前で改行してもコードの構文解析には影響しないため、複数のメソッドを使うときはメソッドごとに改行するという書き方が可能です。
改行を適宜加えることでどんなメソッドを使用しているか、それぞれのメソッドで何をしているかが見やすくなるため、可読性の高いコードを書くことができます。

for…of文の使い方

最後に、for…of文の使い方について解説していきます。

for…of文は、配列などの列挙可能なオブジェクトに対して、値を順に取り出すループ処理を行う構文です。
構文の機能としては、forEachメソッドにほとんど近い動きをします。

for…of文を使用する際の基本構文は、次のように記述します。

【基本構文】

for (let 変数名 of オブジェクト名) {
  // 処理内容の記述
}

以下が、実際に使用した場合のサンプルコードです。

【サンプルコード】

const numArr = [1, 2, 3, 4, 5];
for (let num of numArr) {
    console.log(num);
}

【実行結果】

for…of文では continue や break の使用が可能なため、条件に応じてループから抜け出したい場合などに適しています。

【サンプルコード】

const numArr = [1, 2, 3, 4, 5];
for (let num of numArr) {
    if (num === 4) {
        break;
    }
    console.log(num);
}

【実行結果】

1
2
3

処理の内容に応じて、forEachメソッドやfor文などと使い分けるといいでしょう。

まとめ

今回は、forEachメソッドの使い方について解説しました。

forEachメソッドは基本的には配列の全ての要素に対して処理を適用したい場合に使います。

配列から別の配列を作ったり、要素を条件分岐で絞り込んだりしたい場合は map や filter といったメソッドを使うこと、continue や break といった処理を中断するための宣言を使う場合はfor…of文を使用することなど、関連して覚えることはたくさんありますが、使いこなすことができれば非常に便利なメソッドです。

紹介した構文やメソッドなども合わせて、ぜひ活用してみてくださいね！

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。