JavaScript | forEachを使ってWeb画面にデータを表示するミニアプリ

JavaScript

2025.10.26

では次は、forEach を実践で使いこなす練習用のミニアプリを一緒に作っていきましょう！

テーマ：ユーザーリストを表示して、検索＆並び替えできるアプリ
（HTML + CSS + JavaScript だけで動く、初心者向けのシンプル構成）

学べること
完成イメージ
コード全体（コピペでOK）
解説（初心者向け）
発展練習アイデア

学べること

このアプリで次のことが自然に身につきます👇

学習ポイント	内容
✅ forEach	配列の全要素を順に処理して画面に表示
✅ filter	検索機能（条件に合うデータだけ抽出）
✅ sort	並び替え（年齢順など）
✅ イベント処理	入力やボタン操作に反応する

完成イメージ

ページを開くと、ユーザー一覧が表示されます。
「検索」欄に文字を入れると、その名前を含む人だけが表示されます。
「年齢順に並び替え」ボタンを押すと、年齢が若い順に並び替わります。

コード全体（コピペでOK）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>forEach 実践アプリ</title>
<style>
  body {
    font-family: "Segoe UI", sans-serif;
    background: #f4f6fa;
    margin: 0;
    padding: 20px;
  }
  h1 {
    color: #333;
  }
  input, button {
    padding: 8px;
    font-size: 14px;
    margin: 5px 0;
  }
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    background: white;
    border-radius: 8px;
    padding: 10px;
    margin: 6px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  .age {
    color: #555;
    font-size: 13px;
  }
</style>
</head>
<body>

<h1>👤 ユーザー一覧</h1>

<input type="text" id="search" placeholder="名前で検索...">
<button id="sortBtn">年齢順に並び替え</button>

<ul id="userList"></ul>

<script>
  // サンプルデータ（オブジェクト配列）
  const users = [
    { name: "Taro", age: 22 },
    { name: "Hanako", age: 25 },
    { name: "Ken", age: 30 },
    { name: "Mika", age: 18 },
    { name: "Satoshi", age: 27 }
  ];

  const listEl = document.getElementById("userList");
  const searchEl = document.getElementById("search");
  const sortBtn = document.getElementById("sortBtn");

  // ✨ forEach でリストを描画する関数
  function renderList(data) {
    listEl.innerHTML = ""; // いったんリストをクリア
    data.forEach(function(user) {
      const li = document.createElement("li");
      li.innerHTML = `<strong>${user.name}</strong><div class="age">年齢: ${user.age}</div>`;
      listEl.appendChild(li);
    });
  }

  // 初期表示
  renderList(users);

  // 🔍 検索機能
  searchEl.addEventListener("input", function() {
    const keyword = this.value.toLowerCase();
    const filtered = users.filter(u => u.name.toLowerCase().includes(keyword));
    renderList(filtered);
  });

  // 🔄 並び替え機能
  sortBtn.addEventListener("click", function() {
    const sorted = [...users].sort((a, b) => a.age - b.age);
    renderList(sorted);
  });
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>forEach 実践アプリ</title>
<style>
  body {
    font-family: "Segoe UI", sans-serif;
    background: #f4f6fa;
    margin: 0;
    padding: 20px;
  }
  h1 {
    color: #333;
  }
  input, button {
    padding: 8px;
    font-size: 14px;
    margin: 5px 0;
  }
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    background: white;
    border-radius: 8px;
    padding: 10px;
    margin: 6px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  .age {
    color: #555;
    font-size: 13px;
  }
</style>
</head>
<body>

<h1>👤 ユーザー一覧</h1>

<input type="text" id="search" placeholder="名前で検索...">
<button id="sortBtn">年齢順に並び替え</button>

<ul id="userList"></ul>

<script>
  // サンプルデータ（オブジェクト配列）
  const users = [
    { name: "Taro", age: 22 },
    { name: "Hanako", age: 25 },
    { name: "Ken", age: 30 },
    { name: "Mika", age: 18 },
    { name: "Satoshi", age: 27 }
  ];

  const listEl = document.getElementById("userList");
  const searchEl = document.getElementById("search");
  const sortBtn = document.getElementById("sortBtn");

  // ✨ forEach でリストを描画する関数
  function renderList(data) {
    listEl.innerHTML = ""; // いったんリストをクリア
    data.forEach(function(user) {
      const li = document.createElement("li");
      li.innerHTML = `<strong>${user.name}</strong><div class="age">年齢: ${user.age}</div>`;
      listEl.appendChild(li);
    });
  }

  // 初期表示
  renderList(users);

  // 🔍 検索機能
  searchEl.addEventListener("input", function() {
    const keyword = this.value.toLowerCase();
    const filtered = users.filter(u => u.name.toLowerCase().includes(keyword));
    renderList(filtered);
  });

  // 🔄 並び替え機能
  sortBtn.addEventListener("click", function() {
    const sorted = [...users].sort((a, b) => a.age - b.age);
    renderList(sorted);
  });
</script>

</body>
</html>

HTML

解説（初心者向け）

コード部分	やっていること
`users`	名前と年齢のデータをまとめた配列（オブジェクトの配列）
`renderList()`	配列の中身を1人ずつ取り出してHTMLに出す（`forEach`使用）
`searchEl.addEventListener("input", ...)`	入力があるたびに検索結果を再表示
`filter()`	条件（名前に含まれる）を満たす要素だけ抽出
`sort()`	年齢の昇順に並び替え
`renderList()`	`forEach` によってリストを再描画