JavaScript | 1 日 120 分 × 7 日アプリ学習：検索 & ソート機能付き一覧

1日目のゴールと今日やること

1 日目のテーマは
「検索・ソート機能付きの一覧アプリを作りながら、高階関数（map / filter / sort）の本質を理解する」
ことです。

今日の学習ポイントは次の 3 つ。

• map / filter / sort を“道具”として使えるようにする
• 配列を壊さない「非破壊操作」を身につける
• リアルタイム検索・昇順/降順ソート・複合条件フィルタを実装する

初心者がつまずきやすい部分を、例題を交えて丁寧に解説していきます。

高階関数とは何かを“本当にわかる”ようにする

map / filter / sort は「配列を加工するための道具」

JavaScript の配列には、便利なメソッドがたくさんあります。
その中でも、アプリ開発で最も使うのがこの 3 つ。

• map（配列の形を変える）
• filter（条件に合うものだけ残す）
• sort（並び替える）

これらは 「配列を加工するための道具」 です。

例題：果物の配列

const fruits = ["apple", "banana", "orange"];

const fruits = ["apple", "banana", "orange"];

map の例

const upper = fruits.map(f => f.toUpperCase());
// ["APPLE", "BANANA", "ORANGE"]

const upper = fruits.map(f => f.toUpperCase());
// ["APPLE", "BANANA", "ORANGE"]

filter の例

const long = fruits.filter(f => f.length >= 6);
// ["banana", "orange"]

const long = fruits.filter(f => f.length >= 6);
// ["banana", "orange"]

sort の例

const sorted = [...fruits].sort();
// ["apple", "banana", "orange"]

const sorted = [...fruits].sort();
// ["apple", "banana", "orange"]

ここで重要なのは、
sort は元の配列を壊す（破壊的）
ということです。

非破壊操作を身につける

sort の落とし穴

const arr = [3, 1, 2];
arr.sort();
console.log(arr); // [1, 2, 3]

const arr = [3, 1, 2];
arr.sort();
console.log(arr); // [1, 2, 3]

sort は元の配列を直接書き換えます。
これがバグの原因になりやすい。

非破壊で sort する方法

const arr = [3, 1, 2];
const sorted = [...arr].sort();

const arr = [3, 1, 2];
const sorted = [...arr].sort();

...（スプレッド構文）でコピーを作ってから sort することで、
元の配列を壊さずに済みます。

これは 中級者への第一歩 です。

今日作るアプリのイメージ

例：ユーザー一覧

const users = [
  { id: 1, name: "Alice", age: 24 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 28 }
];

const users = [
  { id: 1, name: "Alice", age: 24 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 28 }
];

これをもとに、

• リアルタイム検索（名前で絞り込み）
• 年齢の昇順 / 降順ソート
• 名前 + 年齢の複合条件フィルタ

を実装します。

リアルタイム検索を作る

HTML のイメージ

<input id="searchInput" placeholder="名前で検索" />
<div id="list"></div>

JavaScript 側で取得します。

const searchInput = document.getElementById("searchInput");
const listDiv = document.getElementById("list");

const searchInput = document.getElementById("searchInput");
const listDiv = document.getElementById("list");

検索ロジックを filter で作る

入力に応じて絞り込む

function filterUsers(keyword) {
  const lower = keyword.toLowerCase();

  return users.filter(user =>
    user.name.toLowerCase().includes(lower)
  );
}

function filterUsers(keyword) {
  const lower = keyword.toLowerCase();

  return users.filter(user =>
    user.name.toLowerCase().includes(lower)
  );
}

深掘りポイント

• includes で部分一致検索
• toLowerCase で大文字小文字を無視
• filter は非破壊なので元の users は壊れない

これが「検索機能の基本形」です。

リアルタイム検索のイベントをつなぐ

searchInput.addEventListener("input", () => {
  const keyword = searchInput.value;
  const filtered = filterUsers(keyword);
  renderList(filtered);
});

searchInput.addEventListener("input", () => {
  const keyword = searchInput.value;
  const filtered = filterUsers(keyword);
  renderList(filtered);
});

深掘りポイント

input イベントは「文字が入力されるたびに発火」します。
これがリアルタイム検索の仕組みです。

昇順 / 降順ソートを作る

sort の比較関数を理解する

const asc = [...users].sort((a, b) => a.age - b.age);
const desc = [...users].sort((a, b) => b.age - a.age);

const asc = [...users].sort((a, b) => a.age - b.age);
const desc = [...users].sort((a, b) => b.age - a.age);

深掘りポイント

比較関数は「a と b のどちらを先にするか」を決める関数です。

• a.age – b.age → 小さい順（昇順）
• b.age – a.age → 大きい順（降順）

sort は破壊的なので、必ず [...users] でコピーしてから使います。

複合条件フィルタを作る

名前 + 年齢の両方で絞り込む

function filterUsersAdvanced(keyword, minAge, maxAge) {
  const lower = keyword.toLowerCase();

  return users.filter(user => {
    const matchName = user.name.toLowerCase().includes(lower);
    const matchAge = user.age >= minAge && user.age <= maxAge;
    return matchName && matchAge;
  });
}

function filterUsersAdvanced(keyword, minAge, maxAge) {
  const lower = keyword.toLowerCase();

  return users.filter(user => {
    const matchName = user.name.toLowerCase().includes(lower);
    const matchAge = user.age >= minAge && user.age <= maxAge;
    return matchName && matchAge;
  });
}

深掘りポイント

filter の中で複数条件を組み合わせると、
「検索 + 年齢フィルタ」のような複合検索が簡単に作れます。

一覧表示の render 関数を作る

function renderList(arr) {
  if (!arr.length) {
    listDiv.textContent = "該当するユーザーはいません。";
    return;
  }

  let html = "";
  arr.forEach(user => {
    html += `<p>${user.name}（${user.age}歳）</p>`;
  });

  listDiv.innerHTML = html;
}

function renderList(arr) {
  if (!arr.length) {
    listDiv.textContent = "該当するユーザーはいません。";
    return;
  }

  let html = "";
  arr.forEach(user => {
    html += `<p>${user.name}（${user.age}歳）</p>`;
  });

  listDiv.innerHTML = html;
}

深掘りポイント

render は「表示にだけ責任を持つ」ようにします。
ロジックと UI を分けることで、コードが読みやすくなります。

1日目のまとめ

今日あなたがやったことを整理すると、こうなります。

• map / filter / sort の本質を理解した
• sort が破壊的であることを知り、非破壊操作を身につけた
• リアルタイム検索を filter で実装した
• 昇順 / 降順ソートを比較関数で実装した
• 複合条件フィルタを filter の中で組み合わせて作った
• render 関数で UI とロジックを分離した

どれも中級者に必須のスキルです。

今日いちばん深く理解してほしいこと

1日目の本質は、

「map / filter / sort は、配列を加工するための“道具”であり、アプリの機能はこれらの組み合わせで作れる」

ということです。

検索
ソート
フィルタ
変換
集計

これらはすべて、
map / filter / sort の組み合わせで作れます。

2日目では、この一覧アプリに

• ソートボタン
• 年齢スライダー
• 複数条件の UI
• 状態管理（state）

などを加えて、さらに“使っていて気持ちいいツール”に育てていきます。