メモ化とは何で、どのように実装しますか？

Question

Accepted Answer

**メモ化（Memoization）**は、関数の結果を引数をキーとしてキャッシュし、同じ入力での繰り返し呼び出しでは再計算せずに即座にキャッシュ済みの結果を返します。これは**メモリと速度のトレードオフ**であり、**純粋（pure）な**関数（同じ入力 → 同じ出力、副作用なし）でのみ機能します。

## 汎用的な memoize ラッパー

```js
function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args); // build a cache key from the arguments
    if (cache.has(key)) {
      return cache.get(key);          // cache hit — skip the work
    }
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

const slowSquare = n => { /* expensive */ return n * n; };
const fastSquare = memoize(slowSquare);
fastSquare(4); // computes → 16
fastSquare(4); // cached → 16 instantly
```

## 典型的な成功例: 再帰的なフィボナッチ

```js
const fib = memoize(n => (n < 2 ? n : fib(n - 1) + fib(n - 2)));
// turns exponential O(2^n) into roughly O(n) by caching subproblems
```

## トレードオフと注意点

- **キャッシュキーの戦略**: `JSON.stringify` は関数では失敗し、オブジェクトではキーの順序が影響します。オブジェクト引数の場合、`WeakMap`（参照をキーとする）を使えばメモリリークを避けられます。
- **無制限な増大**: キャッシュは縮小しません。長時間稼働するプロセスでは **LRU** キャッシュを使いましょう。
- 再計算が本当に高コストで、かつ入力が繰り返される場合にのみメモ化しましょう。

## なぜ重要なのか

メモ化はいたるところにあります。React の `useMemo`/`React.memo`、Reselect のセレクタ、動的計画法などです。

概念（純粋な結果を入力でキャッシュする）は同じであり、技術はキーの選択とキャッシュの上限設定にあります。