UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#159 JavaScriptのforEachメソッドの基本構文

記入日:2023-06-16 編集日:2023-06-16

JavaScriptのforEachメソッドの基本構文を解説してみようと思います。

この記事を読むと(約5分)
JavaScriptのforEachメソッドの基本構文をイメージできます。

forEachメソッドの基本構文

forEach メソッドは、配列や NodeList などの反復可能オブジェクトに対して使用され、
各要素に対して指定した関数を実行します。

forEach メソッドの基本的な構文は次のようになります。

array.forEach(callback(currentValue, index, array) {
  // コールバック関数の処理
});

- array: 反復可能オブジェクト(例:配列、NodeList)
- callback: 各要素に対して実行されるコールバック関数
- currentValue: 現在処理されている要素の値
- index(オプション): 現在処理されている要素のインデックス
- array(オプション): forEach メソッドが呼び出された
 配列または NodeList オブジェクト

quantityLabels.forEach(label => {
  console.log(label.textContent);
});

上記のコードでは、quantityLabels が NodeList オブジェクトであり、
各要素に対してコールバック関数が実行されます。

コールバック関数 (label => { console.log(label.textContent); }) はアロー関数として定義されており、 各要素の textContent プロパティがコンソールに出力されます。


具体的な処理の流れは次のようになります。

1. quantityLabels の各要素に対して、指定されたコールバック関数が順番に実行
2. コールバック関数内では、各要素が label として参照
3. console.log(label.textContent) によって
 各要素の textContent プロパティがコンソールに出力

上記の例では、quantityLabels の各要素のテキストコンテンツが
コンソールに出力されるため、出力結果は次のようになります。

1
2
4

このように、forEach メソッドを使用することで、
反復可能なオブジェクト内の要素に対して繰り返し処理を行うことができます。

その他のコールバック例

以下にいくつかの異なるコールバック関数の例を示します。


1. 要素の背景色を変更するコールバック関数:

quantityLabels.forEach(label => {
  label.style.backgroundColor = "red";
});

このコードでは、quantityLabels の各要素の背景色が赤に変更されます。


2. 要素のテキストを置換するコールバック関数:

quantityLabels.forEach(label => {
  label.textContent = "New Text";
});

このコードでは、quantityLabels の各要素のテキストが "New Text" に置換されます。


3. 要素を非表示にするコールバック関数:

quantityLabels.forEach(label => {
  label.style.display = "none";
});

このコードでは、quantityLabels の各要素が非表示にされます。


これらの例では、要素のスタイルや内容を変更するコールバック関数を使用しています。 各コールバック関数が forEach メソッドによって実行されると、要素の状態が変更されます。

具体的な結果は、HTML内の要素の状態によって異なりますが、
上記の例では次のような変化が起こります。

1. 背景色が赤に変更される。
2. テキストが "New Text" に置換される。
3. 要素が非表示にされる。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。