JavaScriptでWebサイトを「データ駆動」にする！ 🚀

前回の記事で、map、filter、findといった強力な配列メソッドを学び、データを自在に加工できるようになりましたね。Web開発における最終目標は、これらの「加工されたデータ」をWebサイト（DOM）上に反映させ、ユーザーに見せることです。

これまで学んだ知識（DOM操作と配列メソッド）を組み合わせることで、「商品リストをデータに基づいて自動で生成する」「検索結果をリアルタイムで絞り込む」といった、**データ駆動（Data-Driven）**の動的なWebサイトを構築できます。

今回は、特に重要となる「配列データをループでDOMに展開する」というテクニックを徹底的に解説します。

1. データの展開：forEachとinnerHTMLの組み合わせ
1. テンプレートリテラルでHTMLを生成する
2. forEachを使ったリストの動的生成
2. 実践的な応用：filterで絞り込み機能を実装する
まとめ：データとDOMを繋ぐのがJavaScriptの役割

1. データの展開：forEachとinnerHTMLの組み合わせ

Webサイトにリストやカードなどのコンテンツを表示させる際、JavaScriptは以下の手順でDOMを操作します。

データを用意する：配列（オブジェクトの配列が多い）を定義します。
コンテナを取得する：データを表示させる親となるHTML要素（コンテナ）をDOMから取得します。
ループ処理：配列メソッド（forEachやmap）を使ってデータを一つずつ処理します。
HTMLを生成する：各データに基づいて、表示するためのHTML文字列を作成します。
コンテナに挿入する：生成したHTML文字列をコンテナ要素に挿入し、画面に表示します。

テンプレートリテラルでHTMLを生成する

JavaScriptでHTMLを生成する際、**テンプレートリテラル（Template Literal）**を使うと非常に便利です。バッククォート（ ` ）で文字列を囲み、その中に ${変数名} の形でJavaScriptの変数を埋め込めます。

JavaScript

const name = "商品A";
const price = 1500;

// 変数を埋め込んだHTML文字列を生成
const html = `
  <div class="card">
    <h3>${name}</h3>
    <p>価格：¥${price}</p>
  </div>
`;

forEachを使ったリストの動的生成

以下の例では、商品のリストをDOMに表示します。

HTML (表示コンテナ)

HTML

<div id="product-list">
  </div>

JavaScript

JavaScript

const products = [
  { id: 1, name: "リンゴ", price: 100 },
  { id: 2, name: "バナナ", price: 150 },
  { id: 3, name: "ミカン", price: 80 }
];

// 1. コンテナ要素を取得
const container = document.getElementById('product-list');

products.forEach(product => {
  // 2. データを使ってHTML文字列を生成
  const cardHTML = `
    <div class="product-card">
      <h2>${product.name}</h2>
      <p>価格: ¥${product.price}</p>
    </div>
  `;
  
  // 3. コンテナにHTMLを追記 (既存のHTMLに追加していく)
  container.innerHTML += cardHTML;
});

2. 実践的な応用：filterで絞り込み機能を実装する

配列メソッドの真価は、DOM操作との連携で発揮されます。例えば、ユーザーが入力したキーワードで商品リストを絞り込む機能は、filterメソッドとDOM操作の組み合わせで作られます。

手順

入力フィールド（インプット要素）から検索キーワードを取得する。
元の配列に対して**filterメソッド**を実行し、キーワードを含む商品だけを抽出する。
抽出された新しい配列を、先ほど学んだforEachの処理でDOMに再度展開する。

これにより、Webサイトの表示内容がデータに基づいてリアルタイムに更新され、ユーザーに動的な体験を提供できます。

まとめ：データとDOMを繋ぐのがJavaScriptの役割

Web制作におけるJavaScriptの最も重要な役割は、「データ」と「見た目（DOM）」を繋ぐことです。

データ（配列/オブジェクト）：Webサイトに表示したい情報そのもの。
配列メソッド：データを加工・整形・絞り込みする。
テンプレートリテラル：加工後のデータを使ってHTMLの雛形を作成する。
DOM操作：生成したHTMLを画面に表示する。

この一連の流れをマスターすれば、あなたは簡単な静的サイトから、データを使って動的にコンテンツを生成する、モダンなWebサイト作成へとステップアップできます。まずは、今回紹介したinnerHTMLとテンプレートリテラルを使ったリスト生成を、ぜひ試してみてください。