How to Implement Search Functionality: Claude Code 활용 가이드

검색機能の구현をClaude Code로 가속화하기

검색機能は사용자体験に直結する重要な機能です。デバウンス処理、ハイライト표시、フィルタリングなど、考慮すべき点が多くあります。Claude Code를 사용하면이것らをまとめて구현할 수 있습니다。

インクリメンタルサーチの구현

실시간で검색結果が업데이트されるインクリメンタルサーチを作ります。

> デバウンス付きのインクリメンタルサーチ컴포넌트をReactで作って。
> 검색結果のキーワードハイライトもお願い。

import { useState, useEffect, useMemo } from "react";

function useDebounce<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}

function highlightText(text: string, query: string) {
  if (!query) return text;
  const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
  const parts = text.split(regex);
  return parts.map((part, i) =>
    regex.test(part) ? <mark key={i} className="bg-yellow-200">{part}</mark> : part
  );
}

interface SearchResult {
  id: string;
  title: string;
  description: string;
}

export function SearchBox() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<SearchResult[]>([]);
  const [loading, setLoading] = useState(false);
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (!debouncedQuery) {
      setResults([]);
      return;
    }

    const controller = new AbortController();
    setLoading(true);

    fetch(`/api/search?q=${encodeURIComponent(debouncedQuery)}`, {
      signal: controller.signal,
    })
      .then((res) => res.json())
      .then((data) => {
        setResults(data.results);
        setLoading(false);
      })
      .catch((err) => {
        if (err.name !== "AbortError") setLoading(false);
      });

    return () => controller.abort();
  }, [debouncedQuery]);

  return (
    <div className="relative w-full max-w-lg">
      <input
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search by keyword..."
        className="w-full p-3 border rounded-lg"
      />

      {loading && <div className="absolute right-3 top-3">検索中...</div>}

      {results.length > 0 && (
        <ul className="absolute w-full mt-1 bg-white border rounded-lg shadow-lg max-h-96 overflow-y-auto">
          {results.map((item) => (
            <li key={item.id} className="p-3 hover:bg-gray-50 border-b last:border-0">
              <div className="font-semibold">
                {highlightText(item.title, debouncedQuery)}
              </div>
              <div className="text-sm text-gray-600">
                {highlightText(item.description, debouncedQuery)}
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

서버サイド：SQL에 의한검색API

백엔드の검색APIもClaude Code에依頼할 수 있습니다。

// Next.js App Router APIルート
import { db } from "@/lib/database";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const q = searchParams.get("q") || "";
  const category = searchParams.get("category");
  const page = parseInt(searchParams.get("page") || "1");
  const limit = 20;

  if (q.length < 2) {
    return Response.json({ results: [], total: 0 });
  }

  const where: any = {
    OR: [
      { title: { contains: q, mode: "insensitive" } },
      { content: { contains: q, mode: "insensitive" } },
    ],
  };

  if (category) {
    where.category = category;
  }

  const [results, total] = await Promise.all([
    db.article.findMany({
      where,
      skip: (page - 1) * limit,
      take: limit,
      orderBy: { createdAt: "desc" },
      select: { id: true, title: true, description: true, category: true },
    }),
    db.article.count({ where }),
  ]);

  return Response.json({
    results,
    total,
    totalPages: Math.ceil(total / limit),
  });
}

静的サイトでの클라이언트검색

ブ로그や文書サイトなら、빌드時に검색인덱스を생성する方法が유효です。

// 검색인덱스생성スクリプト
import MiniSearch from "minisearch";
import fs from "fs";
import path from "path";

const posts = getAllPosts(); // 글데이터の취득

const miniSearch = new MiniSearch({
  fields: ["title", "content", "tags"],
  storeFields: ["title", "slug", "description"],
  searchOptions: {
    boost: { title: 3, tags: 2 },
    fuzzy: 0.2,
    prefix: true,
  },
});

miniSearch.addAll(posts);

fs.writeFileSync(
  path.join("public", "search-index.json"),
  JSON.stringify(miniSearch.toJSON())
);

正規表現を활용した高度なパターンマッチング에 대해서는Claude Code로正規表現を생성・디버깅する方法도 참고하세요.効率的なプロンプトの書き方は生産性を3倍にする10のTipsで紹介しています。

정리

Claude Code를 활용하면 デバウンス、ハイライト、ファセット검색といった검색機能の複雑な要件も、自然言語で伝える만으로구현할 수 있습니다。프론트엔드から백엔드まで一貫した설계を短시간で得られます。

상세 정보는Claude Code공식 문서를 참고하세요.