Web標準 API

フレームワークの機能に頼る前に、ブラウザが標準で提供しているAPIを知ることは、軽量で高性能なアプリを作るための近道です。

Intersection Observer

要素が画面内に入ったことを検知するAPIです。無限スクロールや画像の遅延読み込み（Lazy Loading）に最適です。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('要素が画面内に入りました！');
    }
  });
});

observer.observe(targetElement);

Storage API

• localStorage: ブラウザを閉じても永続化されるデータ
• sessionStorage: タブを閉じると消える一時的なデータ
• IndexedDB: 大容量で構造化されたデータを扱うための仕組み

Fetch API

ネットワークリクエストの標準です。古い XMLHttpRequest に代わり、Promiseベースの直感的な記述が可能です。

まとめ

Web標準 APIを使いこなすことで、ライブラリへの依存（Vendor Lock-in）を減らし、将来にわたって保守しやすいコードを書くことができます。