知っておきたいWeb API — fetch・Storage・IntersectionObserver

// JavaScriptの標準機能
const names = ['Taro', 'Hanako'].map((name) => name.toUpperCase());
 
// ブラウザのWeb API
const button = document.querySelector('button');
button.addEventListener('click', () => {
  console.log('clicked');
});

const response = await fetch('/api/users');
const users = await response.json();
 
console.log(users);

async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
 
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }
 
  return response.json();
}

const response = await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Taro',
    role: 'admin',
  }),
});
 
if (!response.ok) {
  throw new Error(`Failed to create user: ${response.status}`);
}
 
const result = await response.json();

const request = new Request('/api/users', {
  method: 'GET',
  headers: {
    Accept: 'application/json',
  },
});
 
const response = await fetch(request);

const response = await fetch('/api/profile');
 
console.log(response.status); // 200
console.log(response.headers.get('content-type')); // "application/json; charset=utf-8"
 
const profile = await response.json();

const controller = new AbortController();
 
const request = fetch('/api/search?q=javascript', {
  signal: controller.signal,
});
 
// もう結果が不要になったら中断する
controller.abort();
 
try {
  await request;
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('request was aborted');
  } else {
    throw error;
  }
}

localStorage.setItem('theme', 'dark');
 
const theme = localStorage.getItem('theme');
console.log(theme); // "dark"
 
localStorage.removeItem('theme');

const settings = {
  theme: 'dark',
  sidebarOpen: true,
};
 
localStorage.setItem('settings', JSON.stringify(settings));
 
const saved = localStorage.getItem('settings');
const parsed = saved === null ? null : JSON.parse(saved);

await cookieStore.set({
  name: 'theme',
  value: 'dark',
  expires: Date.now() + 86400000,
  path: '/',
});
 
const theme = await cookieStore.get('theme');
console.log(theme?.value); // "dark"
 
await cookieStore.delete('theme');

await cookieStore.set('lang', 'ja');

cookieStore.addEventListener('change', (event) => {
  for (const { name, value } of event.changed) {
    console.log('changed', name, value);
  }
 
  for (const { name } of event.deleted) {
    console.log('deleted', name);
  }
});

const target = document.querySelector('#load-more');
 
const observer = new IntersectionObserver(
  (entries) => {
    const entry = entries[0];
 
    if (entry.isIntersecting) {
      console.log('load next page');
    }
  },
  {
    root: null,
    rootMargin: '200px 0px',
    threshold: 0,
  },
);
 
observer.observe(target);

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
 
    entry.target.classList.add('is-visible');
    observer.unobserve(entry.target);
  }
});
 
document.querySelectorAll('.fade-in').forEach((element) => {
  observer.observe(element);
});

const target = document.querySelector('#comments');
 
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      console.log('DOM children changed');
    }
  }
});
 
observer.observe(target, {
  childList: true,
  subtree: true,
});

observer.observe(target, {
  attributes: true,
  attributeFilter: ['aria-expanded', 'hidden'],
});

const url = new URL('/api/search', location.origin);
url.searchParams.set('q', 'JavaScript 入門');
url.searchParams.set('page', '1');
 
console.log(url.toString());
// "https://example.com/api/search?q=JavaScript+%E5%85%A5%E9%96%80&page=1"

const params = new URLSearchParams(location.search);
const page = Number(params.get('page') ?? '1');

const button = document.querySelector('#copy');
 
button.addEventListener('click', async () => {
  await navigator.clipboard.writeText(location.href);
});