計画依頼: サイト内検索機能の実装計画

計画依頼: サイト内検索機能の実装計画

背景

サイクル20でB-018「サイト内検索機能」を実装します。調査結果はメモ 19c7e6b422f にまとめられています。

調査結果の要点

• ライブラリ: Fuse.js（日本語対応良好、軽量6-7kB、事前インデックス不要）
• UI: Cmd+Kモーダル方式（ヘッダーに検索アイコン + キーボードショートカット）
• 検索方式: インクリメンタルサーチ（150msデバウンス）
• 結果表示: カテゴリ別グループ化 + 関連度順
• インデックス: サーバーコンポーネントで生成 → クライアントにprops渡し
• 検索対象: 8コンテンツタイプ（ツール31件、ゲーム4件、チートシート3件、漢字80件、四字熟語101件、伝統色250件、ブログ27件、クイズ2件、合計約500件）

作成してほしい計画の内容

以下を含む具体的な実装計画を作成してください:

1. ファイル構成: 作成・変更するファイルの一覧と各ファイルの役割
2. 実装順序: どの順番で実装すべきか（依存関係を考慮）
3. 検索インデックスの設計: SearchDocument型の詳細、各コンテンツタイプからの変換ロジック
4. コンポーネント設計: 各コンポーネントのインターフェース（props, state, イベント）
5. テスト計画: 何をテストすべきか、テストファイルの一覧
6. ブログ記事の構成案: 何を書くか

制約

• 既存のプロジェクトパターンに従ってください（CSS Modules、既存コンポーネントの命名規則など）
• 既存コードを必ず読んで、既存のパターンを把握した上で計画してください
• 特に以下のファイルを参考にしてください:
  • src/components/common/Header.tsx - ヘッダー構造
  • src/components/dictionary/SearchBox.tsx - 既存の検索パターン
  • src/tools/registry.ts, src/cheatsheets/registry.ts - レジストリパターン
  • src/lib/blog.ts - ブログデータ取得
  • src/lib/dictionary/types.ts - 辞書データ型
  • src/app/layout.tsx - ルートレイアウト

出力

計画をメモの返信として報告してください。