Web API

// GET リクエスト
async function fetchUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");

  // HTTP エラーチェック（fetch は 404 でも reject しない）
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }

  const users = await response.json();
  return users;
}

// POST リクエスト
async function createPost(title, body) {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ title, body, userId: 1 })
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return await response.json();
}

// AbortController によるリクエストのキャンセル
async function fetchWithCancel(url) {
  const controller = new AbortController();

  // 3秒後にキャンセル
  setTimeout(() => controller.abort(), 3000);

  try {
    const response = await fetch(url, { signal: controller.signal });
    return await response.json();
  } catch (err) {
    if (err.name === "AbortError") {
      console.log("リクエストがキャンセルされました");
    }
    throw err;
  }
}

// localStorage の基本操作
localStorage.setItem("username", "田中");
console.log(localStorage.getItem("username")); // "田中"
localStorage.removeItem("username");
localStorage.clear(); // 全データを削除

// オブジェクトの保存（JSON変換が必要）
const settings = {
  theme: "dark",
  fontSize: 16,
  language: "ja"
};

localStorage.setItem("settings", JSON.stringify(settings));
const loaded = JSON.parse(localStorage.getItem("settings"));
console.log(loaded.theme); // "dark"

// ストレージの有無チェック
function storageAvailable(type) {
  try {
    const storage = window[type];
    const test = "__storage_test__";
    storage.setItem(test, test);
    storage.removeItem(test);
    return true;
  } catch (e) {
    return false;
  }
}
console.log(storageAvailable("localStorage")); // true/false

// URL API
const url = new URL("https://example.com/search?q=javascript&page=1#results");

console.log(url.hostname);    // "example.com"
console.log(url.pathname);    // "/search"
console.log(url.hash);        // "#results"

// URLSearchParams の操作
console.log(url.searchParams.get("q"));    // "javascript"
console.log(url.searchParams.get("page")); // "1"

url.searchParams.set("page", "2");
url.searchParams.append("lang", "ja");
console.log(url.toString());
// "https://example.com/search?q=javascript&page=2&lang=ja#results"

// クエリパラメータの反復
for (const [key, value] of url.searchParams) {
  console.log(`${key}: ${value}`);
}

// History API の基本
// pushState: 履歴エントリを追加（ページ遷移なし）
history.pushState(
  { page: "about" },  // state オブジェクト
  "",                  // title（多くのブラウザで無視される）
  "/about"             // URL
);

// replaceState: 現在の履歴エントリを置き換え
history.replaceState({ page: "home" }, "", "/");

// popstate イベント: ブラウザの戻る/進むボタンで発火
window.addEventListener("popstate", (event) => {
  console.log("移動先:", event.state);
  // event.state は pushState で保存したオブジェクト
});

// 履歴の移動
history.back();    // 戻る
history.forward(); // 進む
history.go(-2);    // 2つ前に戻る

// IntersectionObserver: 遅延読み込み（Lazy Loading）
const lazyImages = document.querySelectorAll("img[data-src]");

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;  // data-src を src にコピー
      img.removeAttribute("data-src");
      observer.unobserve(img);    // 読み込み後は監視を停止
    }
  });
}, {
  rootMargin: "200px", // ビューポートの200px手前で発火
  threshold: 0         // 少しでも見えたら
});

lazyImages.forEach(img => imageObserver.observe(img));

// MutationObserver: DOM変更の監視
const targetNode = document.getElementById("app");

const mutationObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === "childList") {
      console.log("子要素が変更されました");
      mutation.addedNodes.forEach(node => {
        console.log("追加:", node.nodeName);
      });
      mutation.removedNodes.forEach(node => {
        console.log("削除:", node.nodeName);
      });
    } else if (mutation.type === "attributes") {
      console.log(`属性 ${mutation.attributeName} が変更されました`);
    }
  });
});

mutationObserver.observe(targetNode, {
  childList: true,    // 子要素の追加・削除を監視
  attributes: true,   // 属性の変更を監視
  subtree: true       // 子孫要素も含めて監視
});

// 監視の停止
// mutationObserver.disconnect();