// 全ノード走査 vs Element 走査の違い
const body = document.body;
 
// childNodes はテキストノード（改行/空白）も含む
console.log(body.childNodes.length);    // 例: 7（テキスト3 + 要素3 + テキスト1）
 
// children は Element のみ
console.log(body.children.length);      // 例: 3（要素のみ）
 
// 再帰的なツリー走査
function walkDOM(node, callback, depth = 0) {
  callback(node, depth);
  let child = node.firstChild;
  while (child) {
    walkDOM(child, callback, depth + 1);
    child = child.nextSibling;
  }
}
 
walkDOM(document.body, (node, depth) => {
  const indent = '  '.repeat(depth);
  const info = node.nodeType === 1
    ? `Element <${node.tagName.toLowerCase()}>`
    : node.nodeType === 3
      ? `Text "${node.textContent.trim() || '(whitespace)'}"`
      : `Node type=${node.nodeType}`;
  console.log(`${indent}${info}`);
});

// ---- querySelector 系（静的 NodeList） ----
const el  = document.querySelector('#app');          // 最初の1つ
const els = document.querySelectorAll('.card');       // 全て
 
// ---- getElementsBy 系（ライブ HTMLCollection） ----
const byId    = document.getElementById('app');               // 単一要素
const byClass = document.getElementsByClassName('card');       // ライブ
const byTag   = document.getElementsByTagName('div');          // ライブ
const byName  = document.getElementsByName('email');           // ライブ NodeList
 
// ---- 特殊な取得 ----
const closest = element.closest('.container');  // 祖先方向に最も近い一致要素
const matches = element.matches('.active');     // セレクタに一致するか判定

// ライブコレクションの落とし穴
const items = document.getElementsByClassName('item');
console.log(items.length);  // 3
 
// ループ中に class を除去すると、インデックスがずれる
for (let i = 0; i < items.length; i++) {
  items[i].classList.remove('item');  // 除去した瞬間に items から消える
  // i=0 で除去 → items.length が 2 に → i=1 は元の3番目の要素
}
// 結果: 1つおきにしか処理されない
 
// 安全な方法1: querySelectorAll（静的）
document.querySelectorAll('.item').forEach(el => {
  el.classList.remove('item');  // 安全
});
 
// 安全な方法2: 逆順ループ
for (let i = items.length - 1; i >= 0; i--) {
  items[i].classList.remove('item');  // 後ろから処理すればインデックスが崩れない
}

// ---- Create ----
const div = document.createElement('div');
div.className = 'card';
div.id = 'card-1';
div.setAttribute('data-category', 'tech');
div.textContent = 'Hello, DOM!';
 
// テンプレートから作成（複雑な構造向き）
const template = document.getElementById('card-template');
const clone = template.content.cloneNode(true);  // deep clone
 
// ---- Insert ----
parent.appendChild(child);                 // 末尾に追加
parent.insertBefore(newChild, refChild);   // refChild の前に挿入
parent.replaceChild(newChild, oldChild);   // 置換
 
// モダン API（IE 非対応だが現在は問題なし）
parent.append(child1, child2, 'text');     // 末尾に複数追加（テキストも可）
parent.prepend(child);                     // 先頭に追加
refChild.before(newChild);                 // refChild の前に
refChild.after(newChild);                  // refChild の後に
oldChild.replaceWith(newChild);            // 自身を置換
 
// ---- Delete ----
parent.removeChild(child);                 // 従来の方法
child.remove();                            // モダン API
 
// ---- Read / Update ----
element.getAttribute('href');
element.setAttribute('href', '/new-path');
element.removeAttribute('disabled');
element.hasAttribute('hidden');
element.toggleAttribute('hidden');         // あれば削除、なければ追加

// DocumentFragment を使った効率的な大量挿入
function createList(items) {
  const fragment = document.createDocumentFragment();
 
  items.forEach((item, index) => {
    const li = document.createElement('li');
    li.className = 'list-item';
    li.dataset.index = index;
 
    const span = document.createElement('span');
    span.textContent = item.name;
    li.appendChild(span);
 
    const badge = document.createElement('span');
    badge.className = 'badge';
    badge.textContent = item.count;
    li.appendChild(badge);
 
    fragment.appendChild(li);
  });
 
  return fragment;
}
 
// 1,000 件のデータを一括挿入
const data = Array.from({ length: 1000 }, (_, i) => ({
  name: `Item ${i}`,
  count: Math.floor(Math.random() * 100),
}));
 
const ul = document.querySelector('#list');
ul.appendChild(createList(data));  // DOM操作は1回だけ

const target = document.getElementById('target');
 
// 末尾に追加（既存の内容を壊さない）
target.insertAdjacentHTML('beforeend', '<p class="new">追加コンテンツ</p>');
 
// 要素の前に挿入
target.insertAdjacentHTML('beforebegin', '<h2>見出し</h2>');
 
// insertAdjacentElement: Element オブジェクトを挿入
const newEl = document.createElement('div');
newEl.textContent = '新しい要素';
target.insertAdjacentElement('afterend', newEl);
 
// insertAdjacentText: テキストノードを挿入
target.insertAdjacentText('afterbegin', 'テキスト先頭追加: ');

// ---- アンチパターン: Layout Thrashing ----
// offsetHeight の読み取りごとに強制的な同期レイアウトが発生する
function badResize(elements) {
  elements.forEach(el => {
    const height = el.offsetHeight;          // 読み → 強制レイアウト
    el.style.height = (height * 2) + 'px';   // 書き → レイアウト無効化
    // 次の反復で再び offsetHeight → 再度強制レイアウト ...
  });
}
 
// ---- 推奨パターン: 読み書き分離 ----
function goodResize(elements) {
  // Phase 1: 全ての読み取りをまとめる
  const heights = elements.map(el => el.offsetHeight);
 
  // Phase 2: 全ての書き込みをまとめる
  elements.forEach((el, i) => {
    el.style.height = (heights[i] * 2) + 'px';
  });
}
 
// ---- 推奨パターン: requestAnimationFrame で書き込みを遅延 ----
function rafResize(elements) {
  const heights = elements.map(el => el.offsetHeight);  // 読み取り
 
  requestAnimationFrame(() => {
    elements.forEach((el, i) => {
      el.style.height = (heights[i] * 2) + 'px';       // 書き込み
    });
  });
}

// 1. classList API でクラスを操作（className 直接操作より安全）
element.classList.add('active', 'highlight');
element.classList.remove('active');
element.classList.toggle('visible');
element.classList.contains('active');    // boolean
element.classList.replace('old', 'new');
 
// 2. dataset API でカスタムデータ属性を操作
// HTML: <div data-user-id="42" data-is-admin="true">
element.dataset.userId;      // "42"（camelCase に変換される）
element.dataset.isAdmin;     // "true"（文字列であることに注意）
delete element.dataset.userId;
 
// 3. style プロパティの一括設定
// 悪い例: 複数回の style 書き込み
element.style.width = '100px';
element.style.height = '200px';
element.style.background = 'red';
 
// 良い例: cssText で一括設定
element.style.cssText = 'width: 100px; height: 200px; background: red;';
 
// さらに良い例: クラスの付け替え（スタイルは CSS に定義）
element.classList.add('card--expanded');
 
// 4. display: none で DOM から一時的に切り離し、操作後に復帰
element.style.display = 'none';  // レイアウトツリーから除外
// ... 複数の DOM 操作 ...
element.style.display = '';       // 復帰（1回だけ Reflow）

const container = document.getElementById('container');
const button = document.getElementById('target');
 
// キャプチャフェーズで処理（第3引数 true または { capture: true }）
container.addEventListener('click', (e) => {
  console.log('1. container キャプチャ');
}, true);
 
// バブリングフェーズで処理（デフォルト）
container.addEventListener('click', (e) => {
  console.log('3. container バブリング');
});
 
button.addEventListener('click', (e) => {
  console.log('2. button ターゲット');
});
 
// ボタンクリック時の出力順:
// 1. container キャプチャ
// 2. button ターゲット
// 3. container バブリング

element.addEventListener('click', (e) => {
  // イベントの伝播を停止（後続のリスナーは実行される）
  e.stopPropagation();
 
  // 同一要素の残りのリスナーも含めて停止
  e.stopImmediatePropagation();
 
  // デフォルト動作をキャンセル（リンク遷移、フォーム送信など）
  e.preventDefault();
 
  // デフォルト動作がキャンセル可能か確認
  console.log(e.cancelable);   // true or false
 
  // イベント発生源の情報
  console.log(e.target);       // 実際にクリックされた要素
  console.log(e.currentTarget); // リスナーが登録された要素
  console.log(e.eventPhase);   // 1=キャプチャ, 2=ターゲット, 3=バブリング
});

// ---- イベント委任の実装例 ----
 
// 1,000 件のリストアイテムに個別リスナーを登録するのは非効率
// 親の <ul> に1つだけ登録する
 
const todoList = document.getElementById('todo-list');
 
todoList.addEventListener('click', (e) => {
  // closest で最も近い li を探す（クリックが li 内の span や icon でも対応）
  const item = e.target.closest('li.todo-item');
  if (!item) return;  // li 以外のクリックは無視
 
  // data-action で処理を分岐
  const action = e.target.closest('[data-action]')?.dataset.action;
 
  switch (action) {
    case 'toggle':
      item.classList.toggle('completed');
      break;
    case 'delete':
      item.remove();
      break;
    case 'edit':
      startEditing(item);
      break;
  }
});
 
// HTML構造:
// <ul id="todo-list">
//   <li class="todo-item">
//     <span data-action="toggle">Buy milk</span>
//     <button data-action="edit">Edit</button>
//     <button data-action="delete">Delete</button>
//   </li>
//   ... 動的に追加されるアイテムにも自動対応 ...
// </ul>

element.addEventListener('scroll', handler, {
  capture: false,    // キャプチャフェーズで発火するか（デフォルト: false）
  once: true,        // 1回だけ実行し自動的に解除（デフォルト: false）
  passive: true,     // preventDefault() を呼ばないことを宣言
  signal: controller.signal,  // AbortSignal でリスナーを解除
});
 
// passive: true のメリット
// scroll/touchmove イベントで passive: true を指定すると
// ブラウザは preventDefault がないことを保証できるため
// スクロールを即座に開始し、スムーズなスクロールが実現する
 
// AbortController によるリスナー解除
const controller = new AbortController();
 
element.addEventListener('click', handler, { signal: controller.signal });
element.addEventListener('keyup', handler2, { signal: controller.signal });
element.addEventListener('scroll', handler3, { signal: controller.signal });
 
// 3つのリスナーをまとめて解除
controller.abort();

// CustomEvent で独自イベントを発火
const event = new CustomEvent('user:login', {
  detail: { userId: 42, username: 'alice' },
  bubbles: true,      // バブリングさせるか
  cancelable: true,    // preventDefault 可能にするか
  composed: true,      // Shadow DOM 境界を越えるか
});
 
element.dispatchEvent(event);
 
// 受け取り側
document.addEventListener('user:login', (e) => {
  console.log(e.detail.username);  // "alice"
});

// MutationObserver の基本パターン
 
// 1. コールバック関数を定義
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    switch (mutation.type) {
      case 'childList':
        // 子要素の追加
        mutation.addedNodes.forEach(node => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            console.log('追加された要素:', node.tagName, node.className);
          }
        });
        // 子要素の削除
        mutation.removedNodes.forEach(node => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            console.log('削除された要素:', node.tagName);
          }
        });
        break;
 
      case 'attributes':
        console.log(
          `属性変更: ${mutation.attributeName}`,
          `旧値: ${mutation.oldValue}`,
          `新値: ${mutation.target.getAttribute(mutation.attributeName)}`
        );
        break;
 
      case 'characterData':
        console.log(
          'テキスト変更:',
          `旧値: ${mutation.oldValue}`,
          `新値: ${mutation.target.textContent}`
        );
        break;
    }
  }
};
 
// 2. オブザーバーを作成
const observer = new MutationObserver(callback);
 
// 3. 監視を開始（オプションで対象を絞る）
observer.observe(document.getElementById('app'), {
  childList: true,           // 子要素の追加/削除を監視
  attributes: true,          // 属性の変更を監視
  characterData: true,       // テキストコンテンツの変更を監視
  subtree: true,             // 子孫要素も含めて監視
  attributeOldValue: true,   // 変更前の属性値を記録
  characterDataOldValue: true, // 変更前のテキストを記録
  attributeFilter: ['class', 'style', 'data-state'], // 監視する属性を限定
});
 
// 4. 未処理の変更を即時取得
const pendingMutations = observer.takeRecords();
 
// 5. 監視を停止
observer.disconnect();

/**
 * 指定セレクタに一致する要素が DOM に追加されるまで待つ
 * @param {string} selector - CSSセレクタ
 * @param {Element} root - 監視対象のルート要素
 * @param {number} timeout - タイムアウト（ms）
 * @returns {Promise<Element>}
 */
function waitForElement(selector, root = document.body, timeout = 10000) {
  return new Promise((resolve, reject) => {
    // 既に存在するか確認
    const existing = root.querySelector(selector);
    if (existing) {
      resolve(existing);
      return;
    }
 
    const timeoutId = setTimeout(() => {
      observer.disconnect();
      reject(new Error(`Element "${selector}" not found within ${timeout}ms`));
    }, timeout);
 
    const observer = new MutationObserver((mutations) => {
      const element = root.querySelector(selector);
      if (element) {
        clearTimeout(timeoutId);
        observer.disconnect();
        resolve(element);
      }
    });
 
    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });
}
 
// 使用例
try {
  const modal = await waitForElement('.modal-dialog');
  console.log('モーダルが表示された:', modal);
} catch (e) {
  console.error('モーダルが表示されなかった:', e.message);
}

// ---- 完全な Web Component の例 ----
 
class AccordionItem extends HTMLElement {
  // 監視する属性を宣言
  static get observedAttributes() {
    return ['open', 'disabled'];
  }
 
  constructor() {
    super();
    this._shadow = this.attachShadow({ mode: 'open' });
    this._shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          overflow: hidden;
          margin-bottom: 8px;
        }
 
        :host([disabled]) {
          opacity: 0.5;
          pointer-events: none;
        }
 
        :host(:not([open])) .panel {
          display: none;
        }
 
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 16px;
          cursor: pointer;
          background: #f7fafc;
          user-select: none;
        }
 
        .header:hover {
          background: #edf2f7;
        }
 
        .arrow {
          transition: transform 0.2s;
        }
 
        :host([open]) .arrow {
          transform: rotate(90deg);
        }
 
        .panel {
          padding: 16px;
          border-top: 1px solid #e2e8f0;
        }
      </style>
 
      <div class="header" part="header">
        <slot name="title">Untitled</slot>
        <span class="arrow" part="arrow">&#9654;</span>
      </div>
      <div class="panel" part="panel">
        <slot></slot>
      </div>
    `;
 
    // イベントバインド
    this._shadow.querySelector('.header').addEventListener('click', () => {
      if (!this.hasAttribute('disabled')) {
        this.toggleAttribute('open');
      }
    });
  }
 
  // ライフサイクルコールバック
  connectedCallback() {
    // DOM に追加された時
    this.setAttribute('role', 'region');
  }
 
  disconnectedCallback() {
    // DOM から削除された時（クリーンアップ）
  }
 
  attributeChangedCallback(name, oldValue, newValue) {
    // 監視対象属性が変更された時
    if (name === 'open') {
      this.dispatchEvent(new CustomEvent('toggle', {
        detail: { open: this.hasAttribute('open') },
        bubbles: true,
      }));
    }
  }
}
 
customElements.define('accordion-item', AccordionItem);
 
// HTML での使用:
// <accordion-item open>
//   <span slot="title">セクション1</span>
//   <p>コンテンツ...</p>
// </accordion-item>

// CSS カスタムプロパティによるテーマ設定
// 外部 CSS:
//   accordion-item {
//     --accordion-bg: #f0f0f0;
//     --accordion-color: #333;
//   }
 
// Shadow DOM 内 CSS:
//   .header {
//     background: var(--accordion-bg, #f7fafc);
//     color: var(--accordion-color, inherit);
//   }
 
// ::part() による外部からのスタイリング
// 外部 CSS:
//   accordion-item::part(header) {
//     background: navy;
//     color: white;
//   }

// open モード: shadowRoot プロパティで外部からアクセス可能
const openEl = document.createElement('div');
const openShadow = openEl.attachShadow({ mode: 'open' });
console.log(openEl.shadowRoot === openShadow);  // true
 
// closed モード: shadowRoot は null を返す
const closedEl = document.createElement('div');
const closedShadow = closedEl.attachShadow({ mode: 'closed' });
console.log(closedEl.shadowRoot);  // null
// closedShadow への参照を保持していれば操作は可能
// 完全なセキュリティ境界ではないことに注意

// Virtual DOM ノードの概念的な構造（React の場合）
// JSX: <div className="card"><h1>Title</h1><p>Body</p></div>
// ↓ トランスパイル後
const vnode = {
  type: 'div',
  props: { className: 'card' },
  children: [
    {
      type: 'h1',
      props: {},
      children: ['Title'],
    },
    {
      type: 'p',
      props: {},
      children: ['Body'],
    },
  ],
};
 
// 状態変更により新しい vnode が生成される
const newVnode = {
  type: 'div',
  props: { className: 'card active' },  // className 変更
  children: [
    {
      type: 'h1',
      props: {},
      children: ['New Title'],            // テキスト変更
    },
    {
      type: 'p',
      props: {},
      children: ['Body'],                 // 変更なし
    },
  ],
};
 
// Diff 結果:
// 1. div の className を 'card' → 'card active' に変更
// 2. h1 のテキストを 'Title' → 'New Title' に変更
// 3. p は変更なし → 何もしない

// Svelte のコンパイル結果の概念イメージ
// 入力（.svelte ファイル）:
//   <script>
//     let count = 0;
//     function increment() { count += 1; }
//   </script>
//   <button on:click={increment}>{count}</button>
 
// コンパイル出力（概念的）:
function create_fragment(ctx) {
  let button;
  let t;
 
  return {
    c() {  // create
      button = document.createElement('button');
      t = document.createTextNode(ctx[0]);  // count
      button.appendChild(t);
    },
    m(target) {  // mount
      target.appendChild(button);
      button.addEventListener('click', ctx[1]);  // increment
    },
    p(ctx) {  // update（差分のみ）
      t.data = ctx[0];  // テキストノードを直接更新（diff不要）
    },
    d(detaching) {  // destroy
      if (detaching) button.remove();
    },
  };
}

// Range の基本操作
const range = document.createRange();
 
// 要素の内容全体を選択
range.selectNodeContents(element);
 
// 特定のテキストノードの一部を選択
const textNode = element.firstChild;  // テキストノード
range.setStart(textNode, 5);   // 5文字目から
range.setEnd(textNode, 10);    // 10文字目まで
 
// 選択範囲の情報取得
console.log(range.toString());           // 選択されたテキスト
console.log(range.getBoundingClientRect()); // 選択範囲の座標
 
// 選択範囲を操作
range.deleteContents();                   // 選択範囲を削除
range.insertNode(document.createElement('mark')); // ノード挿入
 
// ユーザの選択範囲を取得
const selection = window.getSelection();
if (selection.rangeCount > 0) {
  const userRange = selection.getRangeAt(0);
  console.log('選択テキスト:', userRange.toString());
 
  // 選択範囲をマーカーで囲む
  const mark = document.createElement('mark');
  mark.style.backgroundColor = '#ffeb3b';
  userRange.surroundContents(mark);
}

// テキストノードのみを走査
const walker = document.createTreeWalker(
  document.body,          // ルート
  NodeFilter.SHOW_TEXT,   // テキストノードのみ
  {
    acceptNode(node) {
      // 空白のみのテキストノードを除外
      return node.textContent.trim()
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_REJECT;
    }
  }
);
 
const textNodes = [];
let current;
while ((current = walker.nextNode())) {
  textNodes.push(current);
}
 
// テキスト検索と置換
function findAndHighlight(root, searchText) {
  const walker = document.createTreeWalker(
    root,
    NodeFilter.SHOW_TEXT,
    null
  );
 
  const matches = [];
  let node;
  while ((node = walker.nextNode())) {
    if (node.textContent.includes(searchText)) {
      matches.push(node);
    }
  }
 
  matches.forEach(textNode => {
    const parts = textNode.textContent.split(searchText);
    const fragment = document.createDocumentFragment();
 
    parts.forEach((part, i) => {
      fragment.appendChild(document.createTextNode(part));
      if (i < parts.length - 1) {
        const mark = document.createElement('mark');
        mark.textContent = searchText;
        fragment.appendChild(mark);
      }
    });
 
    textNode.parentNode.replaceChild(fragment, textNode);
  });
}

// 遅延ロード + DOM 操作の組み合わせ
function setupLazyLoading() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.dataset.src;
 
        // 実際の src を設定
        img.src = src;
        img.removeAttribute('data-src');
        img.classList.add('loaded');
 
        // 監視を解除
        observer.unobserve(img);
      }
    });
  }, {
    rootMargin: '200px 0px',  // ビューポートの200px手前から読み込み開始
    threshold: 0.01,
  });
 
  // data-src 属性を持つ全画像を監視
  document.querySelectorAll('img[data-src]').forEach(img => {
    observer.observe(img);
  });
}
 
// 無限スクロールの実装
function setupInfiniteScroll(container, loadMore) {
  const sentinel = document.createElement('div');
  sentinel.className = 'scroll-sentinel';
  sentinel.style.height = '1px';
  container.appendChild(sentinel);
 
  let isLoading = false;
 
  const observer = new IntersectionObserver(async (entries) => {
    if (entries[0].isIntersecting && !isLoading) {
      isLoading = true;
 
      const newItems = await loadMore();
 
      const fragment = document.createDocumentFragment();
      newItems.forEach(item => {
        const el = createItemElement(item);
        fragment.appendChild(el);
      });
 
      // sentinel の前に挿入（sentinel は常に末尾）
      container.insertBefore(fragment, sentinel);
      isLoading = false;
    }
  }, { threshold: 0.1 });
 
  observer.observe(sentinel);
  return () => observer.disconnect();
}

// 要素のサイズ変更を検知してレイアウトを調整
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
 
    // コンテナ幅に応じたレスポンシブレイアウト（CSS Container Queries の代替）
    const container = entry.target;
    container.classList.toggle('compact', width < 400);
    container.classList.toggle('medium', width >= 400 && width < 800);
    container.classList.toggle('wide', width >= 800);
 
    // グリッドの列数を動的に調整
    const columns = Math.max(1, Math.floor(width / 250));
    container.style.setProperty('--columns', columns);
  }
});
 
resizeObserver.observe(document.querySelector('.grid-container'));

// HTML:
// <template id="card-template">
//   <div class="card">
//     <h3 class="card-title"></h3>
//     <p class="card-body"></p>
//     <button class="card-action">詳細</button>
//   </div>
// </template>
 
function createCard(title, body) {
  const template = document.getElementById('card-template');
  const clone = template.content.cloneNode(true);  // DocumentFragment
 
  clone.querySelector('.card-title').textContent = title;
  clone.querySelector('.card-body').textContent = body;
  clone.querySelector('.card-action').addEventListener('click', () => {
    console.log(`${title} の詳細を表示`);
  });
 
  return clone;
}
 
// テンプレートを使った大量生成
const container = document.getElementById('card-list');
const fragment = document.createDocumentFragment();
 
for (const item of dataList) {
  fragment.appendChild(createCard(item.title, item.body));
}
container.appendChild(fragment);

<!-- Declarative Shadow DOM -->
<my-card>
  <template shadowrootmode="open">
    <style>
      :host { display: block; border: 1px solid #ccc; padding: 16px; }
      .title { font-weight: bold; font-size: 1.2em; }
    </style>
    <div class="title">
      <slot name="title">Default Title</slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </template>
  <span slot="title">宣言的 Shadow DOM</span>
  <p>JavaScript なしで Shadow DOM が構築される</p>
</my-card>

// ---- 危険: innerHTML にユーザ入力を直接代入 ----
const userInput = '<img src=x onerror="alert(document.cookie)">';
element.innerHTML = userInput;  // XSS! スクリプトが実行される
 
// ---- 安全策1: textContent を使う ----
element.textContent = userInput;  // テキストとして表示される（HTMLとして解釈されない）
 
// ---- 安全策2: DOMPurify でサニタイズ ----
// import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);
 
// ---- 安全策3: Sanitizer API（ブラウザネイティブ、Chrome 105+） ----
const sanitizer = new Sanitizer({
  allowElements: ['b', 'i', 'em', 'strong', 'a'],
  allowAttributes: { 'href': ['a'] },
  blockElements: ['script', 'style'],
});
element.setHTML(userInput, { sanitizer });
 
// ---- 安全策4: DOM API で要素を構築 ----
function safeRender(data) {
  const div = document.createElement('div');
  const heading = document.createElement('h2');
  heading.textContent = data.title;  // 常にテキストとして扱われる
  div.appendChild(heading);
 
  const link = document.createElement('a');
  link.textContent = data.linkText;
  link.href = data.url;
 
  // href の検証（javascript: プロトコル対策）
  if (!/^https?:\/\//i.test(data.url)) {
    link.href = '#';  // 不正なURLを無効化
  }
 
  div.appendChild(link);
  return div;
}

// ---- 危険: リスナーの解除漏れ ----
class BadComponent {
  constructor(element) {
    this.element = element;
    this.data = new Array(10000).fill('large data');
 
    // グローバルリスナーを登録したが解除を忘れる
    window.addEventListener('resize', this.onResize.bind(this));
    document.addEventListener('scroll', this.onScroll.bind(this));
  }
 
  onResize() { /* ... */ }
  onScroll() { /* ... */ }
 
  destroy() {
    this.element.remove();
    // リスナーが残ったまま → this への参照が保持 → GC されない
    // this.data の 10,000 要素分のメモリがリークする
  }
}
 
// ---- 安全: AbortController でリスナーを一括管理 ----
class GoodComponent {
  constructor(element) {
    this.element = element;
    this.data = new Array(10000).fill('large data');
    this.controller = new AbortController();
    const { signal } = this.controller;
 
    window.addEventListener('resize', this.onResize.bind(this), { signal });
    document.addEventListener('scroll', this.onScroll.bind(this), { signal });
    element.addEventListener('click', this.onClick.bind(this), { signal });
  }
 
  onResize() { /* ... */ }
  onScroll() { /* ... */ }
  onClick() { /* ... */ }
 
  destroy() {
    this.controller.abort();  // 全リスナーを一括解除
    this.element.remove();
    this.data = null;         // 大きなデータへの参照を明示的に解放
  }
}
 
// ---- WeakRef / FinalizationRegistry による参照管理 ----
const cache = new Map();
const registry = new FinalizationRegistry((key) => {
  // 要素がGCされたらキャッシュからも削除
  cache.delete(key);
  console.log(`Element with key "${key}" was garbage collected`);
});
 
function cacheElement(key, element) {
  const weakRef = new WeakRef(element);
  cache.set(key, weakRef);
  registry.register(element, key);
}
 
function getCachedElement(key) {
  const weakRef = cache.get(key);
  if (!weakRef) return null;
 
  const element = weakRef.deref();
  if (!element) {
    cache.delete(key);
    return null;
  }
  return element;
}

// ---- 危険: 10,000 件を一度に DOM に追加 ----
function badRender(items) {
  const container = document.getElementById('list');
  container.innerHTML = '';  // 全削除（内部イベントリスナーもリーク）
 
  items.forEach(item => {
    const div = document.createElement('div');
    div.textContent = item.name;
    container.appendChild(div);  // 10,000回のDOM操作
  });
}
 
// ---- 安全策1: DocumentFragment + requestAnimationFrame でチャンク処理 ----
function chunkedRender(items, chunkSize = 100) {
  const container = document.getElementById('list');
  let index = 0;
 
  function renderChunk() {
    const fragment = document.createDocumentFragment();
    const end = Math.min(index + chunkSize, items.length);
 
    for (; index < end; index++) {
      const div = document.createElement('div');
      div.textContent = items[index].name;
      fragment.appendChild(div);
    }
 
    container.appendChild(fragment);
 
    if (index < items.length) {
      requestAnimationFrame(renderChunk);
    }
  }
 
  requestAnimationFrame(renderChunk);
}
 
// ---- 安全策2: requestIdleCallback で空き時間に処理 ----
function idleRender(items) {
  const container = document.getElementById('list');
  let index = 0;
 
  function renderBatch(deadline) {
    const fragment = document.createDocumentFragment();
 
    while (index < items.length && deadline.timeRemaining() > 2) {
      const div = document.createElement('div');
      div.textContent = items[index].name;
      fragment.appendChild(div);
      index++;
    }
 
    container.appendChild(fragment);
 
    if (index < items.length) {
      requestIdleCallback(renderBatch);
    }
  }
 
  requestIdleCallback(renderBatch);
}

// ---- エッジケース: 取り外された要素への操作 ----
 
const div = document.createElement('div');
div.textContent = 'Hello';
document.body.appendChild(div);
 
// 参照を保持したまま DOM から削除
div.remove();
 
// 以下の操作はエラーにならないが、画面に反映されない
div.textContent = 'Updated';           // 成功するが画面に見えない
div.classList.add('active');           // 成功するが効果なし
div.style.backgroundColor = 'red';   // 成功するが効果なし
 
// offsetHeight 等のレイアウト情報は 0 を返す
console.log(div.offsetHeight);  // 0（DOMツリーに属していないため）
console.log(div.offsetWidth);   // 0
 
// isConnected プロパティで確認可能
console.log(div.isConnected);  // false
 
// ---- 安全な実装パターン ----
function updateElement(el, updates) {
  if (!el.isConnected) {
    console.warn('Element is not connected to the DOM');
    return false;
  }
 
  if (updates.text !== undefined) {
    el.textContent = updates.text;
  }
  if (updates.className !== undefined) {
    el.className = updates.className;
  }
  return true;
}
 
// MutationObserver のコールバック内での注意点
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    // removedNodes 内の要素は既に disconnected
    mutation.removedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        // クリーンアップ処理（リスナー解除、タイマー停止など）
        cleanupElement(node);
      }
    });
  }
});

// ---- エッジケース: ライブコレクションへの要素追加 ----
 
const container = document.getElementById('container');
const children = container.getElementsByTagName('div');
 
// 反復中に新しい div を追加すると無限ループになる
// 以下は意図的に示す危険なコードである（実行してはならない）
/*
for (let i = 0; i < children.length; i++) {
  const newDiv = document.createElement('div');
  newDiv.textContent = 'clone';
  container.appendChild(newDiv);
  // children.length が毎回増加 → 無限ループ
}
*/
 
// ---- 安全策: スプレッド構文で静的配列に変換 ----
const staticChildren = [...container.getElementsByTagName('div')];
staticChildren.forEach(child => {
  const clone = child.cloneNode(true);
  container.appendChild(clone);  // 安全：staticChildren は変化しない
});
 
// ---- 安全策: querySelectorAll（静的 NodeList） ----
container.querySelectorAll('div').forEach(child => {
  const clone = child.cloneNode(true);
  container.appendChild(clone);  // 安全
});
 
// ---- エッジケース: NodeList の forEach 可否 ----
// querySelectorAll の NodeList → forEach あり
// childNodes の NodeList → forEach あり（モダンブラウザ）
// getElementsBy の HTMLCollection → forEach なし
// 安全のため Array.from() を経由するのが確実
Array.from(document.getElementsByClassName('item')).forEach(el => {
  // 安全に処理
});

// Shadow DOM 内のボタンをクリックした場合
class MyWidget extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = '<button id="inner-btn">Click me</button>';
  }
}
customElements.define('my-widget', MyWidget);
 
// 外部からリスナーを登録
document.addEventListener('click', (e) => {
  // Shadow DOM 内のボタンがクリックされても
  // event.target は <my-widget> ホスト要素になる（リターゲット）
  console.log(e.target);       // <my-widget> （内部のボタンではない）
  console.log(e.composedPath()); // [button#inner-btn, #shadow-root, my-widget, body, html, document, Window]
});
 
// composed: false のイベントは Shadow DOM 境界を越えない
// composed: true のイベント（click, focus, input 等）は境界を越える
 
// composedPath() で実際のイベント経路を確認できる
document.addEventListener('click', (e) => {
  const path = e.composedPath();
  // path[0] が実際にクリックされた要素（Shadow DOM 内部含む）
  console.log('実際のターゲット:', path[0]);
});

// ---- 演習1の解答例 ----
 
function createTodoApp(rootSelector) {
  const root = document.querySelector(rootSelector);
 
  // DOM 構造の構築
  root.innerHTML = '';
  const form = document.createElement('form');
  form.innerHTML = `
    <input type="text" class="todo-input" placeholder="TODOを入力..." />
    <button type="submit">追加</button>
  `;
 
  const list = document.createElement('ul');
  list.className = 'todo-list';
 
  const stats = document.createElement('div');
  stats.className = 'todo-stats';
 
  root.append(form, list, stats);
 
  // 状態管理
  let todos = [];
  let nextId = 1;
 
  function updateStats() {
    const total = todos.length;
    const completed = todos.filter(t => t.done).length;
    stats.textContent = `全 ${total} 件 / 完了 ${completed} 件 / 残り ${total - completed} 件`;
  }
 
  function renderTodo(todo) {
    const li = document.createElement('li');
    li.dataset.id = todo.id;
    li.className = todo.done ? 'todo-item completed' : 'todo-item';
 
    li.innerHTML = `
      <span class="todo-text">${escapeHtml(todo.text)}</span>
      <button data-action="toggle">${todo.done ? '戻す' : '完了'}</button>
      <button data-action="delete">削除</button>
    `;
 
    return li;
  }
 
  function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
  }
 
  // フォーム送信
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const input = form.querySelector('.todo-input');
    const text = input.value.trim();
 
    if (!text) {
      input.classList.add('error');
      return;
    }
 
    input.classList.remove('error');
    const todo = { id: nextId++, text, done: false };
    todos.push(todo);
 
    list.appendChild(renderTodo(todo));
    updateStats();
    input.value = '';
    input.focus();
  });
 
  // イベント委任で TODO の操作を処理
  list.addEventListener('click', (e) => {
    const actionBtn = e.target.closest('[data-action]');
    if (!actionBtn) return;
 
    const li = actionBtn.closest('li[data-id]');
    if (!li) return;
 
    const id = Number(li.dataset.id);
    const action = actionBtn.dataset.action;
 
    if (action === 'toggle') {
      const todo = todos.find(t => t.id === id);
      if (todo) {
        todo.done = !todo.done;
        li.classList.toggle('completed');
        li.querySelector('.todo-text').style.textDecoration =
          todo.done ? 'line-through' : 'none';
        actionBtn.textContent = todo.done ? '戻す' : '完了';
        updateStats();
      }
    }
 
    if (action === 'delete') {
      todos = todos.filter(t => t.id !== id);
      li.remove();
      updateStats();
    }
  });
 
  updateStats();
}
 
// 使用: createTodoApp('#app');

// ---- 演習2の解答例 ----
 
function createDOMMutationLogger(targetSelector, logSelector) {
  const target = document.querySelector(targetSelector);
  const logContainer = document.querySelector(logSelector);
  let observer = null;
  let isObserving = false;
  let logEntries = [];
 
  function formatTime() {
    return new Date().toISOString().split('T')[1].split('.')[0];
  }
 
  function addLogEntry(type, detail) {
    const entry = { time: formatTime(), type, detail };
    logEntries.push(entry);
 
    const div = document.createElement('div');
    div.className = `log-entry log-${type}`;
    div.innerHTML = `
      <span class="log-time">[${entry.time}]</span>
      <span class="log-type">${type}</span>
      <span class="log-detail">${escapeHtml(detail)}</span>
    `;
    logContainer.appendChild(div);
    logContainer.scrollTop = logContainer.scrollHeight;
  }
 
  function escapeHtml(str) {
    const el = document.createElement('span');
    el.textContent = str;
    return el.innerHTML;
  }
 
  function startObserving() {
    if (isObserving) return;
 
    observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        switch (mutation.type) {
          case 'childList':
            mutation.addedNodes.forEach(node => {
              if (node.nodeType === Node.ELEMENT_NODE) {
                addLogEntry('childList',
                  `追加: <${node.tagName.toLowerCase()}> → ${getPath(mutation.target)}`);
              }
            });
            mutation.removedNodes.forEach(node => {
              if (node.nodeType === Node.ELEMENT_NODE) {
                addLogEntry('childList',
                  `削除: <${node.tagName.toLowerCase()}> from ${getPath(mutation.target)}`);
              }
            });
            break;
          case 'attributes':
            addLogEntry('attributes',
              `属性変更: ${mutation.attributeName} on ${getPath(mutation.target)}`);
            break;
          case 'characterData':
            addLogEntry('characterData',
              `テキスト変更: "${mutation.oldValue?.substring(0, 30)}..." → "${mutation.target.textContent.substring(0, 30)}..."`);
            break;
        }
      }
    });
 
    observer.observe(target, {
      childList: true,
      attributes: true,
      characterData: true,
      subtree: true,
      attributeOldValue: true,
      characterDataOldValue: true,
    });
 
    isObserving = true;
    addLogEntry('system', '監視を開始しました');
  }
 
  function stopObserving() {
    if (!isObserving || !observer) return;
    observer.disconnect();
    isObserving = false;
    addLogEntry('system', '監視を停止しました');
  }
 
  function getPath(el) {
    const parts = [];
    while (el && el !== document.body) {
      let selector = el.tagName.toLowerCase();
      if (el.id) selector += `#${el.id}`;
      parts.unshift(selector);
      el = el.parentElement;
    }
    return parts.join(' > ');
  }
 
  function clearLog() {
    logEntries = [];
    logContainer.innerHTML = '';
  }
 
  return { startObserving, stopObserving, clearLog };
}

// ---- 演習3の解答例 ----
 
class ModalDialog extends HTMLElement {
  static get observedAttributes() {
    return ['open'];
  }
 
  constructor() {
    super();
    this._shadow = this.attachShadow({ mode: 'open' });
    this._shadow.innerHTML = `
      <style>
        :host {
          display: none;
          position: fixed;
          inset: 0;
          z-index: var(--modal-z-index, 1000);
        }
 
        :host([open]) {
          display: flex;
          justify-content: center;
          align-items: center;
        }
 
        .backdrop {
          position: fixed;
          inset: 0;
          background: var(--modal-backdrop-color, rgba(0, 0, 0, 0.5));
          backdrop-filter: blur(var(--modal-backdrop-blur, 2px));
        }
 
        .dialog {
          position: relative;
          background: var(--modal-bg, #ffffff);
          border-radius: var(--modal-radius, 12px);
          box-shadow: var(--modal-shadow, 0 20px 60px rgba(0, 0, 0, 0.3));
          max-width: var(--modal-max-width, 500px);
          width: 90%;
          max-height: 85vh;
          overflow: auto;
          animation: modal-enter 0.2s ease-out;
        }
 
        @keyframes modal-enter {
          from {
            opacity: 0;
            transform: translateY(-20px) scale(0.95);
          }
          to {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }
 
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 20px;
          border-bottom: 1px solid var(--modal-border-color, #e2e8f0);
        }
 
        .close-btn {
          background: none;
          border: none;
          font-size: 1.5em;
          cursor: pointer;
          padding: 4px 8px;
          border-radius: 4px;
          color: var(--modal-close-color, #718096);
        }
 
        .close-btn:hover {
          background: var(--modal-close-hover-bg, #f7fafc);
        }
 
        .body {
          padding: 20px;
        }
 
        .footer {
          padding: 12px 20px;
          border-top: 1px solid var(--modal-border-color, #e2e8f0);
          display: flex;
          justify-content: flex-end;
          gap: 8px;
        }
 
        .footer:empty {
          display: none;
        }
      </style>
 
      <div class="backdrop" part="backdrop"></div>
      <div class="dialog" role="dialog" aria-modal="true" part="dialog">
        <div class="header" part="header">
          <slot name="title"><span>ダイアログ</span></slot>
          <button class="close-btn" aria-label="閉じる" part="close-btn">&times;</button>
        </div>
        <div class="body" part="body">
          <slot></slot>
        </div>
        <div class="footer" part="footer">
          <slot name="footer"></slot>
        </div>
      </div>
    `;
 
    // イベントバインド
    this._shadow.querySelector('.backdrop').addEventListener('click', () => {
      this.close();
    });
 
    this._shadow.querySelector('.close-btn').addEventListener('click', () => {
      this.close();
    });
 
    this._onKeyDown = this._handleKeyDown.bind(this);
  }
 
  connectedCallback() {
    document.addEventListener('keydown', this._onKeyDown);
  }
 
  disconnectedCallback() {
    document.removeEventListener('keydown', this._onKeyDown);
  }
 
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'open') {
      if (newValue !== null) {
        this._onOpen();
      } else {
        this._onClose();
      }
    }
  }
 
  open() {
    this.setAttribute('open', '');
  }
 
  close() {
    this.removeAttribute('open');
  }
 
  _onOpen() {
    // フォーカスをダイアログ内に移動
    const dialog = this._shadow.querySelector('.dialog');
    const firstFocusable = dialog.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
    if (firstFocusable) {
      requestAnimationFrame(() => firstFocusable.focus());
    }
 
    this.dispatchEvent(new CustomEvent('modal-open', { bubbles: true, composed: true }));
  }
 
  _onClose() {
    this.dispatchEvent(new CustomEvent('modal-close', { bubbles: true, composed: true }));
  }
 
  _handleKeyDown(e) {
    if (!this.hasAttribute('open')) return;
 
    if (e.key === 'Escape') {
      this.close();
      return;
    }
 
    // フォーカストラップ
    if (e.key === 'Tab') {
      const dialog = this._shadow.querySelector('.dialog');
      const focusables = [
        ...dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
        ...this.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
      ];
 
      if (focusables.length === 0) return;
 
      const first = focusables[0];
      const last = focusables[focusables.length - 1];
 
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  }
}
 
customElements.define('modal-dialog', ModalDialog);
 
// HTML での使用:
// <modal-dialog id="my-modal">
//   <h2 slot="title">確認</h2>
//   <p>この操作を実行しますか?</p>
//   <div slot="footer">
//     <button onclick="document.getElementById('my-modal').close()">キャンセル</button>
//     <button onclick="confirm()">OK</button>
//   </div>
// </modal-dialog>