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

はじめに
●基本的なHTML構造とCSS
- ○HTML構造の例
- ○CSSでデザインを整える
●JavaScriptで検索機能を作る9つのステップ
まとめ

はじめに

JavaScriptを活用して検索機能を実装する方法について、初心者の方々にも理解しやすいように詳しく解説します。

この記事では、基本的なHTML構造とCSSの説明から始め、JavaScriptを使った検索機能の作成手順を9つのステップに分けて丁寧に説明していきます。

さらに、使用方法や注意点、カスタマイズの方法についても触れていきますので、最後までお読みいただくことをおすすめします。

●基本的なHTML構造とCSS

検索機能を実装するには、まず適切なHTML構造とCSSが必要です。

ここでは、シンプルながら効果的な構造を紹介します。

○HTML構造の例

検索フォームと検索対象の要素を含む基本的な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クラスを付与しています。

○CSSでデザインを整える

HTML構造が準備できたら、次はCSSを使って見た目を整えます。

ここではシンプルなCSSの例を見てみましょう。

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

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

h3 {
  margin-top: 0;
}

このCSSにより、検索対象の要素が見やすくなり、全体的な見栄えが向上します。

●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）入力がない場合にのみ検索処理が実行されるようになり、パフォーマンスが向上します。