Zenn
🦁

[開発日記]　最近見た商品一覧

に公開
TypeScript
localstorage
tech

既存のプロジェクトに新しい機能を追加することを考えていたところ、LocalStorageの活用方法の一つとして「閲覧リスト」を表示させるアイデアを聞きました。そこで、早速実装してみました。

実装概要

  • クリックしたアイテムのIDをLocalStorageに保存
  • 最大5件まで保存（古いものは削除）
  • 同じアイテムの重複を防止
  • 最大10日間保持（期限切れのデータは自動削除）

閲覧リストの管理（hooksの利用）

閲覧リストの状態を管理するために、hooks（useState） を使用しました。

満了日設定 

const EXPIRATION_DAYS = 10; // データの保存期間（10日間）

アイテムの保存処理

クリックされたアイテムをLocalStorageに保存し、①新しいアイテムの追加、②重複チェック、③最大5件まで制限 します。

const [recentItems, setRecentItems] = useState<number[]>([]);

const saveRecentItems = (itemId: number) => {
    const now = new Date().getTime();
    const recentItems = JSON.parse(localStorage.getItem("recentItems") || "[]");

    const updatedItems = [
        { id: itemId, timeStamp: now }, // ①新しいアイテムを追加
        ...recentItems.filter((item: { id: number }) => item.id !== itemId), // ②重複を排除
    ].slice(0, 5); // ③最大5件まで

    localStorage.setItem("recentItems", JSON.stringify(updatedItems));
    setRecentItems(updatedItems.map((item: { id: number }) => item.id));
};

アイテムの取得・満了日チェック

LocalStorageからデータを取得し、10日以上経過したアイテムを削除 します。

const getRecentItems = () => {
    const now = new Date().getTime();
    const expirationTime = EXPIRATION_DAYS * 24 * 60 * 60 * 1000; 
    let recentItems = JSON.parse(localStorage.getItem("recentItems") || "[]");

    // 10日を過ぎたアイテムを削除
    recentItems = recentItems.filter((item: { timeStamp: number; }) => now - item.timeStamp < expirationTime);

    localStorage.setItem("recentItems", JSON.stringify(recentItems));

    return recentItems.map((item: { id: number }) => item.id);
};

hooks実行時

このuseEffectは、コンポーネントが初めて表示されたときに、LocalStorageに保存された最近のアイテムを取得し、その情報をrecentItemsという状態に保存する役割を果たしています。これにより、ユーザーが最初にページを開いたときに、以前に閲覧したアイテムを表示できるようになります。

   useEffect(() => {
        setRecentItems(getRecentItems());
    }, []);

hooksのリターン

カスタムhooksとして使いやすい形で返します。

  • recentItems :　現在保存されているアイテム番号リスト取得
  • saveRecentItems : 重複を防ぎ、最大5件まで保存
  • getRecentItems : 10日経過したアイテムを除いたアイテム番号リストを取得
return { recentItems, saveRecentItems, getRecentItems };

まとめ

saveRecentItems

説明: 「新しいアイテムを追加し、重複するアイテムを削除」

コード: saveRecentItems 関数は、アイテムを追加し、重複したアイテムを削除し、最大5つのアイテムだけを保存するように設定されています。

getRecentItems

説明: 「期限切れのアイテムを削除し、10日以上経過したアイテムを削除」

コード: getRecentItems 関数は、LocalStorageからアイテムを取得し、期限が切れた（10日以上経過した）アイテムをフィルタリングして、保存されたリストを更新します。

useEffect

説明: 「コンポーネントが最初にレンダリングされたときに、getRecentItems を呼び出して保存されたアイテムを取得し、recentItems 状態を設定」

コード: useEffect は、コンポーネントが最初にレンダリングされるときに getRecentItems() を呼び出してアイテムを取得し、recentItems 状態を設定します。

return

説明: 「カスタムフックを返し、外部で recentItems, saveRecentItems, getRecentItems を簡単に使用できるように提供」

コード: useRecentItems 関数は、recentItems, saveRecentItems, getRecentItems を返して、他のコンポーネントで簡単に使用できるようにします。

感想

閲覧リストを表示されるまではよかったが、ここからさらにカートに入れる機能や、カートにある本は表示させないなど細かい機能があればもっと完成度を上げるのではないかと思いました。

よかったらこちらもご覧ください
https://newbookstore-omega.vercel.app/

Discussion