SCALE
SCALE Build Hub
機能集
ロジック React Hook

localStorage 永続化レイヤー

出典: SCALE Finance
実装時間
30〜60分
難度
簡単
価格
¥5,000

依存パッケージ

react

ファイル

lib/finance-store.ts

useFinanceData / useFinanceArray(localStorage 永続化フック)

:LiTarget: 用途

React の useState 風 API で、自動で localStorage に保存・復元するフック。

:LiCode: コード骨格

const STORE_PREFIX = 'scale-finance-v1-';

export function useFinanceData<T>(key: string, defaultValue: T): [T, (v: T | ((p: T) => T)) => void, () => void] {
  const [data, setData] = useState<T>(defaultValue);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const raw = localStorage.getItem(STORE_PREFIX + key);
    if (raw) try { setData(JSON.parse(raw)); } catch {}
  }, [key]);

  const update = useCallback((v: T | ((p: T) => T)) => {
    setData(prev => {
      const next = typeof v === 'function' ? (v as any)(prev) : v;
      localStorage.setItem(STORE_PREFIX + key, JSON.stringify(next));
      return next;
    });
  }, [key]);

  const reset = useCallback(() => {
    localStorage.removeItem(STORE_PREFIX + key);
    setData(defaultValue);
  }, [key, defaultValue]);

  return [data, update, reset];
}

// 配列向け
export function useFinanceArray<T>(key: string, defaultRows: T[]) {
  const [rows, setRows, reset] = useFinanceData<T[]>(key, defaultRows);
  return {
    rows, setRows, reset,
    updateRow: (i, patch) => setRows(prev => prev.map((r, j) => j === i ? { ...r, ...patch } : r)),
    addRow: (row) => setRows(prev => [...prev, row]),
    removeRow: (i) => setRows(prev => prev.filter((_, j) => j !== i)),
  };
}

:LiAlertCircle: 注意