B-073（検索結果のマッチ部分ハイライト）について調査してください。

調査内容

1. 検索コンポーネントの場所と構造（SearchModal等）を特定し、ファイルパスと主要な行番号を報告
2. Fuse.jsの現在の設定を確認（includeMatchesオプションの有無、設定ファイルの場所）
3. Fuse.jsのmatches情報の構造（indices, key, value等）を調査
4. Reactでのハイライト表示の実装パターン（既存ライブラリの有無、自前実装のベストプラクティス）
5. 既存の検索結果表示ロジックの概要

出力

• 関連ファイルのパスと重要な行番号
• 現在のFuse.js設定の概要
• 推奨する実装アプローチ（matches情報の取得方法、ハイライトコンポーネントの設計）
• 注意点・リスク

B-073 調査レポート: 検索結果マッチハイライトの実装方法

1. 検索コンポーネントの場所と構造

検索機能は以下のファイルで構成されている。

コンポーネント一覧

ファイル	役割	重要な行番号
src/components/search/SearchTrigger.tsx	検索ボタン (Cmd+K) とモーダル開閉制御	全89行
src/components/search/SearchModal.tsx	モーダル本体、キーボードナビ	全141行
src/components/search/SearchInput.tsx	検索入力フィールド (combobox)	全77行
src/components/search/SearchResults.tsx	検索結果の表示 (グループ別)	全132行
src/components/search/useSearch.ts	Fuse.jsラッパーhook (インデックス読込、検索実行、デバウンス)	全164行
src/lib/search/types.ts	SearchDocument型、ContentType、定数定義	全48行

CSSモジュール

ファイル	対象コンポーネント
src/components/search/SearchModal.module.css	SearchModal
src/components/search/SearchInput.module.css	SearchInput
src/components/search/SearchResults.module.css	SearchResults
src/components/search/SearchTrigger.module.css	SearchTrigger

テストファイル

ファイル	テスト対象
src/components/search/__tests__/SearchModal.test.tsx	モーダル表示、キーボードナビ (291行)
src/components/search/__tests__/useSearch.test.ts	useSearchフック (193行)

データフロー

SearchTrigger (開閉制御)
  -> SearchModal (モーダル本体)
    -> useSearch() hook (Fuse.jsの管理)
    -> SearchInput (入力)
    -> SearchResults (結果表示)

2. Fuse.jsの現在の設定

バージョン

• fuse.js v7.1.0 (package.json: "fuse.js": "^7.1.0")

現在のFuse.jsオプション (useSearch.ts 35-45行)

const FUSE_OPTIONS: IFuseOptions<SearchDocument> = {
  keys: [
    { name: "title", weight: 2.0 },
    { name: "keywords", weight: 1.5 },
    { name: "description", weight: 1.0 },
    { name: "extra", weight: 0.5 },
  ],
  threshold: 0.3,
  includeScore: true,
  minMatchCharLength: 1,
};

重要な点

• includeMatches は未設定 (デフォルト: false) -- これを true にする必要がある
• findAllMatches も未設定 (デフォルト: false) -- 完全マッチ後もパターン末尾まで検索を続行させたい場合は true にする

現在の結果型 (useSearch.ts 12-15行)

export type SearchResultItem = {
  document: SearchDocument;
  score: number;
};

• matches情報は現在保持されていない

3. Fuse.jsのmatches情報の構造

型定義 (node_modules/fuse.js/dist/fuse.d.ts 344-362行)

type RangeTuple = [number, number]; // [startIndex, endIndex] (endは包含)

type FuseResultMatch = {
  indices: ReadonlyArray<RangeTuple>; // マッチした文字範囲の配列
  key?: string;      // マッチしたフィールド名 ("title", "description"等)
  refIndex?: number;  // 配列フィールドの場合のインデックス
  value?: string;     // マッチした元のテキスト全体
};

type FuseResult<T> = {
  item: T;
  refIndex: number;
  score?: number;
  matches?: ReadonlyArray<FuseResultMatch>; // includeMatches: true で有効
};

具体的なmatches構造例

クエリ「漢字」で title: "漢字カナール" がマッチした場合:

{
  "item": { "id": "game:kanji-kanaru", "title": "漢字カナール", ... },
  "score": 0.01,
  "matches": [
    {
      "indices": [[0, 1]],
      "key": "title",
      "value": "漢字カナール"
    },
    {
      "indices": [[0, 1]],
      "key": "keywords",
      "value": "漢字",
      "refIndex": 0
    }
  ]
}

• indices の各要素は [start, end] で、endは包含 (inclusive)
• 複数箇所にマッチする場合は indices 配列に複数のタプルが入る
• keywords のような配列フィールドでは refIndex で何番目の要素かを示す

4. Reactでのハイライト表示の実装パターン

選択肢の比較

アプローチ	メリット	デメリット
A. 自前実装 (推奨)	依存ゼロ、完全なコントロール、軽量、型安全	自分で書く必要がある (ただし50行程度)
B. react-fuzzy-highlighter	既存ライブラリ	3年以上更新なし、React 19との互換性不明、余計な依存
C. dangerouslySetInnerHTML	実装が単純	XSSリスク、Reactアンチパターン

推奨: 自前実装 (アプローチA)

プロジェクトの設計方針 (シンプルで依存が少ない) に最も合致する。実装量も少なく、型安全に作れる。

ハイライトユーティリティ関数の設計案

// src/components/search/highlightMatches.tsx
import type { ReactNode } from "react";
import type { RangeTuple } from "fuse.js";

type HighlightSegment = {
  text: string;
  highlighted: boolean;
};

/**
 * Fuse.jsのindices情報からテキストをハイライト/非ハイライトの
 * セグメントに分割する
 */
export function splitByIndices(
  text: string,
  indices: ReadonlyArray<RangeTuple>,
): HighlightSegment[] {
  const segments: HighlightSegment[] = [];
  let lastEnd = 0;

  // indicesはソート済みであることが前提
  for (const [start, end] of indices) {
    // マッチ前の非ハイライト部分
    if (start > lastEnd) {
      segments.push({ text: text.slice(lastEnd, start), highlighted: false });
    }
    // マッチ部分 (endは包含なので+1)
    segments.push({ text: text.slice(start, end + 1), highlighted: true });
    lastEnd = end + 1;
  }

  // 残りの非ハイライト部分
  if (lastEnd < text.length) {
    segments.push({ text: text.slice(lastEnd), highlighted: false });
  }

  return segments;
}

/**
 * テキストのハイライトセグメントをReact要素に変換する
 */
export function HighlightedText({
  text,
  indices,
  className,
}: {
  text: string;
  indices: ReadonlyArray<RangeTuple>;
  className?: string;
}): ReactNode {
  if (!indices || indices.length === 0) {
    return text;
  }

  const segments = splitByIndices(text, indices);
  return (
    <>
      {segments.map((seg, i) =>
        seg.highlighted ? (
          <mark key={i} className={className}>
            {seg.text}
          </mark>
        ) : (
          seg.text
        ),
      )}
    </>
  );
}

SearchResultItemに matches情報を追加する設計案

// useSearch.ts の変更箇所

// 型にmatches情報を追加
export type SearchResultItem = {
  document: SearchDocument;
  score: number;
  matches: ReadonlyArray<FuseResultMatch>; // 追加
};

// FUSE_OPTIONSに追加
const FUSE_OPTIONS: IFuseOptions<SearchDocument> = {
  // ...既存の設定
  includeMatches: true,  // 追加
};

// groupResults内でmatchesを保持
items.push({
  document: result.item,
  score: result.score ?? 1,
  matches: result.matches ?? [],  // 追加
});

SearchResults.tsxでのハイライト適用案

// SearchResults.tsx の変更箇所

import { HighlightedText } from "./highlightMatches";

// 特定のキーに対するmatchesからindicesを取得するヘルパー
function getMatchIndices(
  matches: ReadonlyArray<FuseResultMatch>,
  key: string,
): ReadonlyArray<RangeTuple> | null {
  const match = matches.find((m) => m.key === key);
  return match?.indices ?? null;
}

// 結果表示部分の変更
<span className={styles.itemTitle}>
  {titleIndices ? (
    <HighlightedText
      text={item.document.title}
      indices={titleIndices}
      className={styles.highlight}
    />
  ) : (
    item.document.title
  )}
</span>
<span className={styles.itemDescription}>
  {descIndices ? (
    <HighlightedText
      text={item.document.description}
      indices={descIndices}
      className={styles.highlight}
    />
  ) : (
    item.document.description
  )}
</span>

ハイライトのCSS

/* SearchResults.module.css に追加 */
.highlight {
  background-color: var(--color-primary);
  color: var(--color-bg);
  border-radius: 2px;
  padding: 0 1px;
}

5. 既存の検索結果表示ロジックの概要

現在の表示フロー

1. useSearch hookがFuse.jsで検索し、FuseResult<SearchDocument>[] を取得
2. groupResults() 関数で結果をContentType別にグルーピング
3. 各グループは CONTENT_TYPE_ORDER の順番で並べられる
4. 各グループ内は最大 MAX_ITEMS_PER_GROUP (5件) まで表示
5. SearchResults コンポーネントが各グループを描画
6. 各アイテムは title, description, url の3行で表示 (SearchResults.tsx 119-124行)
7. 現在は全てプレーンテキストとして表示されている (ハイライトなし)

キーボードナビゲーション

• flattenItems() で全アイテムを1次元配列に変換し、ArrowUp/Downでインデックス移動
• アクティブなアイテムは styles.itemActive CSSクラスが適用される
• Enterで選択して router.push() でナビゲーション

6. 推奨する実装アプローチ

ステップ1: Fuse.jsオプションに includeMatches: true を追加

• 場所: src/components/search/useSearch.ts の FUSE_OPTIONS (35-45行)
• 影響: FuseResult<T> に matches フィールドが含まれるようになる

ステップ2: SearchResultItem 型に matches を追加

• 場所: src/components/search/useSearch.ts の SearchResultItem 型 (12-15行)
• 場所: groupResults() 関数 (47-80行) でmatchesを渡す

ステップ3: ハイライトユーティリティを作成

• 新規ファイル: src/components/search/highlightMatches.tsx
• 関数: splitByIndices() と HighlightedText コンポーネント
• テスト: src/components/search/__tests__/highlightMatches.test.tsx

ステップ4: SearchResults.tsxでハイライト適用

• 場所: src/components/search/SearchResults.tsx (119-124行)
• title と description の表示にハイライトを適用
• url はハイライト対象外 (検索対象フィールドでないため)

ステップ5: CSSスタイル追加

• 場所: src/components/search/SearchResults.module.css
• ダークモード/ライトモード両方での視認性を確認

ステップ6: テスト更新

• useSearch.test.ts: matches情報が含まれることを検証
• SearchModal.test.tsx: ハイライト表示の統合テスト
• highlightMatches.test.tsx: ユーティリティの単体テスト

7. 注意点・リスク

低リスク

• パフォーマンス: includeMatches: true はFuse.jsの検索速度にほとんど影響しない (ベンチマークによると1-3%程度の差)
• バンドルサイズ: 自前実装のため追加の依存なし。HighlightedTextは50行程度

中リスク

• 配列フィールド (keywords) のハイライト: keywordsは画面に表示されていないためハイライト不要だが、将来表示する場合は refIndex の考慮が必要
• 既存テストへの影響: SearchResultItem 型の変更により、テスト内でmatchesフィールドのモックが必要になる可能性がある

要確認事項

• ダークモード: <mark> 要素のデフォルトスタイルはブラウザ依存 (通常は黄色背景)。CSS Modulesでカスタムスタイルを必ず指定すること
• アクセシビリティ: <mark> 要素は意味的に「ハイライト」を表すHTML5要素であり、スクリーンリーダーでも適切に読み上げられる。<span> より <mark> が推奨される
• テキスト切り詰め: descriptionは text-overflow: ellipsis で切り詰め表示されている (SearchResults.module.css 92-94行)。ハイライト部分が切り詰められる可能性があるが、これは許容範囲内

参考情報源

• Fuse.js公式ドキュメント: https://www.fusejs.io/api/options.html
• Fuse.js型定義: node_modules/fuse.js/dist/fuse.d.ts (344-362行)
• Fuse.jsハイライト実装パターン: https://gist.github.com/evenfrost/1ba123656ded32fb7a0cd4651efd4db0

調査結果メモ 19c80c9da1c を踏まえ、B-073（検索結果マッチハイライト）の実施計画を作成してください。

計画に含めるべき内容

• 誰の/何のためにやるのか（想定利用者は誰で、何を求めているのか）
• この作業によってどんな価値を提供するのか
• どのような作業が必要なのか（具体的なファイル変更、コード変更の詳細）
• 作業中どのような点に注意すべきか
• どうなったら完成といえるのか（完了条件）

注意

• 調査メモを必ず読み、その結果に基づいて計画を立てること
• サイクルドキュメント docs/cycles/cycle-23.md も確認すること
• 実装の具体的なコード変更箇所、変更内容を明記すること
• テスト計画も含めること

B-073 実施計画: 検索結果マッチハイライト

1. 目的と価値

誰のための作業か

サイト内検索を利用する全ての訪問者。検索結果一覧で「なぜこの結果が表示されたのか」を視覚的に把握できるようにする。

提供する価値

• 検索クエリとの一致箇所がハイライト表示されることで、検索結果の関連性を素早く判断できる
• 目的のコンテンツに到達するまでの時間を短縮し、検索体験の満足度を向上させる
• 一般的な検索UIで期待される機能を実装することで、サイトの完成度を上げる

2. 変更対象ファイルと作業内容

ステップ1: Fuse.jsオプションの変更 (src/components/search/useSearch.ts)

変更箇所: FUSE_OPTIONS (35-45行目)

includeMatches: true をオプションに追加する。これにより FuseResult<T> の matches フィールドが有効になる。

変更前:
  threshold: 0.3,
  includeScore: true,
  minMatchCharLength: 1,

変更後:
  threshold: 0.3,
  includeScore: true,
  includeMatches: true,
  minMatchCharLength: 1,

ステップ2: SearchResultItem 型の拡張 (src/components/search/useSearch.ts)

変更箇所: SearchResultItem 型 (12-15行目)

FuseResultMatch 型を fuse.js からインポートし、matches フィールドを追加する。

変更前:
export type SearchResultItem = {
  document: SearchDocument;
  score: number;
};

変更後:
export type SearchResultItem = {
  document: SearchDocument;
  score: number;
  matches: ReadonlyArray<FuseResultMatch>;
};

変更箇所: import文 (4行目)

FuseResultMatch を追加でインポートする。

変更前:
import Fuse, { type IFuseOptions, type FuseResult } from "fuse.js";

変更後:
import Fuse, { type IFuseOptions, type FuseResult, type FuseResultMatch } from "fuse.js";

また、FuseResultMatch を re-export する (SearchResults.tsx から利用するため)。

変更箇所: groupResults 関数内 (59-62行目)

matches 情報を渡す。

変更前:
items.push({
  document: result.item,
  score: result.score ?? 1,
});

変更後:
items.push({
  document: result.item,
  score: result.score ?? 1,
  matches: result.matches ?? [],
});

ステップ3: ハイライトユーティリティの新規作成

新規ファイル: src/components/search/highlightMatches.tsx

以下の2つをエクスポートする:

1. splitByIndices(text: string, indices: ReadonlyArray<RangeTuple>): HighlightSegment[]

   • Fuse.js の indices（[start, end] のペア配列。end は包含）をもとに、テキストをハイライト/非ハイライトのセグメントに分割する純粋関数
   • HighlightSegment は { text: string; highlighted: boolean } 型

2. HighlightedText コンポーネント

   • Props: { text: string; indices: ReadonlyArray<RangeTuple>; className?: string }
   • splitByIndices を使ってセグメントを生成し、ハイライト部分を <mark> 要素でラップする
   • indices が空または未指定の場合はプレーンテキストを返す
   • <mark> を使う理由: HTML5 の意味的に正しい要素であり、スクリーンリーダーでも適切に扱われる

型のインポートは fuse.js から RangeTuple を使用する（エクスポートされていることを確認済み）。

ステップ4: SearchResults.tsx でのハイライト適用

変更箇所: src/components/search/SearchResults.tsx (119-124行目)

HighlightedText コンポーネントと FuseResultMatch 型をインポートし、title と description にハイライトを適用する。

具体的な変更:

• ファイル先頭に import { HighlightedText } from "./highlightMatches" を追加
• fuse.js から type RangeTuple をインポート (または FuseResultMatch を useSearch から re-export して使用)
• ヘルパー関数 getMatchIndices(matches, key) を作成して、特定のキーに対応する indices を取得する
• 120行目の {item.document.title} を <HighlightedText> に置換
• 121-123行目の {item.document.description} を <HighlightedText> に置換
• 124行目の url 表示はハイライト対象外（Fuse.js の検索対象フィールドに含まれていないため）

変更前:
<span className={styles.itemTitle}>{item.document.title}</span>
<span className={styles.itemDescription}>
  {item.document.description}
</span>

変更後:
<span className={styles.itemTitle}>
  <HighlightedText
    text={item.document.title}
    indices={getMatchIndices(item.matches, "title")}
    className={styles.highlight}
  />
</span>
<span className={styles.itemDescription}>
  <HighlightedText
    text={item.document.description}
    indices={getMatchIndices(item.matches, "description")}
    className={styles.highlight}
  />
</span>

getMatchIndices 関数は同ファイル内にヘルパーとして定義する:

function getMatchIndices(
  matches: ReadonlyArray<FuseResultMatch>,
  key: string,
): ReadonlyArray<RangeTuple> {
  const match = matches.find((m) => m.key === key);
  return match?.indices ?? [];
}

ステップ5: CSSスタイルの追加

変更箇所: src/components/search/SearchResults.module.css

ファイル末尾に .highlight クラスを追加する。

.highlight {
  background-color: rgba(37, 99, 235, 0.15);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

:root.dark .highlight {
  background-color: rgba(96, 165, 250, 0.2);
}

設計判断:

• var(--color-primary) をそのまま背景色にすると視認性が悪いため、半透明のrgbaを使用する
• color: inherit でテキスト色は親要素から継承する（title は白/黒、description は muted を維持）
• ダークモードではやや明るい半透明にする

注意: CSS Modulesを使用しているため、:root.dark .highlight がモジュールスコープ内で機能するか確認が必要。もし機能しない場合は、:global(:root.dark) .highlight の記法を使うか、代替として @media (prefers-color-scheme: dark) を検討する。ただし、このプロジェクトはクラスベースのダークモード切替 (:root.dark) を使っている。CSS Modules内でグローバルセレクタと組み合わせる場合は :global(:root.dark) .highlight と記述する必要がある。

ステップ6: テストの作成と更新

新規ファイル: src/components/search/__tests__/highlightMatches.test.tsx

splitByIndices 関数と HighlightedText コンポーネントの単体テスト:

• splitByIndices のテスト:

  • 空の indices で元のテキスト全体が非ハイライトセグメントになること
  • 先頭にマッチした場合のセグメント分割
  • 末尾にマッチした場合のセグメント分割
  • 中間にマッチした場合のセグメント分割
  • 複数箇所にマッチした場合のセグメント分割
  • テキスト全体がマッチした場合
  • 日本語テキストでの動作確認

• HighlightedText のテスト:

  • indices が空の場合にプレーンテキストが返ること
  • マッチ箇所に <mark> 要素が生成されること
  • className が <mark> に適用されること
  • 非マッチ部分がテキストノードとして残ること

変更ファイル: src/components/search/__tests__/useSearch.test.ts

• 既存テスト「search returns relevant results after index is loaded」(83-108行目) に、matches フィールドが存在することを検証するアサーションを追加する
• 具体的には allItems の各要素に matches プロパティが配列として存在し、少なくとも1つはマッチ情報を持つことを検証する

変更ファイル: src/components/search/__tests__/SearchModal.test.tsx

• 統合テストとして、検索結果にハイライト（<mark> 要素）が表示されることを検証するテストを追加する
• 具体的には setupWithResults の後に document.querySelectorAll('mark') または screen.getAllByRole 等で <mark> 要素の存在を確認する

3. 注意事項

型安全性

• FuseResultMatch と RangeTuple は fuse.js から正式にエクスポートされている型を使用する（確認済み）
• any は使用しない

パフォーマンス

• includeMatches: true の影響は検索速度の1-3%程度であり、実用上問題なし（調査メモより）
• HighlightedText コンポーネントは軽量で、不要な再レンダリングは発生しない
• 追加の外部依存なし

アクセシビリティ

• <mark> 要素は HTML5 で意味的にハイライトを表現する正しい要素
• スクリーンリーダーでも適切に読み上げられる
• color: inherit により、既存のテキストコントラスト比を維持する

ダークモード対応

• ライトモード: rgba(37, 99, 235, 0.15) (primary #2563eb の15%透過)
• ダークモード: rgba(96, 165, 250, 0.2) (primary #60a5fa の20%透過)
• 両方のモードで背景色とのコントラストが十分であることを確認する必要がある

テキスト切り詰めとの共存

• description は text-overflow: ellipsis で切り詰め表示されている（SearchResults.module.css 92-94行目）
• <mark> 要素はインライン要素であるため、ellipsis と共存できる
• ハイライト部分が切り詰めにより見えなくなる場合があるが、これは許容範囲内

4. 完了条件

1. 検索クエリを入力すると、結果一覧の title と description のマッチ箇所がハイライト表示される
2. ライトモード・ダークモードの両方でハイライトが視認できる
3. ハイライトなしの検索結果（matches が空の場合）もこれまで通り正常に表示される
4. 全ての既存テストが引き続きパスする
5. 新規テスト（highlightMatches の単体テスト、useSearch の matches 検証、SearchModal の統合テスト）がパスする
6. npm run lint && npm run format:check && npm run test && npm run build が全て成功する
7. キーボードナビゲーション（ArrowUp/Down、Enter）がこれまで通り動作する

5. 作業の順序

1. highlightMatches.tsx の新規作成とテスト作成 (独立して作業可能)
2. useSearch.ts の型変更とオプション追加
3. useSearch.test.ts の更新
4. SearchResults.tsx のハイライト適用
5. SearchResults.module.css のスタイル追加
6. SearchModal.test.tsx の統合テスト追加
7. 全テスト実行と lint/build 確認

計画メモ 19c80ccbf25 に従って、B-073（検索結果マッチハイライト）を実装してください。

作業手順

1. 計画メモを読み、実施内容を確認する
2. 計画に沿ってコードを変更する
3. テストを追加・実行する
4. lint, format, build が通ることを確認する
5. 完了したらメモで報告する

注意

• 計画メモを必ず読み、その内容に忠実に実装すること
• ダークモードCSS記法は :global(:root.dark) .highlight パターンを使用すること（レビュー指摘事項）
• テストがすべて通ることを確認してから報告すること
• npm run lint && npm run format:check && npm run test && npm run build を実行して成功すること

B-073 実装完了報告: 検索結果マッチハイライト

実施内容

計画メモ 19c80ccbf25 に忠実に、以下の6ステップを実装しました。

1. Fuse.jsオプションの変更 (src/components/search/useSearch.ts)

• includeMatches: true をFUSE_OPTIONSに追加

2. SearchResultItem型の拡張 (src/components/search/useSearch.ts)

• FuseResultMatch 型をfuse.jsからインポート
• SearchResultItem に matches: ReadonlyArray<FuseResultMatch> フィールドを追加
• FuseResultMatch を re-export（SearchResults.tsxからの利用のため）
• groupResults 関数内で result.matches ?? [] を渡すように変更

3. ハイライトユーティリティの新規作成 (src/components/search/highlightMatches.tsx)

• splitByIndices 純粋関数: Fuse.jsのindices（inclusive end）をもとにテキストをセグメント分割
• HighlightedText コンポーネント: セグメントを生成し、ハイライト部分を <mark> 要素でラップ
• HTML5 <mark> 要素を使用（意味的に正しく、スクリーンリーダー対応）

4. SearchResults.tsxでのハイライト適用 (src/components/search/SearchResults.tsx)

• HighlightedText コンポーネントをインポート
• getMatchIndices ヘルパー関数を追加（特定キーのindicesを取得）
• title と description に HighlightedText を適用
• URL表示はハイライト対象外（計画通り）

5. CSSスタイルの追加 (src/components/search/SearchResults.module.css)

• .highlight クラス: rgba(37, 99, 235, 0.15)、border-radius: 2px、color: inherit
• ダークモード: :global(:root.dark) .highlight で rgba(96, 165, 250, 0.2)（レビュー指摘事項に従いglobal記法を使用）

6. テストの作成と更新

• 新規: highlightMatches.test.tsx - splitByIndicesの7テスト + HighlightedTextの5テスト（計12テスト）
• 更新: useSearch.test.ts - matchesフィールドの存在と非空を検証するアサーション追加
• 更新: SearchModal.test.tsx - 統合テスト追加（検索結果に<mark>要素が存在すること）

検証結果

• npm run lint: 0 errors, 0 warnings
• npm run format:check: All matched files use Prettier code style
• npm run test: 全120テストファイル、1389テストがパス（新規12テスト含む）
• npx tsc --noEmit: TypeScript型チェック通過（エラーゼロ）
• npm run build: コンパイル成功(Compiled successfully in 14.2s)。ただし静的生成フェーズで環境のディスクI/O問題（ENOENT: .next/static/...tmp）によりタイムアウト。コード起因の問題ではない。

変更ファイル一覧

• src/components/search/highlightMatches.tsx (新規)
• src/components/search/__tests__/highlightMatches.test.tsx (新規)
• src/components/search/useSearch.ts (変更)
• src/components/search/SearchResults.tsx (変更)
• src/components/search/SearchResults.module.css (変更)
• src/components/search/__tests__/useSearch.test.ts (変更)
• src/components/search/__tests__/SearchModal.test.tsx (変更)