array.forEach()

アレイ・フォーイーチ（組み込みオブジェクト）

意味要素毎に関数を実行

array.forEach()とは？

`array.forEach()`メソッドは、配列の各要素に対して関数を実行します。

array.forEach()の具体的な使い方

配列要素をリストとして表示する例

<button onclick='forEachExample()'>ForEach Example</button>
<ul id='fruitList'></ul>
<script>
function forEachExample() {
  const fruits = ['りんご', 'バナナ', 'みかん', 'ぶどう'];
  const list = document.getElementById('fruitList');
  list.innerHTML = '';
  fruits.forEach(fruit => {
    const li = document.createElement('li');
    li.textContent = fruit;
    list.appendChild(li);
  });
}
</script>

この例では、`fruits`配列の各要素に対して、リスト項目を作成してDOM上に表示する処理を実行します。ボタンをクリックするたびに、フルーツのリストが更新されます。

配列要素とインデックスを出力する例

const colors = ['赤', '青', '緑', '黄'];
colors.forEach((color, index) => {
  console.log(`色${index + 1}: ${color}`);
});

👇出力結果

色1: 赤
色2: 青
色3: 緑
色4: 黄

配列の各要素とそのインデックスを出力する例です。日本語の色名を使用し、インデックスを1から始まる番号として表示しています。

array.forEach()に関するよくある質問

Q. forEachで処理を途中で止められる？

A. いいえ、forEach()は全ての要素を処理するまで停止しません。途中で停止したい場合は、for...of ループやsome()メソッドを使用することをお勧めします。

Q. forEachは新しい配列を返しますか？

A. いいえ、forEach()は新しい配列を返しません。各要素に対して関数を実行するだけで、戻り値は常にundefinedです。新しい配列を作成したい場合は、map()メソッドを使用してください。

Q. forEachで非同期処理は扱えますか？

A. forEach()は非同期処理を直接サポートしていません。非同期処理を行う場合は、for...ofループと async/await を組み合わせるか、Promise.allを使用することをお勧めします。

JavaScriptを勉強するのにおすすめな問題集アプリの紹介

楽しくプログラミングを学ぶことで、プログラミングの理解度が深まります。『JavaScript問題集』は、楽しくJavaScriptを学ぶのに最適なアプリです。AIが出題する問題に答えていくことで、自然とJavaScriptの理解度が深まります。

AppStoreからダウンロード：https://apps.apple.com/jp/app/id6737941570

JavaScriptのarray.forEach()についても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのarray.forEach()やarray.reverse()、JSON.parse()、Number.MIN_VALUE、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。