ネイティブ JavaScript API の概要: MutationObserver、IntersectionObserver、および History API

最新の Web アプリケーションでは、応答性、効率性、動的な対話性が求められます。 MutationObserver、IntersectionObserver、History API などのネイティブ JavaScript API を使用すると、開発者は外部ライブラリを必要とせずに、これらの課題に直接対処できます。これらの API を詳しく調査し、そのユースケースを理解し、その能力を効果的に活用する方法を学びましょう。

突然変異観察者

概要:

MutationObserver インターフェイスは DOM ツリー内の変更を監視し、現在非推奨になっている Mutation Events を置き換えます。ノードの追加、削除、変更を検出できるため、動的アプリケーションにとって不可欠なツールとなります。

主な機能:

• DOM ツリーへの変更を監視します。
• 属性、子ノード、テキスト コンテンツへの変更を検出します。
• 非同期で動作し、パフォーマンスへの影響を最小限に抑えます。

Q. MutationObserver はどのように機能しますか?

MutationObserver インスタンスは、DOM 内で指定された変更が発生するたびにトリガーされるコールバック関数を使用して作成されます。

MutationObserver のオプション

• サブツリー: ターゲット ノードとそのすべての子孫を監視します。

• childList: 子ノードの追加または削除を監視します。

• attributes: ターゲット ノードの属性への変更を追跡します。

• attributeFilter: 監視を指定された属性に制限します。

• attributeOldValue: 属性が変更される前の以前の値を取得します。

• characterData: ノードのテキスト コンテンツへの変更を監視します。

• characterDataOldValue: 変更前のテキスト コンテンツの前の値を取得します。

HTML 構文

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

使用例:

• UI 要素を動的に更新します。
• DOM 変更に対するカスタム動作を実装します。
• サードパーティのライブラリの変更を監視します。

交差点観察者

概要:

IntersectionObserver は、ルート コンテナまたはビューポートに対するターゲット要素の可視性の変化を非同期的に監視するインターフェイスです。これは、遅延読み込み、無限スクロール、分析によく使用されます。

主な機能:

• 要素の可視性を効率的に追跡します。
• スクロール イベント リスナーへの依存を軽減します。
• しきい値をきめ細かく制御できます。

Q.交差点オブザーバーの仕組み

Intersection Observer API は、次のいずれかの状況が発生したときに呼び出されるコールバックをトリガーします。

1. ターゲット要素は、デバイスのビューポートまたは指定されたルート要素と交差します。

2. オブザーバーが初めてターゲット要素の監視を開始したとき。

交差点オブザーバーのオプション

• root: 可視性をチェックするためのビューポートとして使用される要素。指定しない場合、デフォルトはブラウザのビューポートです。

• rootMargin: ルートの周囲のマージン。文字列として指定します (例: "10px 20px")。観測可能範囲を拡大または縮小します。

• しきい値: コールバックをトリガーするために必要な可視性のパーセンテージを示す、0 から 1 までの値 (または値の配列)。

Q.交差はどのように計算されますか?

Intersection Observer API は、長方形を使用して交差エリアを計算します。

• 不規則な形状の要素は、それらを完全に囲む最小の長方形内に収まるものとして処理されます。

• 部分的に表示される要素の場合、すべての表示部分を含む最小の長方形が使用されます。これにより、要素の形状や可視性に関係なく、測定の一貫性が確保されます。

基本構文

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

使用例:

• 画像またはビデオの遅延読み込み。
• 無限スクロールを実装します。
• 特定の要素に対するユーザー エンゲージメントを追跡します。

高度な機能:

• 複数のしきい値: しきい値配列を使用して部分的な可視性を観察します。
• ルート マージン: 早期検出のためにビューポートの境界を拡張します。

履歴API

概要:

History API を使用すると、Web アプリケーションでブラウザのセッション履歴を操作できます。これにより、ページをリロードせずにエントリを追加、置換、または変更できます。これは、シングル ページ アプリケーション (SPA) の基礎です。

主な機能:

• pushState と replaceState を使用して履歴スタックを管理します。
• popstate を使用してナビゲーション イベントをリッスンします。
• ページ全体をリロードせずにブラウザのアドレス バーを更新します。

基本構文:

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is visible in the viewport.')
      // Optionally stop observing
      observer.unobserve(entry.target)
    }
  })
})

// Target elements to observe
const targetElement = document.querySelector('.lazy-load')

// Start observing
observer.observe(targetElement)

使用例:

• 動的ルーティングを使用して SPA を構築します。
• ブラウザ ナビゲーションを使用してアプリケーションの状態を管理します。
• カスタム ナビゲーション エクスペリエンスを作成します。
• 重要な注意事項:
• 古いブラウザに対して適切なフォールバックを確保します。
• SEO を向上させるために URL パラメーターと組み合わせます。

これらの API の組み合わせ

これらの API は連携して、洗練された Web アプリケーションを作成できます。例:

• MutationObserverを使用して、動的 DOM 変更を監視します。
• DOM の変更によって追加された コンテンツの遅延読み込み に IntersectionObserver を実装します。
• 履歴 API を利用して、アプリケーション内で シームレスなナビゲーション を提供します。

使用例:

ブログ アプリケーションは、ユーザーが下にスクロールすると (無限スクロール)、投稿を動的に読み込みます。また、ページをリロードせずに URL を更新して現在の投稿を反映するため、ユーザー エクスペリエンスが向上し、SEO が向上します。

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

結論

MutationObserver、IntersectionObserver、および History API は、動的でインタラクティブな Web アプリケーションのための強力なネイティブ ソリューションを提供します。それらの機能を理解し、それらを効果的に統合することで、開発者は外部ライブラリに大きく依存することなく、パフォーマンスが高く機能が豊富なアプリケーションを構築できます。