Claude Code के साथ Implement Search Functionality कैसे करें

searchfeaturesのimplementationको Claude Code से तेज़ करें

searchfeaturesはuser体験に直結するimportantなfeatures है।デバウンスprocessing、ハイlightdisplay、フィルタリング आदि、考慮すべき点が多くあり है।Claude Code सेこれらをまとめてimplementationでき है।

インクリメンタルサーチのimplementation

リアルタイムでsearch結果がupdateされるインクリメンタルサーチを作り है।

> デバウンス付きのインクリメンタルサーチcomponentをReactで作って。
> search結果のkeyワードハイlightもお願い。

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">searchमें...</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>
  );
}

serverサイド：SQLによるsearchAPI

バックエンドのsearchAPIもClaude Code को requestでき है।

// Next.js App Router APIroute
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),
  });
}

静的サイトでのclientsearch

ブlogや文書サイトなら、build時にsearchインデックス generateする方法が有効 है।

// searchインデックスgenerateスクリプト
import MiniSearch from "minisearch";
import fs from "fs";
import path from "path";

const posts = getAllPosts(); // 記事dataのfetch

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())
);

正規表現をutilizationした高度なpatternマッチングके बारे मेंはClaude Code से正規表現 create・debugする方法भी reference के लिए देखें。効率的なプロンプトのलिखने का तरीकाは生産性を3倍にする10のTipsで紹介してい है।

Summary

Claude Code का उपयोग करके、デバウンス、ハイlight、ファセットsearchといったsearchfeaturesのcomplexな要件も、自然言語で伝える से हीimplementationでき है।フロントエンド सेバックエンド तक一貫した設計をकम समय में得られ है।

詳細はClaude Codeofficial documentationをदेखें。