検索・絞り込み機能を実装しよう

― ユーザー操作に応じて表示を制御するインタラクションの基本

はじめに

前回は、複数のデータをAPIから取得し、リストとしてWebページに表示する方法を学びました。今回はそこからさらに一歩進めて、ユーザーの入力に応じて表示データを動的に絞り込む検索機能を実装します。

検索やフィルターは、ECサイトの商品検索、YouTubeの動画一覧、求人サイトの条件絞り込みなど、あらゆるWebアプリケーションで利用されている重要な機能です。
JavaScriptを使えば、データをページ上に表示したあとで、ユーザーの入力に応じてリアルタイムに表示を制御することが可能です。

今回は、前回取得したユーザーリストをベースに、名前で検索できるインターフェースを作ってみましょう。

検索機能の考え方：入力とリアクションの流れ

検索機能の基本構造は、以下のようなステップで成り立っています。

  1. APIやデータベースから全データを取得
  2. ページ上にすべてのデータを表示（初期状態）
  3. ユーザーが検索キーワードを入力
  4. 入力値に応じて、表示対象のデータだけを再描画

この一連の処理をJavaScriptで制御することで、リアルタイム検索のような動的インターフェースが実現できます。

実装：名前でユーザーを絞り込む検索機能

まずはHTMLに検索用の入力欄を追加し、JavaScriptでキーワードに応じてリストを絞り込みます。

HTML

<section>
  <h2>ユーザー検索</h2>
  <input type="text" id="searchInput" placeholder="名前で検索" />
  <button id="loadUsers">ユーザーを取得</button>
  <ul id="userList"></ul>
</section>

JavaScript

const loadBtn = document.getElementById('loadUsers');
const userList = document.getElementById('userList');
const searchInput = document.getElementById('searchInput');

let allUsers = []; // APIから取得したユーザーを保存

loadBtn.addEventListener('click', () => {
  fetch('https://randomuser.me/api/?results=20')
    .then(response => response.json())
    .then(data => {
      allUsers = data.results;
      renderUsers(allUsers);
    })
    .catch(error => {
      console.error('取得エラー:', error);
    });
});

searchInput.addEventListener('input', () => {
  const keyword = searchInput.value.toLowerCase();
  const filtered = allUsers.filter(user => {
    const fullName = `${user.name.first} ${user.name.last}`.toLowerCase();
    return fullName.includes(keyword);
  });
  renderUsers(filtered);
});

function renderUsers(users) {
  userList.innerHTML = '';

  users.forEach(user => {
    const li = document.createElement('li');
    li.innerHTML = `
      <img src="${user.picture.thumbnail}" alt="ユーザー画像" />
      <span>${user.name.first} ${user.name.last}（${user.email}）</span>
    `;
    userList.appendChild(li);
  });
}

解説

  • allUsers 配列にAPIで取得したすべてのユーザー情報を保持
  • inputイベントで検索欄の文字入力を監視
  • 入力値にマッチするユーザーのみをfilter()で抽出
  • 抽出したユーザーをrenderUsers()関数で再表示

検索対象の文字列には toLowerCase() を適用し、大文字小文字の違いによるマッチ漏れを防いでいます。

ユーザー体験を高めるための工夫

検索機能は単に「フィルターする」だけでなく、UX（ユーザー体験）を考慮して以下のような工夫を加えると実用的なものになります：

  • ヒットしなかった場合のメッセージ表示
    → if (users.length === 0) で条件分岐し、「該当するユーザーがいません」と表示する
  • 検索欄をフォーカスした際にリストを表示
    → 初期状態では空欄でも良く、必要に応じて再描画
  • リアルタイム検索 or エンター送信
    → inputイベントか、keydownでEnterキーを検知して発火を制御

よくあるミスとその対処

  • 検索結果が常に空になる → includes()で大小文字を区別している／名前の構造が間違っている
  • ボタンを押すたびにuserListが重複 → renderUsers()の最初に .innerHTML = '' で初期化
  • データ取得後に検索できない → allUsersに正しく値を保存しているか確認

また、開発中は常に console.log() を使ってデータの中身を確認しながら進めると、トラブルを防ぎやすくなります。

まとめ

検索や絞り込みといった「表示制御」は、静的なページでは実現できないインタラクティブなWeb体験の核となる機能です。今回紹介したキーワードによる絞り込みは、今後以下のような機能へと応用が可能です：

  • カテゴリやタグによるフィルター
  • チェックボックスやドロップダウンと連携した絞り込み
  • 検索結果のハイライトやソート

今回のポイント：

  • 検索キーワードをJavaScriptで取得し、リアルタイムにリストを更新
  • filter()やincludes()など配列の操作メソッドを使いこなす
  • UXを意識した見た目・動きの調整も取り入れる

次回は、検索やフィルター処理をさらに発展させ、タブ切り替え・表示のトグル・状態管理といったUI実装テクニックに挑戦します。

次回予告

タブ切り替え・表示の切り替えを実装しよう ― UIの状態管理とDOM制御の基本

コメント

タイトルとURLをコピーしました