概要

「同じ入力なら同じ結果を返す」処理において、再計算を省略できる手法——それがメモ化（memoization）である。
とくに計算コストが高い処理、データの変換、純粋関数などでは、
この戦略がパフォーマンスと安定性の両立に大きく寄与する。

JavaScriptは動的で柔軟な反面、無駄な再評価が発生しやすい。
本稿では、メモ化の原則、関数・React・副作用における実装例、キャッシュ設計の判断基準を示し、
実用的かつ制御可能なメモ化戦略の構築方法を解説する。

1. メモ化とは何か

function memoize(fn) {
  const cache = new Map();
  return function (arg) {
    if (cache.has(arg)) return cache.get(arg);
    const result = fn(arg);
    cache.set(arg, result);
    return result;
  };
}

const slowDouble = (n) => {
  console.log('calculating...');
  return n * 2;
};

const fastDouble = memoize(slowDouble);
fastDouble(5); // 計算される
fastDouble(5); // キャッシュされているため再計算されない

✅ 入力と出力のペアを記憶し、再評価を回避
✅ 関数が純粋である（副作用を持たない）ことが前提

2. Reactにおける `useMemo`

const total = useMemo(() => {
  return calculateExpensiveValue(data);
}, [data]);

✅ data が変わらない限り、再評価されない
✅ useMemo は レンダリングコスト最適化において重要

3. useCallbackによる関数メモ化

const handleClick = useCallback(() => {
  doSomething();
}, [dependency]);

✅ 子コンポーネントへの props 渡しで無駄な再レンダリングを防止
✅ 関数そのものの参照が変わらないことを保証

4. 値の同一性とキャッシュキー設計

const memoizeJSON = (fn) => {
  const cache = new Map();
  return (obj) => {
    const key = JSON.stringify(obj);
    if (cache.has(key)) return cache.get(key);
    const result = fn(obj);
    cache.set(key, result);
    return result;
  };
};

✅ **プリミティブ以外（配列やオブジェクト）**は JSON.stringify 等をキーに使う必要がある
❌ 循環参照や巨大データに注意（コストと整合性）

5. キャッシュ戦略の設計判断

パターン	戦略
同じ値での再計算が多い	memoize（入力値をキーに）
コンポーネント描画が重い	useMemo（計算コスト削減）
関数を子に渡す（再レンダ発生）	useCallback（参照の安定化）
大量データを変換・集計	外部キャッシュ（IndexedMap等）で保持

設計判断フロー

① この関数は同じ入力なら同じ出力か？ → メモ化の候補

② 計算コストが高いか？ → キャッシュによる最適化を検討

③ 再レンダリングで毎回再評価されていないか？ → useMemo / useCallback の適用

④ 入力がオブジェクトか？ → stringify or hash でキーを設計

⑤ キャッシュのスコープは？ → ローカル / アプリケーションスコープで設計

よくあるミスと対策

❌ 毎回新しいオブジェクト/関数を渡し、メモ化が意味をなさない

→ ✅ 依存配列やキャッシュキーの同一性を保証

❌ メモ化しすぎて逆にオーバーヘッド（メモリリーク）

→ ✅ 不要になったキャッシュは明示的に削除 or スコープで限定

❌ 副作用を持つ関数をメモ化し、意図しない挙動に

→ ✅ メモ化の対象は純粋関数に限定すること

結語

メモ化は「高速化の魔法」ではない。
それは**“同じ計算を繰り返さないために、状態と責務を戦略的に保持する設計技法”**である。

計算コストと値の安定性を見極め、メモ化を選定する
useMemo / useCallback に頼りすぎず、構造的にキャッシュ設計する
常に副作用とスコープを意識し、**「何を記憶するか」**を明確に設計する

JavaScriptにおけるメモ化戦略とは、
“コストと正確性のバランスを制御し、システムの応答性を設計として最適化するための知的キャッシュ戦略である。”