script.js

document.addEventListener("DOMContentLoaded", () => {
  console.log("アニメーション最適化学習サイトへようこそ！");

  // レンダリングパイプラインの可視化インタラクション
  const pipelineSteps = document.querySelectorAll(
    ".pipeline-visualization .step"
  );
  const stepDetailsContainer = document.querySelector(".step-details");
  const stepDetailsContent = {
    scripting:
      "<strong>Scripting:</strong> JavaScriptの実行、イベントハンドラの処理、DOMの変更などが行われます。ここが重いと、後続の処理全体に遅延が生じます。",
    style:
      "<strong>Calculate Style:</strong> セレクターに一致する要素にどのCSSルールが適用されるかを計算します。複雑なセレクターや多数のルールは計算時間を増加させます。",
    layout:
      "<strong>Layout (再フロー):</strong> 要素のジオメトリ（幅、高さ、位置など）を計算します。要素のサイズや位置が変わると、影響を受ける他の要素も含めて再計算が必要です。コストが高い処理です。",
    paint:
      "<strong>Paint (再描画):</strong> 要素の見た目（色、背景、影など）をピクセルに変換するプロセスです。複数のレイヤーに分けて描画されることがあります。",
    rasterize:
      "<strong>Rasterize:</strong> ペイントの描画命令を、画面表示用のピクセルデータ（ビットマップ）に変換します。GPUがこの処理を高速化することがあります。",
    composite:
      "<strong>Composite Layers:</strong> 描画されたレイヤーを正しい順序で画面上に合成します。`transform` や `opacity` など、レイアウトやペイントをトリガーしないプロパティの変更は、このステップだけで処理されるため高速です。",
  };

  pipelineSteps.forEach((step) => {
    step.addEventListener("click", () => {
      // 他のアクティブ状態を解除
      pipelineSteps.forEach((s) => s.classList.remove("active"));
      // クリックされたステップをアクティブに
      step.classList.add("active");
      // 詳細を表示
      stepDetailsContainer.innerHTML =
        stepDetailsContent[step.id] || "詳細情報が見つかりません。";
    });
  });

  // 最適化デモの要素取得
  const styleBox = document.querySelector(".style-box");
  const layoutBox = document.querySelector(".layout-box");
  const paintBox = document.querySelector(".paint-box");
  const compositeBoxBad = document.querySelector(".composite-box-bad");
  const compositeBoxGood = document.querySelector(".composite-box-good");

  // --- スタイル計算デモ ---
  document
    .getElementById("animate-style-bad")
    ?.addEventListener("click", () => {
      styleBox.classList.remove("animate-transform");
      styleBox.classList.toggle("animate-left");
      console.log("スタイルデモ: leftアニメーション (非効率)");
    });
  document
    .getElementById("animate-style-good")
    ?.addEventListener("click", () => {
      styleBox.classList.remove("animate-left");
      styleBox.classList.toggle("animate-transform");
      console.log("スタイルデモ: transformアニメーション (効率的)");
    });

  // --- レイアウトデモ ---
  document
    .getElementById("animate-layout-bad")
    ?.addEventListener("click", () => {
      layoutBox.classList.remove("animate-scale");
      layoutBox.classList.toggle("animate-width");
      console.log("レイアウトデモ: widthアニメーション (非効率)");
    });
  document
    .getElementById("animate-layout-good")
    ?.addEventListener("click", () => {
      layoutBox.classList.remove("animate-width");
      layoutBox.classList.toggle("animate-scale");
      console.log("レイアウトデモ: transform:scaleアニメーション (効率的)");
    });

  // --- ペイントデモ ---
  document
    .getElementById("animate-paint-bad")
    ?.addEventListener("click", () => {
      paintBox.classList.remove("animate-opacity");
      paintBox.classList.toggle("animate-bgcolor");
      console.log("ペイントデモ: background-colorアニメーション (非効率)");
    });
  document
    .getElementById("animate-paint-good")
    ?.addEventListener("click", () => {
      paintBox.classList.remove("animate-bgcolor");
      paintBox.classList.toggle("animate-opacity");
      console.log("ペイントデモ: opacityアニメーション (効率的)");
    });

  // --- コンポジットデモ ---
  document
    .getElementById("animate-composite-bad")
    ?.addEventListener("click", () => {
      compositeBoxBad.classList.toggle("animate-composite");
      // Good側も比較のため動かすことがあるが、ここではBadのみトリガー
      console.log("コンポジットデモ: 通常要素のアニメーション");
    });
  document
    .getElementById("animate-composite-good")
    ?.addEventListener("click", () => {
      compositeBoxGood.classList.toggle("animate-composite");
      console.log("コンポジットデモ: レイヤー昇格要素のアニメーション");
    });
});