素のJavaScript構文でリアクティビティを実現

// 通常のJavaScriptの問題点
let count = 0;
let doubled = count * 2;  // この時点で doubled = 0 と固定される

count = 5;                // count を変更しても...
console.log(doubled);     // doubled は 0 のまま（期待値は 10）

// リアクティビティがあれば、doubled が自動的に 10 になる

// シンプルなリアクティブオブジェクトの実装
function reactive(obj, key, value) {
  let internalValue = value;     // 実際の値を保持する内部変数
  const deps = new Set();         // このプロパティに依存する関数を保存
  
  Object.defineProperty(obj, key, {
    get() {
      // プロパティが読み取られたときに実行される
      if (activeEffect) {
        // 現在実行中のエフェクトを依存関係として記録
        deps.add(activeEffect);
      }
      return internalValue;
    },
    set(newValue) {
      // プロパティに値が代入されたときに実行される
      internalValue = newValue;
      // このプロパティに依存するすべての関数を再実行
      deps.forEach(effect => effect());
    }
  });
}

// グローバルな実行コンテキスト（現在実行中のエフェクトを追跡）
let activeEffect = null;

// リアクティブなデータを作成する関数
function createReactive(target) {
  const deps = new Map();  // 各プロパティごとの依存関係を管理
  
  // すべてのプロパティをリアクティブに変換
  Object.keys(target).forEach(key => {
    let value = target[key];  // プロパティの現在値を保持
    
    // このプロパティに依存するエフェクトのセット
    deps.set(key, new Set());
    
    Object.defineProperty(target, key, {
      get() {
        // プロパティが読み取られたとき
        if (activeEffect) {
          // 現在実行中のエフェクトを依存関係に追加
          deps.get(key).add(activeEffect);
        }
        console.log(`Getting ${key}: ${value}`);
        return value;
      },
      set(newValue) {
        // プロパティに値が設定されたとき
        console.log(`Setting ${key}: ${value} -> ${newValue}`);
        value = newValue;
        
        // このプロパティに依存するすべてのエフェクトを実行
        deps.get(key).forEach(effect => effect());
      }
    });
  });
  
  return target;
}

// エフェクト（副作用）を登録する関数
function watchEffect(effect) {
  // エフェクトを実行中であることを記録
  activeEffect = effect;
  
  // 初回実行 - この時にプロパティへのアクセスが発生し、
  // 依存関係が自動的に収集される
  effect();
  
  // 実行コンテキストをクリア
  activeEffect = null;
}

// 実際の使用例
const state = createReactive({
  count: 0,
  message: 'Hello'
});

// state.count が変更されるたびに自動実行される処理を登録
watchEffect(() => {
  // この関数内で state.count にアクセスすると、
  // 自動的に依存関係として登録される
  console.log(`Count is: ${state.count}`);
  
  // DOM更新も自動化できる
  const element = document.getElementById('output');
  if (element) {
    element.textContent = `Count: ${state.count}`;
  }
});

// 値を変更すると、依存するエフェクトが自動実行される
state.count = 1;  // "Getting count: 0" → "Setting count: 0 -> 1" → "Count is: 1"
state.count = 2;  // "Getting count: 1" → "Setting count: 1 -> 2" → "Count is: 2"

// message は使われていないので、変更してもエフェクトは実行されない
state.message = 'World';  // エフェクトは実行されない

// 計算プロパティ（computed）の実装
function computed(getter) {
  let value;              // 計算結果のキャッシュ
  let dirty = true;       // true の場合、再計算が必要
  
  // 依存が変更されたときに呼ばれる関数
  const runner = () => {
    dirty = true;  // キャッシュを無効化（次回アクセス時に再計算）
  };
  
  return {
    get value() {
      if (dirty) {
        // 再計算が必要な場合
        activeEffect = runner;  // runnerを依存関係として登録
        value = getter();       // getter内でアクセスしたプロパティに依存
        activeEffect = null;
        dirty = false;          // キャッシュを有効化
      }
      return value;  // キャッシュされた値を返す
    }
  };
}

// 計算プロパティの使用例
const state = createReactive({
  price: 100,
  quantity: 2
});

// price と quantity に依存する計算プロパティ
const total = computed(() => state.price * state.quantity);

console.log(total.value);  // 200（初回計算）
console.log(total.value);  // 200（キャッシュから返される、再計算されない）

state.price = 150;         // price を変更
console.log(total.value);  // 300（自動的に再計算される）

state.quantity = 3;        // quantity を変更
console.log(total.value);  // 450（自動的に再計算される）

const state = createReactive({
  items: [1, 2, 3]
});

watchEffect(() => {
  console.log('Items:', state.items);
});

// ❌ これらの変更は検知できない
state.items[0] = 999;     // インデックスによる代入 → エフェクトが実行されない
state.items.length = 0;   // length プロパティの変更 → エフェクトが実行されない

// Vue 2 での回避策
// 方法1: 新しい配列を作成して代入
state.items = [...state.items];  // ✅ 新しい配列なので検知される

// 方法2: Vue専用のAPIを使用
Vue.set(state.items, 0, 999);    // ✅ Vue.set は内部で通知を発火

// 方法3: 配列メソッドを使用（pushやspliceは動作する）
state.items.push(4);              // ✅ pushメソッドは検知される

const state = createReactive({
  name: 'John'
});

watchEffect(() => {
  console.log('State:', JSON.stringify(state));
});

// ❌ 新しいプロパティの追加は検知できない
state.age = 30;  // age はリアクティブにならない
                 // エフェクトは実行されない

// ❌ プロパティの削除も検知できない
delete state.name;  // delete 操作は検知されない
                    // エフェクトは実行されない

// Vue 2 での回避策
// Vue.set を使って新しいプロパティを追加
Vue.set(state, 'age', 30);  // ✅ リアクティブなプロパティとして追加

// または、事前にプロパティを定義しておく
const state = createReactive({
  name: 'John',
  age: undefined  // 初期値として undefined を設定
});

const state = createReactive({
  user: {
    name: 'John',
    address: {
      city: 'Tokyo'
    }
  }
});

watchEffect(() => {
  // userオブジェクト自体の変更は検知される
  console.log('User:', state.user);
});

// ❌ ネストしたプロパティの変更は検知されない
state.user.address.city = 'Osaka';  // address.city はリアクティブではない
                                     // エフェクトは実行されない

// ✅ user オブジェクト全体を置き換えれば検知される
state.user = {
  ...state.user,
  address: { ...state.user.address, city: 'Osaka' }
};  // エフェクトが実行される

// Vue 2 では、深い監視（deep watch）を使用する必要があった
// または、ネストしたオブジェクトも再帰的にリアクティブ化する必要があった

// Proxyを使った包括的なリアクティビティシステム
function createReactiveProxy(target) {
  const deps = new Map();  // 依存関係を管理
  
  return new Proxy(target, {
    // プロパティの読み取りをインターセプト
    get(target, key, receiver) {
      // どんなプロパティアクセスも検知できる（配列のインデックスも含む）
      track(deps, key);
      
      // 実際の値を取得
      const value = Reflect.get(target, key, receiver);
      
      // ネストしたオブジェクトも自動的にリアクティブ化
      if (typeof value === 'object' && value !== null) {
        return createReactiveProxy(value);  // 再帰的にProxyでラップ
      }
      
      return value;
    },
    
    // プロパティへの代入をインターセプト
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      
      // 値が実際に変更された場合のみ依存を更新（無駄な更新を防ぐ）
      if (oldValue !== value) {
        trigger(deps, key);  // 依存するエフェクトを実行
      }
      
      return result;
    },
    
    // プロパティの削除をインターセプト
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      trigger(deps, key);  // delete 操作も検知できる
      return result;
    },
    
    // 'in' 演算子をインターセプト
    has(target, key) {
      track(deps, key);  // 'key in obj' の形式も追跡
      return Reflect.has(target, key);
    },
    
    // その他、ownKeys、getOwnPropertyDescriptor なども
    // インターセプト可能（ここでは省略）
  });
}

// 依存関係の追跡（どのエフェクトがどのプロパティに依存しているか記録）
function track(deps, key) {
  if (!activeEffect) return;  // エフェクト実行中でなければ何もしない
  
  // このプロパティの依存関係セットを作成（初回のみ）
  if (!deps.has(key)) {
    deps.set(key, new Set());
  }
  
  // 現在のエフェクトをこのプロパティの依存として追加
  deps.get(key).add(activeEffect);
}

// エフェクトのトリガー（プロパティが変更されたときに依存を実行）
function trigger(deps, key) {
  const effects = deps.get(key);  // このプロパティに依存するエフェクト
  if (effects) {
    // すべての依存エフェクトを実行
    effects.forEach(effect => effect());
  }
}

// 1. 配列の変更も完璧に検知できる
const state = createReactiveProxy({
  items: [1, 2, 3]
});

watchEffect(() => {
  console.log('Items:', state.items.join(', '));
});

// Object.defineProperty()では検知できなかった操作もすべて検知
state.items[0] = 999;      // ✅ インデックスアクセスも検知される
state.items.push(4);       // ✅ 配列メソッドも検知される
state.items.length = 2;    // ✅ length プロパティの変更も検知される

// 2. 動的なプロパティ追加・削除も検知
const user = createReactiveProxy({
  name: 'John'
});

watchEffect(() => {
  console.log('User:', JSON.stringify(user));
});

// 初期化時に存在しなかったプロパティも追加可能
user.age = 30;             // ✅ 新しいプロパティの追加も検知される
user.email = 'john@example.com';  // ✅ さらに追加しても検知される
delete user.name;          // ✅ プロパティの削除も検知される

// 3. ネストしたオブジェクトも自動的にリアクティブ
const nested = createReactiveProxy({
  level1: {
    level2: {
      value: 'deep'
    }
  }
});

watchEffect(() => {
  // 深いプロパティへのアクセスも自動追跡
  console.log('Deep value:', nested.level1.level2.value);
});

// どんなに深いプロパティの変更も検知
nested.level1.level2.value = 'changed';  // ✅ 検知される
nested.level1.newProp = { test: 'new' }; // ✅ 新しいネストも検知される

// Svelte 5の$stateの簡略化した実装イメージ
function $state(initialValue) {
  let value = initialValue;
  const subscribers = new Set();  // この状態を監視しているコンポーネント
  
  // オブジェクトや配列の場合、Proxyでラップ
  if (typeof initialValue === 'object' && initialValue !== null) {
    return new Proxy(initialValue, {
      get(target, key) {
        // プロパティアクセス時に依存関係を追跡
        trackSignal(subscribers);
        return Reflect.get(target, key);
      },
      set(target, key, newValue) {
        const result = Reflect.set(target, key, newValue);
        // 値が変更されたら、購読者（コンポーネント）に通知
        notifySubscribers(subscribers);
        return result;
      }
    });
  }
  
  // プリミティブ値（数値、文字列など）の場合
  // getter/setter を持つオブジェクトとして返す
  return {
    get value() {
      trackSignal(subscribers);  // 値の読み取りを追跡
      return value;
    },
    set value(newValue) {
      value = newValue;
      notifySubscribers(subscribers);  // 変更を通知
    }
  };
}

// $derivedの簡略化した実装
function $derived(computation) {
  let cachedValue;      // 計算結果のキャッシュ
  let isDirty = true;   // 再計算が必要かどうか
  
  // 依存が変更されたときに呼ばれる関数
  const recompute = () => {
    isDirty = true;  // 次回アクセス時に再計算するフラグを立てる
  };
  
  return {
    get value() {
      if (isDirty) {
        // キャッシュが無効なら再計算
        // computation 内でアクセスした $state に自動的に依存
        cachedValue = trackComputation(computation, recompute);
        isDirty = false;
      }
      return cachedValue;  // キャッシュされた値を返す
    }
  };
}

// 開発者が書くコード（Svelte 5のRunes）
let count = $state(0);
let doubled = $derived(count * 2);

// コンパイル後のコード（簡略化）
let count = createSignal(0);  // シグナル（リアクティブな値）を作成
let doubled = createComputed(() => count.value * 2);  // 計算プロパティ

// UIの更新コード（Svelteが自動生成）
if (count.changed) {  // 値が変更されたかチェック
  updateTextNode(node, count.value);  // DOM ノードを直接更新
  // Virtual DOM を使わず、直接DOMを更新するので高速
}

// パフォーマンステスト
const iterations = 100000;

// 1. Object.defineProperty版のベンチマーク
console.time('defineProperty');
const obj1 = {};
for (let i = 0; i < iterations; i++) {
  Object.defineProperty(obj1, `prop${i}`, {
    value: i,
    writable: true,
    enumerable: true,
    configurable: true
  });
}
console.timeEnd('defineProperty');
// 結果例: defineProperty: 45ms

// 2. Proxy版のベンチマーク
console.time('proxy');
const obj2 = new Proxy({}, {
  set(target, key, value) {
    target[key] = value;
    return true;
  }
});
for (let i = 0; i < iterations; i++) {
  obj2[`prop${i}`] = i;  // Proxyのsetトラップが毎回実行される
}
console.timeEnd('proxy');
// 結果例: proxy: 120ms（definePropertyより遅いが、機能性は高い）

// 3. 通常のオブジェクト（比較用）
console.time('plain object');
const obj3 = {};
for (let i = 0; i < iterations; i++) {
  obj3[`prop${i}`] = i;  // 何のインターセプトもなし
}
console.timeEnd('plain object');
// 結果例: plain object: 15ms（最速）

// グローバルな依存関係マップ（メモリリークを防ぐためWeakMapを使用）
const targetMap = new WeakMap();  // オブジェクト → 依存関係のマッピング

function reactive(target) {
  // このオブジェクトの依存関係マップ
  const depsMap = new Map();  // プロパティ名 → エフェクトのセット
  
  // WeakMapに保存（targetがGCされると自動的に削除される）
  targetMap.set(target, depsMap);
  
  return new Proxy(target, {
    get(target, key) {
      // 依存関係の追跡
      track(targetMap.get(target), key);
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      const result = Reflect.set(target, key, value);
      // 依存するエフェクトを実行
      trigger(targetMap.get(target), key);
      return result;
    }
  });
}

// メモリリークの例（WeakMapを使わない場合）
let hugeObject = { data: new Array(1000000) };
const reactiveObj = reactive(hugeObject);
hugeObject = null;  // WeakMapなら、依存関係も自動削除される

// 更新をバッチ処理して、パフォーマンスを向上
let pending = false;              // バッチ処理中かどうか
const pendingEffects = new Set(); // 実行待ちのエフェクト

function queueEffect(effect) {
  // エフェクトをキューに追加
  pendingEffects.add(effect);
  
  if (!pending) {
    pending = true;
    // マイクロタスクキューで非同期実行（同期的な変更をまとめる）
    Promise.resolve().then(flushEffects);
  }
}

function flushEffects() {
  pending = false;
  // キューに溜まったエフェクトをまとめて実行
  const effects = [...pendingEffects];
  pendingEffects.clear();
  effects.forEach(effect => effect());
}

// 使用例
const state = reactive({ a: 1, b: 2, c: 3 });

watchEffect(() => {
  console.log(`Sum: ${state.a + state.b + state.c}`);
});

// これらの変更は1回のバッチで処理される
state.a = 10;  // エフェクトをキューに追加
state.b = 20;  // 同じエフェクトは重複しない
state.c = 30;  // まだ実行されない
// マイクロタスク後に、エフェクトが1回だけ実行される

const effectStack = [];  // 現在実行中のエフェクトのスタック

function runEffect(effect) {
  // 同じエフェクトが既にスタックにあれば循環参照
  if (effectStack.includes(effect)) {
    console.warn('Circular dependency detected!', {
      currentStack: effectStack.map(e => e.name || 'anonymous'),
      attemptedEffect: effect.name || 'anonymous'
    });
    return;  // 実行を中断して無限ループを防ぐ
  }
  
  try {
    effectStack.push(effect);  // スタックに追加
    effect();                  // エフェクトを実行
  } finally {
    effectStack.pop();         // 必ずスタックから削除
  }
}

// 循環参照の例
const state = reactive({ a: 1, b: 2 });

// ❌ 悪い例：循環参照を起こすコード
watchEffect(function badEffect() {
  state.a = state.b + 1;  // a を b に依存させる
});

watchEffect(function anotherBadEffect() {
  state.b = state.a + 1;  // b を a に依存させる（循環！）
});
// 上記のコードは検出されて警告が出る