JavaScript forEachメソッドの使い方

  • JavaScript
  • メソッド
最終更新日:

この記事のポイント

forEachメソッドは、配列の各要素に対して順番に処理を実行する便利な機能です。プログラミング初心者の方にも分かりやすく、実際に動くコード例とともに詳しく解説していきます。

  • 配列内の全ての要素を自動で順番に処理できるメソッド
  • for文よりも簡潔で読みやすいコードが書ける手法
  • 実際の開発現場で使われるプログラミング技術

これらのポイントを押さえることで、効率的なJavaScriptプログラミングができるようになります。

目次

forEachメソッドとは？

forEachメソッドは、配列の各要素に対して指定した処理を順番に実行するメソッドです。従来のfor文と比べて、より直感的で読みやすいコードを書くことができます。配列内のすべての要素を自動的に取り出し、それぞれに同じ処理を適用したい場合に便利です。

forEachメソッドを使うことで、繰り返し処理のコードがすっきりとまとまり、バグの発生も少なくなります。初心者の方でも簡単に理解でき、実際の開発現場でも使用されている機能の一つです。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

forEachメソッドの基本的な書き方は以下のようになります。

配列名.forEach(関数)

この関数には、配列の各要素が順番に渡され、指定した処理が実行されます。最も基本的な使い方から、少し応用的な使い方まで、実際のコード例で確認してみましょう。

const animals = ['イヌ', 'ネコ', 'ウサギ']; animals.forEach(function(animal) { console.log(animal); });







出力結果
イヌ
ネコ
ウサギ
アロー関数を使った書き方も可能で、よりシンプルに記述できます。

  
const animals = ['イヌ', 'ネコ', 'ウサギ'];
animals.forEach(animal => {
  console.log(`動物: ${animal}`);
});

  


  







出力結果
動物: イヌ
動物: ネコ
動物: ウサギ
実用例
ここからは、forEachメソッドの具体的な活用方法を紹介します。実際の開発現場でよく使われるパターンを解説します。
各例では、動物を使った分かりやすいデータを用いて、forEachメソッドの多様な使い方を学んでいきましょう。これらの例を理解することで、あなた自身のプロジェクトでもforEachメソッドを効果的に活用できるようになります。
配列要素の表示と順番の確認
配列の各要素とその位置（インデックス）を同時に表示する例です。forEachメソッドでは、第二引数でインデックスを取得できます。

  
const pets = ['イヌ', 'ネコ', 'ハムスター'];
pets.forEach((pet, index) => {
  console.log(`${index + 1}番目: ${pet}`);
});

  


  







出力結果
1番目: イヌ
2番目: ネコ
3番目: ハムスター
オブジェクト配列の処理
オブジェクトが含まれた配列でも、forEachメソッドを使って各プロパティにアクセスできます。

  
const animalData = [
  {name: 'ライオン', type: '肉食'},
  {name: 'ウマ', type: '草食'}
];
animalData.forEach(animal => {
  console.log(`${animal.name}は${animal.type}動物です`);
});

  


  







出力結果
ライオンは肉食動物です
ウマは草食動物です
配列要素の文字列変換
各配列要素を加工して新しい形式で表示する例です。文字列の結合や変換処理でも使われます。

  
const birds = ['ハト', 'スズメ', 'カラス'];
birds.forEach(bird => {
  console.log(`空を飛ぶ${bird}を見ました`);
});

  


  







出力結果
空を飛ぶハトを見ました
空を飛ぶスズメを見ました
空を飛ぶカラスを見ました
数値配列での計算処理
数値が含まれた配列で計算処理を行う例です。各要素に対して同じ演算を適用できます。

  
const animalCounts = [3, 5, 2, 8];
console.log('動物の数を2倍にしました:');
animalCounts.forEach(count => {
  console.log(`${count} × 2 = ${count * 2}`);
});

  


  







出力結果
動物の数を2倍にしました:
3 × 2 = 6
5 × 2 = 10
2 × 2 = 4
8 × 2 = 16
条件分岐を含む処理
if文と組み合わせて、条件に応じた処理を実行する例です。特定の条件を満たす要素にのみ処理を適用できます。

  
const animals = ['イヌ', 'ネコ', 'ゾウ', 'ネズミ'];
animals.forEach(animal => {
  if (animal.length > 2) {
    console.log(`${animal}は文字数の多い動物です`);
  }
});

  


  







出力結果
ネズミは文字数の多い動物です
HTML要素の動的生成
Webページ開発でよく使われる、HTML要素を動的に生成する例です。

  
const zooAnimals = ['パンダ', 'キリン', 'サル'];
let htmlContent = '';
zooAnimals.forEach(animal => {
  htmlContent += `<li>${animal}</li>\n`;
});
console.log(htmlContent);

  


  







出力結果
<li>パンダ</li>
<li>キリン</li>
<li>サル</li>
配列要素のフィルタリング表示
特定の条件を満たす要素のみを表示する例です。データの絞り込み処理でよく使われるパターンです。

  
const farmAnimals = ['ウシ', 'ヒツジ', 'ヤギ', 'ウマ'];
console.log('2文字の動物:');
farmAnimals.forEach(animal => {
  if (animal.length === 2) {
    console.log(animal);
  }
});

  


  







出力結果
2文字の動物:
ウシ
ヤギ
ウマ
複数配列の同期処理
インデックスを使って複数の配列を同時に処理する例です。関連するデータを組み合わせて表示できます。

  
const animals = ['イヌ', 'ネコ', 'ウサギ'];
const colors = ['茶色', '白色', '灰色'];
animals.forEach((animal, index) => {
  console.log(`${colors[index]}の${animal}`);
});

  


  







出力結果
茶色のイヌ
白色のネコ
灰色のウサギ
まとめ
forEachメソッドは、配列の各要素に対して効率的に処理を実行できる強力な機能です。従来のfor文と比較して、コードの可読性が高く、エラーが発生しにくいという大きなメリットがあります。初心者の方でも直感的に理解しやすく、現代のJavaScript開発では必須の知識といえるでしょう。
forEachメソッドの活躍する場面
    

  • Webページでのリスト表示やテーブル作成時の要素生成
    • 

  • APIから取得したデータの加工や表示処理での一括変換
    • 

  • ユーザー入力データの検証や条件チェック処理での活用
    • 

重要なポイント
    

  • 配列の各要素に自動でアクセスできるため処理が簡潔
    • 

  • インデックスも同時に取得可能で柔軟な処理が実現
    • 

  • オブジェクト配列や複雑なデータ構造でも安全に処理
    • 

これらの特徴を理解して活用することで、より効率的で保守性の高いJavaScriptコードを書けるようになります。実際のプロジェクトでぜひ活用してみてください。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript forEachメソッドの使い方