パフォーマンスとベストプラクティス

// デバウンス関数の実装
function debounce(fn, delay) {
  let timerId;
  return function(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 使用例: 検索窓の入力
const search = debounce((query) => {
  console.log("検索:", query);
  // API 呼び出し
}, 300);

// search("j"); → タイマーリセット
// search("ja"); → タイマーリセット
// search("jav"); → タイマーリセット
// 300ms後 → "検索: jav" が実行される

// スロットリング関数の実装
function throttle(fn, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

// 使用例: スクロール追跡
const handleScroll = throttle(() => {
  console.log("スクロール位置:", window.scrollY);
}, 200);

// window.addEventListener("scroll", handleScroll);
// → 最大200msに1回だけ実行される

// 基本的なメモ化関数
function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log("キャッシュヒット:", key);
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

// 計算コストの高い関数をメモ化
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const memoFib = memoize(function fib(n) {
  if (n <= 1) return n;
  return memoFib(n - 1) + memoFib(n - 2);
});

console.time("通常");
console.log(fibonacci(35));
console.timeEnd("通常");

console.time("メモ化");
console.log(memoFib(35));
console.timeEnd("メモ化");

// WeakMap: オブジェクトに紐づくプライベートデータ
const privateData = new WeakMap();

class User {
  constructor(name, email) {
    this.name = name;
    // パスワードのような秘密データは WeakMap に保持
    privateData.set(this, { email, loginCount: 0 });
  }

  login() {
    const data = privateData.get(this);
    data.loginCount++;
    return `${this.name}（${data.loginCount}回目のログイン）`;
  }

  getEmail() {
    return privateData.get(this).email;
  }
}

let user = new User("田中", "tanaka@example.com");
console.log(user.login());    // "田中（1回目のログイン）"
console.log(user.getEmail()); // "tanaka@example.com"

// user = null; にすると、privateData のエントリもGC対象になる

// WeakSet: オブジェクトの訪問追跡
const visited = new WeakSet();

function processNode(node) {
  if (visited.has(node)) {
    console.log("既に処理済み:", node.id);
    return;
  }
  visited.add(node);
  console.log("処理中:", node.id);
}

let nodeA = { id: "A" };
let nodeB = { id: "B" };

processNode(nodeA); // "処理中: A"
processNode(nodeB); // "処理中: B"
processNode(nodeA); // "既に処理済み: A"

// nodeA = null; にすると visited からも自動削除（GC対象）

// WeakRef: 弱参照で大きなオブジェクトをキャッシュ
function createCache() {
  const cache = new Map();
  return {
    set(key, value) {
      cache.set(key, new WeakRef(value));
    },
    get(key) {
      const ref = cache.get(key);
      if (ref) {
        const value = ref.deref(); // GC済みなら undefined
        if (value) return value;
        cache.delete(key); // GC済みならエントリを削除
      }
      return undefined;
    }
  };
}

// NG: ネストが深い
function processOrder(order) {
  if (order) {
    if (order.items.length > 0) {
      if (order.status === "pending") {
        // 処理...
        return { success: true };
      }
    }
  }
  return { success: false };
}

// OK: 早期リターンでフラットに
function processOrderBetter(order) {
  if (!order) return { success: false };
  if (order.items.length === 0) return { success: false };
  if (order.status !== "pending") return { success: false };

  // メインロジック（ネストなし）
  return { success: true };
}

// 可読性の高いコードのパターン

// 1. 分割代入で意図を明確にする
const { name, age, address: { city } } = user;

// 2. オプショナルチェーニングとNullish Coalescing
const userName = user?.profile?.name ?? "ゲスト";

// 3. テンプレートリテラルで可読性を高める
const message = `${userName}さん（${age}歳）が${city}からログインしました`;

// 4. オブジェクトリテラルで条件分岐を置き換える
const statusMessages = {
  pending: "処理中です",
  approved: "承認されました",
  rejected: "却下されました"
};
const msg = statusMessages[order.status] ?? "不明なステータス";

// 5. Array.from + keys で連番配列を作成
const numbers = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(numbers); // [1, 2, 3, 4, 5]