【JS】これでわかる！forEachの使い方

2022 3/11

2022年3月11日 2022年3月11日

こんにちはtakosanです。

forEachの理解って最初は難しいですよね。

ぼくも理解できない頃は泣きそうになってました。

今回はそんなforEachを丁寧にサンプルを交えて解説しようと思います。

forEachの使い方

forEachってそもそも何？という話ですが、

forEachメソッドは、配列データに対して一気にループ処理を行うためのものです。

と、言われても良く分からないと思うので、サンプルを見ながらやっていきましょう！

ここにとあるTodoリストがあるとします。

あなたはその中の要素を全て取得してconsole.log()で内容を表示したい、とします。

forEachはこんな時に便利です。

codepenの中のコメントにも書いてありますが、ひとつずつ解説していきます。

まず下記の部分では、todosというidを持ったul要素の中のliをquerySelectorAll()で取得し、targetsという変数に入れています。

// todosのliを配列で取得
const targets = document.querySelectorAll('#todos li');

そして続きの下記の部分では、targetsとして取得した配列データのひとつひとつをtargetとして取り出していき、

console.log()の中でそのinnnerHTML、つまりli要素の中のテキストを表示する、と指定しているわけですね。

//配列targetsの要素を一つずつtargetとして処理する
targets.forEach((target)=>{
  //target、つまりli要素のinnerHTML=中身のテキストを表示する
  console.log(target.innerHTML);
})

ループならfor文でもできるんじゃじゃないの？

おっしゃる通りです。

一応for文バージョンも書いてみましょう。

HTMLは同じものとして、JSを下記のようにしてみましょう。

const targets = document.querySelectorAll('#todos li');

for(let i = 0; i<targets.length; i++){
  console.log(targets[i].innerHTML);
}

上記はたぶん見たことあるfor文を使ったパターンでの書き方です。

ループの上限回数をtargetsの長さ(配列の個数)＝targets.lengthとして指定することで、

forEachと同じく配列のデータの個数分だけループを回しています。

ただ少し書く量が多いので、慣れてくるとforEachの方が便利になってくるでしょう。

forEachのことなんとなくわかったでしょうか？ぼくも昔は理解できず苦労しました。

ただ分かってしまえば簡単なものだし、使えるようになると結構便利です。

なんとなく雰囲気からつかんでいき、サクっと学んでいきましょう！

ではよいWebライフを～

よかったらシェアしてね！