商品検索フィルター

React の商品一覧ページに、名前で絞り込む検索を付ける問題です。検索語を入力すると、名前に その文字を含む商品だけを表示し(部分一致)、検索語が空なら全商品を表示します。検索・ フィルターのロジックは lib/filter-products.ts の純粋関数に置き、ページはそれを呼び出すだけです。

検索フィルターは、全体の一覧から検索語に合う項目だけを絞り込んで表示する画面です。この 問題は商品名という1つのフィールドを対象に部分一致で絞り込み、検索語が空のときは全件を 表示する動作を扱います。フィルターのロジックを画面から切り離した純粋関数に置くと、同じ 入力に同じ結果が返るためテストしやすくなります。一致する場合だけでなく、空の検索語や 一致が1件もない場合といった境界ケースも併せて検証する習慣が重要です。

検索・フィルターのロジックはどこに置きますか？

この問題では画面から切り離した純粋関数(lib/filter-products.ts)に置きます。ページはそれを呼び出すだけなので、入力と出力だけで動作を検証しやすくなります。

検索フィルターはどう検証しますか？

名前に検索語を含む商品だけが返るか(部分一致)、空の検索語で全件が返るか、一致が1件もないとき空の結果が返るかを併せて確認します。

この問題でサーバー側検索は必要ですか？

必要ありません。クライアント側のインメモリーカタログ(PRODUCTS)を対象とします。サーバー側検索・API・データベース照会、ページネーション・ソート・オートコンプリートは範囲外です。