JavaScriptで検索機能を作る！わかりやすい8つのステップ

はじめに
基本的なHTML構造とCSS
JavaScriptで検索機能を作る9つのステップ
まとめ

はじめに

この記事を読めば、JavaScriptを使って検索機能を作ることができるようになります。

初心者目線で徹底解説し、使い方や注意点、カスタマイズ方法も紹介していくので、ぜひ最後まで読んでみてください。

基本的なHTML構造とCSS

まずは、検索機能を実装するために必要な基本的なHTML構造とCSSを説明します。

下記は、検索フォームと検索対象の要素を含む簡単なHTML構造の例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptで検索機能を作る</title>
</head>
<body>
  <input type="text" id="search-input" placeholder="キーワードを入力">
  <div id="search-results"></div>
  <div class="search-target">
    <h3>タイトル1</h3>
    <p>説明1</p>
  </div>
  <div class="search-target">
    <h3>タイトル2</h3>
    <p>説明2</p>
  </div>
  <!-- 他の検索対象要素を追加 -->
</body>
</html>

この例では、検索フォームにキーワードを入力し、検索対象の要素（.search-targetクラスが付与された<div>要素）から該当するものを表示する機能を実装することを目指します。

次に、簡単なCSSを定義して、見た目を整えましょう。

body {
  font-family: Arial, sans-serif;
}

.search-target {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 10px;
}

h3 {
  margin-top: 0;
}

JavaScriptで検索機能を作る9つのステップ

ここからは、JavaScriptを使って検索機能を実装する手順を9つのステップで解説していきます。

○ステップ1：検索フォームを作成する

まずは、HTMLで定義した検索フォームに入力されたキーワードを取得できるようにしましょう。

下記のJavaScriptコードを追加します。

const searchInput = document.getElementById('search-input');

searchInput.addEventListener('input', () => {
  const keyword = searchInput.value;
  console.log(keyword);
});

このコードでは、検索フォーム（#search-input）に入力があったときに、その値（キーワード）を取得してコンソールに表示しています。

○ステップ2：検索対象の要素を定義する

次に、検索対象の要素を取得しましょう。下記のコードを追加します。

const searchTargets = document.querySelectorAll('.search-target');

このコードでは、.search-targetクラスが付与された要素をすべて取得しています。

○ステップ3：検索キーワードを取得する

検索フォームで入力されたキーワードを取得するために、下記のコードを追加します。

searchInput.addEventListener('input', () => {
  const keyword = searchInput.value.trim().toLowerCase();
  console.log(keyword);
});

ここでは、trim()メソッドを使って入力値の前後の空白を削除し、toLowerCase()メソッドで小文字に変換しています。

これにより、検索時に大文字小文字の違いを無視することができます。

○ステップ4：検索結果を表示する

次に、検索結果を表示するためのコードを追加しましょう。

下記のコードを追加します。

const searchResults = document.getElementById('search-results');

function showSearchResult(target) {
  target.style.display = 'block';
}

function hideSearchResult(target) {
  target.style.display = 'none';
}

ここでは、検索結果を表示するshowSearchResult()関数と、非表示にするhideSearchResult()関数を定義しています。

○ステップ5：検索条件に合う要素を絞り込む

検索キーワードが入力されたときに、検索対象の要素から条件に合うものを絞り込むためのコードを追加しましょう。

下記のコードを追加します。

function filterSearchResults() {
  searchTargets.forEach((target) => {
    const text = target.textContent.toLowerCase();
    if (text.includes(keyword)) {
      showSearchResult(target);
    } else {
      hideSearchResult(target);
    }
  });
}

searchInput.addEventListener('input', filterSearchResults);

filterSearchResults()関数では、検索対象の要素をループして、その要素のテキストコンテンツが検索キーワードを含むかどうかを判定しています。

含む場合はshowSearchResult()関数で表示し、含まない場合はhideSearchResult()関数で非表示にしています。

○ステップ6：検索結果がない場合のメッセージを表示する

検索結果がない場合に、その旨を表示するメッセージを追加しましょう。

下記のコードを追加します。

function showNoResultsMessage() {
  searchResults.innerHTML = '<p>検索結果がありません。</p>';
}

function clearSearchResults() {
  searchResults.innerHTML = '';
}

showNoResultsMessage()関数では、検索結果がないことを示すメッセージを表示しています。

clearSearchResults()関数では、検索結果エリアの内容をクリアしています。

○ステップ7：検索結果の表示を更新する

検索結果が更新されるたびに、表示を更新するためのコードを追加しましょう。

下記のコードを追加します。

function updateSearchResults() {
  const visibleTargets = Array.from(searchTargets).filter((target) => target.style.display === 'block');
  if (visibleTargets.length === 0) {
    showNoResultsMessage();
  } else {
    clearSearchResults();
  }
}

searchInput.addEventListener('input', updateSearchResults);

このコードでは、表示されている検索対象の要素が0件の場合、showNoResultsMessage()関数でメッセージを表示し、そうでない場合はclearSearchResults()関数で検索結果エリアの内容をクリアしています。

○ステップ8：検索機能を最適化する

検索機能を最適化するために、入力イベントの度に検索処理が行われるのではなく、一定時間入力がない場合にのみ検索処理を行うようにしましょう。

下記のコードを追加します。

let timeoutId = null;
const debounceTime = 300;

function debouncedFilterSearchResults() {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
  timeoutId = setTimeout(filterSearchResults, debounceTime);
}

searchInput.addEventListener('input', debouncedFilterSearchResults);

このコードでは、debouncedFilterSearchResults()関数を作成し、setTimeout()を使用してfilterSearchResults()関数の実行を遅延させています。

入力イベントが発生するたびに、clearTimeout()を呼び出して前のタイマーをキャンセルし、新しいタイマーを設定しています。

これにより、一定時間（debounceTime）入力がない場合にのみ検索処理が実行されるようになります。