script.js

document.addEventListener("DOMContentLoaded", () => {
  // パフォーマンス測定
  let startTime = performance.now();

  // CLS測定用
  let clsValue = 0;
  let lastLayoutShiftScore = 0;

  // CLSを観察する
  if ("LayoutShiftAttribution" in window) {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
          lastLayoutShiftScore = entry.value;
        }
      }
      // CLSの値を表示
      const clsElement = document.getElementById("cls-value");
      if (clsElement) {
        clsElement.textContent = clsValue.toFixed(3);
      }
    });
    observer.observe({ type: "layout-shift", buffered: true });
  }

  // ページ読み込み時間の表示
  window.addEventListener("load", () => {
    const loadTime = (performance.now() - startTime).toFixed(0);
    const loadTimeElement = document.getElementById("load-time");
    if (loadTimeElement) {
      loadTimeElement.textContent = `${loadTime}ms`;
    }
  });

  // ファーストビューのデモ
  setupFirstViewDemo();

  // アルゴリズムと要素計算のデモ
  setupAlgorithmDemo();

  // スクロール領域のデモ
  setupScrollAreaDemo();

  // コンテンツ読み込みのデモ
  setupContentLoadingDemo();

  // スクロール検知のデモ
  setupScrollDetectionDemo();

  // タブ切り替え機能
  setupTabs();
});

// ファーストビューのデモセットアップ
function setupFirstViewDemo() {
  // プレースホルダーの適切な高さ設定（CLS防止）
  const placeholders = document.querySelectorAll(".placeholder");
  placeholders.forEach((placeholder) => {
    const height = placeholder.getAttribute("data-height");
    if (height) {
      placeholder.style.height = height;
    }
  });
}

// アルゴリズムと要素計算のデモセットアップ
function setupAlgorithmDemo() {
  const elementContainer = document.getElementById("element-container");
  const elementCountInput = document.getElementById("element-count");
  const elementCountValue = document.getElementById("element-count-value");
  const checkVisibilityBtn = document.getElementById("check-visibility");
  const visibleCountElement = document.getElementById("visible-count");
  const calcTimeElement = document.getElementById("calc-time");

  if (
    !elementContainer ||
    !elementCountInput ||
    !elementCountValue ||
    !checkVisibilityBtn
  )
    return;

  // 要素数スライダーの更新
  elementCountInput.addEventListener("input", () => {
    const count = elementCountInput.value;
    elementCountValue.textContent = count;
    generateElements(count);
  });

  // 可視要素チェックボタン
  checkVisibilityBtn.addEventListener("click", () => {
    const startTime = performance.now();

    // 1. 単純なループ（非効率）
    const visibleElements = checkVisibleElements();

    const endTime = performance.now();
    const calcTime = (endTime - startTime).toFixed(2);

    visibleCountElement.textContent = visibleElements.length;
    calcTimeElement.textContent = `${calcTime}ms`;

    // 可視要素のハイライト
    document.querySelectorAll(".element-item").forEach((el) => {
      el.classList.remove("visible");
    });

    visibleElements.forEach((el) => {
      el.classList.add("visible");
    });
  });

  // 初期要素の生成
  generateElements(elementCountInput.value);

  // 要素を生成する関数
  function generateElements(count) {
    elementContainer.innerHTML = "";
    for (let i = 0; i < count; i++) {
      const el = document.createElement("div");
      el.className = "element-item";
      el.textContent = `要素 ${i + 1}`;
      el.dataset.id = i + 1;
      elementContainer.appendChild(el);
    }
  }

  // 可視要素をチェックする関数（単純なループ）
  function checkVisibleElements() {
    const elements = elementContainer.querySelectorAll(".element-item");
    const containerRect = elementContainer.getBoundingClientRect();
    const visibleElements = [];

    elements.forEach((element) => {
      const elementRect = element.getBoundingClientRect();

      // 要素が表示領域内にあるかどうかを確認
      if (
        elementRect.top < containerRect.bottom &&
        elementRect.bottom > containerRect.top
      ) {
        visibleElements.push(element);
      }
    });

    return visibleElements;
  }
}

// スクロール領域のデモセットアップ
function setupScrollAreaDemo() {
  const badScrollContainer = document.querySelector(".bad-scroll");
  const goodScrollContainer = document.querySelector(".good-scroll");

  if (!badScrollContainer || !goodScrollContainer) return;

  // 問題のあるスクロール（CLS発生）
  function loadBadExample() {
    for (let i = 0; i < 20; i++) {
      const delay = Math.random() * 1000;

      setTimeout(() => {
        const item = document.createElement("div");
        item.className = "content-item";

        // ランダムなコンテンツの高さ（これがCLSの原因になる）
        const textLength = Math.floor(Math.random() * 200) + 20;
        item.textContent = "".padStart(textLength, "あ");

        badScrollContainer.appendChild(item);
      }, delay);
    }
  }

  // 最適化されたスクロール（CLS防止）
  function loadGoodExample() {
    // 先にプレースホルダーを配置（高さ確保）
    for (let i = 0; i < 20; i++) {
      const item = document.createElement("div");
      item.className = "content-item";
      item.style.minHeight = "100px";
      item.innerHTML = '<div class="placeholder">読み込み中...</div>';
      goodScrollContainer.appendChild(item);
    }

    // 実際のコンテンツをロード
    const items = goodScrollContainer.querySelectorAll(".content-item");
    items.forEach((item, index) => {
      const delay = Math.random() * 1000;

      setTimeout(() => {
        const textLength = Math.floor(Math.random() * 200) + 20;
        item.innerHTML = "".padStart(textLength, "あ");
      }, delay);
    });
  }

  // タブ切り替え時にコンテンツをロード
  const badTab = document.querySelector('[data-tab="bad"]');
  const goodTab = document.querySelector('[data-tab="good"]');

  badTab.addEventListener("click", () => {
    if (badScrollContainer.children.length === 0) {
      loadBadExample();
    }
  });

  goodTab.addEventListener("click", () => {
    if (goodScrollContainer.children.length === 0) {
      loadGoodExample();
    }
  });

  // 初期表示（悪い例）
  loadBadExample();
}

// コンテンツ読み込みのデモセットアップ
function setupContentLoadingDemo() {
  const lazyContainer = document.getElementById("lazy-loading-container");
  const infiniteContainer = document.getElementById(
    "infinite-scroll-container"
  );
  const virtualContainer = document.getElementById("virtual-scroll-container");

  if (!lazyContainer || !infiniteContainer || !virtualContainer) return;

  // 遅延読み込みのデモ
  setupLazyLoading(lazyContainer);

  // 無限スクロールのデモ
  setupInfiniteScroll(infiniteContainer);

  // 仮想スクロールのデモ
  setupVirtualScroll(virtualContainer);
}

// 遅延読み込みのデモ
function setupLazyLoading(container) {
  // 画像URLの配列（プレースホルダー画像）
  const imageUrls = [
    "https://via.placeholder.com/400x200?text=画像1",
    "https://via.placeholder.com/400x200?text=画像2",
    "https://via.placeholder.com/400x200?text=画像3",
    "https://via.placeholder.com/400x200?text=画像4",
    "https://via.placeholder.com/400x200?text=画像5",
    "https://via.placeholder.com/400x200?text=画像6",
    "https://via.placeholder.com/400x200?text=画像7",
    "https://via.placeholder.com/400x200?text=画像8",
    "https://via.placeholder.com/400x200?text=画像9",
    "https://via.placeholder.com/400x200?text=画像10",
  ];

  // コンテナにプレースホルダーアイテムを追加
  imageUrls.forEach((url, index) => {
    const item = document.createElement("div");
    item.className = "lazy-item loading";
    item.innerHTML = `<div class="placeholder">画像 ${
      index + 1
    } 読み込み中...</div>`;
    container.appendChild(item);
  });

  // Intersection Observerを使用して遅延読み込み
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const item = entry.target;
          const index = Array.from(container.children).indexOf(item);

          if (index >= 0 && index < imageUrls.length) {
            // 画像を読み込む
            setTimeout(() => {
              const img = document.createElement("img");
              img.src = imageUrls[index];
              img.alt = `画像 ${index + 1}`;
              img.style.opacity = "0";

              img.onload = () => {
                item.innerHTML = "";
                item.appendChild(img);
                item.classList.remove("loading");

                // フェードイン
                setTimeout(() => {
                  img.style.opacity = "1";
                }, 50);
              };
            }, Math.random() * 1000 + 500); // ランダムな遅延
          }

          // 一度読み込んだら監視を解除
          observer.unobserve(item);
        }
      });
    },
    {
      root: container,
      threshold: 0.1,
    }
  );

  // すべての遅延読み込みアイテムを監視
  document.querySelectorAll(".lazy-item").forEach((item) => {
    observer.observe(item);
  });
}

// 無限スクロールのデモ
function setupInfiniteScroll(container) {
  let page = 1;
  let loading = false;
  const itemsPerPage = 10;

  // 初期アイテムを読み込む
  loadItems();

  // スクロールイベントリスナー
  container.addEventListener("scroll", () => {
    if (loading) return;

    // スクロール位置がコンテナの下部に近づいたら新しいアイテムを読み込む
    const scrollTop = container.scrollTop;
    const scrollHeight = container.scrollHeight;
    const clientHeight = container.clientHeight;

    if (scrollTop + clientHeight >= scrollHeight - 100) {
      loadItems();
    }
  });

  // アイテムを読み込む関数
  function loadItems() {
    loading = true;

    // ローディングインジケータを追加
    const loadingIndicator = document.createElement("div");
    loadingIndicator.className = "loading-indicator";
    loadingIndicator.textContent = "読み込み中...";
    container.appendChild(loadingIndicator);

    // アイテム読み込みを遅延させる（APIリクエストのシミュレーション）
    setTimeout(() => {
      // ローディングインジケータを削除
      container.removeChild(loadingIndicator);

      // 新しいアイテムを追加
      for (let i = 0; i < itemsPerPage; i++) {
        const itemIndex = (page - 1) * itemsPerPage + i + 1;
        const item = document.createElement("div");
        item.className = "infinite-item";
        item.textContent = `アイテム ${itemIndex}`;
        container.appendChild(item);
      }

      page++;
      loading = false;
    }, 1000);
  }
}

// 仮想スクロールのデモ
function setupVirtualScroll(container) {
  const totalItems = 10000; // 膨大な数のアイテム
  const itemHeight = 50; // アイテムの高さ
  const visibleItems = 20; // 画面に表示するアイテム数

  // 仮想スクロールのコンテナを作成
  const viewport = document.createElement("div");
  viewport.className = "virtual-viewport";
  container.appendChild(viewport);

  // 実際のコンテンツを表示する要素
  const content = document.createElement("div");
  content.className = "virtual-content";
  viewport.appendChild(content);

  // スクロール全体の高さを設定（すべてのアイテムが存在するかのように）
  const totalHeight = totalItems * itemHeight;
  content.style.height = `${totalHeight}px`;

  // 表示すべきアイテムを更新する関数
  function updateVisibleItems() {
    const scrollTop = viewport.scrollTop;
    const startIndex = Math.floor(scrollTop / itemHeight);
    const endIndex = Math.min(startIndex + visibleItems, totalItems - 1);

    // 現在のアイテムをクリア
    content.innerHTML = "";

    // 表示範囲のアイテムのみをレンダリング
    for (let i = startIndex; i <= endIndex; i++) {
      const item = document.createElement("div");
      item.className = "virtual-item";
      item.textContent = `アイテム ${i + 1} / ${totalItems}`;
      item.style.position = "absolute";
      item.style.top = `${i * itemHeight}px`;
      item.style.width = "100%";

      content.appendChild(item);
    }
  }

  // スクロールイベントで表示アイテムを更新
  viewport.addEventListener("scroll", () => {
    updateVisibleItems();
  });

  // 初期表示
  updateVisibleItems();
}

// スクロール検知のデモセットアップ
function setupScrollDetectionDemo() {
  setupScrollEvent();
  setupScrollThrottle();
  setupScrollObserver();
}

// 通常のスクロールイベント
function setupScrollEvent() {
  const scrollArea = document.getElementById("scroll-event-area");
  const eventCountElement = document.getElementById("event-count");
  const eventCpuElement = document.getElementById("event-cpu");

  if (!scrollArea || !eventCountElement || !eventCpuElement) return;

  // テスト要素の生成
  generateTestItems(scrollArea, 100);

  let eventCount = 0;

  // スクロールイベントリスナー（最適化なし）
  scrollArea.addEventListener("scroll", () => {
    eventCount++;
    eventCountElement.textContent = eventCount;

    // CPU使用率のシミュレーション
    const startTime = performance.now();

    // 重い処理のシミュレーション
    checkElementsVisibility(scrollArea);

    const endTime = performance.now();
    eventCpuElement.textContent = `${(endTime - startTime).toFixed(2)}ms`;
  });
}

// スロットリングを使用したスクロールイベント
function setupScrollThrottle() {
  const scrollArea = document.getElementById("scroll-throttle-area");
  const throttleCountElement = document.getElementById("throttle-count");
  const throttleCpuElement = document.getElementById("throttle-cpu");

  if (!scrollArea || !throttleCountElement || !throttleCpuElement) return;

  // テスト要素の生成
  generateTestItems(scrollArea, 100);

  let eventCount = 0;

  // スロットリング関数
  function throttle(callback, delay) {
    let lastCall = 0;
    return function (...args) {
      const now = new Date().getTime();
      if (now - lastCall < delay) {
        return;
      }
      lastCall = now;
      return callback(...args);
    };
  }

  // スロットリングされたスクロールハンドラ
  const throttledScroll = throttle(() => {
    eventCount++;
    throttleCountElement.textContent = eventCount;

    // CPU使用率のシミュレーション
    const startTime = performance.now();

    // 重い処理のシミュレーション
    checkElementsVisibility(scrollArea);

    const endTime = performance.now();
    throttleCpuElement.textContent = `${(endTime - startTime).toFixed(2)}ms`;
  }, 200); // 200msごとに実行

  // スクロールイベントリスナー（スロットリング適用）
  scrollArea.addEventListener("scroll", throttledScroll);
}

// IntersectionObserverを使用したスクロール検知
function setupScrollObserver() {
  const scrollArea = document.getElementById("scroll-observer-area");
  const observerCountElement = document.getElementById("observer-count");
  const observerCpuElement = document.getElementById("observer-cpu");

  if (!scrollArea || !observerCountElement || !observerCpuElement) return;

  // テスト要素の生成
  generateTestItems(scrollArea, 100);

  let callbackCount = 0;

  // Intersection Observerのコールバック
  const observerCallback = (entries, observer) => {
    callbackCount++;
    observerCountElement.textContent = callbackCount;

    const startTime = performance.now();

    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
      } else {
        entry.target.classList.remove("visible");
      }
    });

    const endTime = performance.now();
    observerCpuElement.textContent = `${(endTime - startTime).toFixed(2)}ms`;
  };

  // Intersection Observerのセットアップ
  const observer = new IntersectionObserver(observerCallback, {
    root: scrollArea,
    threshold: 0.1,
  });

  // すべてのテスト要素を監視
  const testItems = scrollArea.querySelectorAll(".test-item");
  testItems.forEach((item) => {
    observer.observe(item);
  });
}

// テスト要素を生成する関数
function generateTestItems(container, count) {
  for (let i = 0; i < count; i++) {
    const item = document.createElement("div");
    item.className = "test-item";
    item.textContent = `テスト要素 ${i + 1}`;
    container.appendChild(item);
  }
}

// 要素の可視性をチェックする関数（重い処理のシミュレーション）
function checkElementsVisibility(container) {
  const elements = container.querySelectorAll(".test-item");
  const containerRect = container.getBoundingClientRect();

  elements.forEach((element) => {
    const elementRect = element.getBoundingClientRect();

    if (
      elementRect.top < containerRect.bottom &&
      elementRect.bottom > containerRect.top
    ) {
      element.classList.add("visible");
    } else {
      element.classList.remove("visible");
    }
  });

  // 人工的な遅延を追加（CPUの負荷をシミュレート）
  const start = performance.now();
  while (performance.now() - start < 5) {
    // ビジーウェイト
  }
}

// タブ切り替え機能のセットアップ
function setupTabs() {
  const tabButtons = document.querySelectorAll(".tab-btn");

  tabButtons.forEach((button) => {
    button.addEventListener("click", () => {
      const tabGroup = button.closest(".tabs").parentElement;
      const tabTarget = button.getAttribute("data-tab");

      // 同じグループのタブをすべて非アクティブにする
      tabGroup.querySelectorAll(".tab-btn").forEach((btn) => {
        btn.classList.remove("active");
      });

      // 選択されたタブをアクティブにする
      button.classList.add("active");

      // タブコンテンツを切り替える
      tabGroup.querySelectorAll(".tab-content").forEach((content) => {
        content.classList.remove("active");
      });

      const targetContent = tabGroup.querySelector(`#${tabTarget}-tab`);
      if (targetContent) {
        targetContent.classList.add("active");
      }
    });
  });
}