2020/09/14 (更新日: 2021/01/23)

forEachの使い方・注意点 【簡単！モダンなJavaScriptの配列操作をマスターする】

JavaScript PROGRAMMING

本記事では、JavaScriptでよく使う配列操作のArrayメソッドでもよく使う「forEach」紹介します。

forEachの使い方

forEachメソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

forEachの構文は以下のように定義されています。

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

引数
callback
各要素に対して実行するコールバック関数で、1つから3つの引数を受け付けます。
currentValue
現在処理されている配列の要素です。
index Optional
配列内の currentValue の添字です。
array Optional
forEach() が呼び出されている配列です。
thisArg Optional
callback 内で this として使用する値です。

返り値
undefined

第2引数以降は任意で、必要に応じてつけます。通常使うのは第1引数〜第2引数までだと思います。

実際のforEachの例

forEachを使う場面としては、いろいろありますが、配列のループをすべて回したい時に使います。
※処理を途中で切ったりする処理は、別のArrayメソッドを使います。

具体的な例でいうと、.itemの要素すべてにクリックイベントを設定するといったようなケースです。

▼HTML

<ul class="list">
<li class="item">メニュー1</li>
<li class="item">メニュー2</li>
<li class="item">メニュー3</li>
<li class="item">メニュー4</li>
</ul>

▼JavaScript

// .item要素を取得して配列で管理する
const items = [...document.getElementsByClassName('item')];

// .item要素がクリックされたら
items.forEach(item => {
  // クリックイベント
  item.addEventListener('click', () => {
    // クリック要素に.is-activeをつける
    item.classList.add('is-active');
  });
});

この例では、「.item」要素すべてにforEachでクリックイベントを設定している例です。
※今回は事例としてforEachを利用しているのですが、forEach内では非同期処理が書けないので、このケースにおいて本来はfor...ofなどの方が好ましいかもしれません。

GitHubに上記の例を少し拡張した例を載せているのでよければ参考にしてみてください。
GitHubソースコード： https://github.com/it-web-life/javascript_foreach
動作確認サイト： https://it-web-life.github.io/javascript_foreach/

forEachの注意点

forEachは配列の基本的なArrayメソッドのひとつでよく使いますが、注意点があります。

forEachは途中で止めることはできない

forEachは条件判定などで途中で止めることはできません。（breakでループを抜けるなどはできません）
途中でループを抜ける処理をするときは、以下の方法の方が適しています。

• for…ofやfor…in ループ
• every(), some(), find(), findIndex() のArrayメソッド

forEach内で非同期処理はできない

非同期処理はできないので、forEach内に非同期処理は書かないようにします。
※「forEachは同期関数を期待する」とされています。

適切なArrayメソッドを使う

map / filter / find / every / some / reduce など配列では適切なArrayメソッドを使うことが、可読性をよくする上でも重要です。
これらの他のArrayメソッドに適さない場合にforEachを使う認識がよいと思います。

他には初心者に見られるのが、forEachでループしているもとの配列自体を処理内で削除・変更(spliceやpushで変更)する人がいるのですがこれはNGなのでやめるべきです。

forEachの使い方・注意点のまとめ

今回はforEachの使い方、注意点を解説しました。

配列 arr を arr.forEach(【コールバック関数】) でループ処理できる

※公式にも分かりやすい事例があります

forEachの注意点

• forEachは途中で止めることはできない
• forEach内で非同期処理はできない
• 適切なArrayメソッドを使う
  (map / filter / find / every / some / reduceが使える時はそちらを使う)

ご参考になれば幸いです。

JavaScript プログラミング

※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています

• facebook
• Tweet
• hatebu
• Share
• Read Later