JavaScript

IntersectionObserver入門:初心者向けガイド

IntersectionObserverとは?

IntersectionObserverは、ウェブページの特定の要素がビューポート(ユーザーの画面)に入るかどうかを非同期で監視するJavaScript APIです。
これにより、スクロール位置に基づいて動的なビジュアルエフェクトを実装できます。

IntersectionObserverを使う場面

  • 遅延読み込み(Lazy Loading):画像や動画などのコンテンツを、ユーザーがそれらを必要とする時まで読み込まないようにします。
  • スクロールアニメーション:ユーザーがページをスクロールするときに要素をアニメーションさせる。
  • インフィニットスクロール:ユーザーがページの最下部に達したときに追加コンテンツを読み込む。

メリットとデメリット

メリット

  • パフォーマンスの向上:不要なJavaScriptの実行を減らすことができます。
  • ユーザーエクスペリエンスの向上:コンテンツの遅延読み込みにより、ページの初期読み込み時間を短縮できます。

デメリット

  • ブラウザの互換性:一部の古いブラウザではサポートされていない可能性があります。
  • 複雑さ:初心者には理解や実装が少し難しいかもしれません。

実装デモ:スクロールに応じてヘッダーメニューの色が変わる

以下のコードは、IntersectionObserverを使って、ページ内のスクロールに応じて各セクションエリアがビューポート内に入ると、固定ヘッダーメニューのテキストリンクの色が変わるデモページを実装してみます。

HTMLコード

このHTMLコードには、セクション1からセクション4までの4つのセクションが含まれており、各セクションには独自のIDが割り当てられています。これにより、IntersectionObserverを使用して各セクションのビューポート内への入出を監視し、対応するナビゲーションリンクのスタイルを変更することが可能になります。

<header>
    <nav>
        <ul>
            <li><a href="#section1">セクション1</a></li>
            <li><a href="#section2">セクション2</a></li>
            <li><a href="#section3">セクション3</a></li>
            <li><a href="#section4">セクション4</a></li>
        </ul>
    </nav>
</header>
<!-- セクション1 -->
<section id="section1">
    <h1>IntersectionObserverを使って、<br>スクロールに応じて各セクションエリアがビューポート内に入ると、<br>ヘッダーテキストリンクの色が変わります。</h1>
    <h2>セクション1</h2>
    <p>ここはセクション1の内容です。</p>
</section>

<!-- セクション2 -->
<section id="section2">
    <h2>セクション2</h2>
    <p>ここはセクション2の内容です。</p>
</section>

<!-- セクション3 -->
<section id="section3">
    <h2>セクション3</h2>
    <p>ここはセクション3の内容です。</p>
</section>

<!-- セクション4 -->
<section id="section4">
    <h2>セクション4</h2>
    <p>ここはセクション4の内容です。スクロールすると、ヘッダーメニューのリンク色が変わります。</p>
</section>

CSS

このCSSは、ヘッダー、ナビゲーションメニュー、およびセクションエリアのスタイルを定義します。各セクションには異なる背景色を設定し、視覚的な区別をつけています。これにより、ユーザーがスクロールして各セクションを確認するときに、視覚的なフィードバックが得られ、IntersectionObserverが機能していることが明確になります。

<style>
body {
  font-size: 16px;
  text-align: left;
  margin: 0;
  padding-top: 60px;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 10px 0 20px 0;
  line-height: 1.8em;
}
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10;
}
nav ul {
    list-style: none;
    padding: 20px 0;
    margin: 0;
    display: flex;
    justify-content: center;
}
nav ul li {
    margin: 0 10px;
}
nav ul li a {
    text-decoration: none;
    color: black;
}
section {
    padding: 20px;
    margin: 200px 0;
    border: 1px solid #ddd;
    text-align: center;
}
/* セクション固有のスタイル */
#section1 { background-color: #f9f9f9; }
#section2 { background-color: #e9e9e9; }
#section3 { background-color: #d9d9d9; }
#section4 { background-color: #c9c9c9; }
</style>

JavaScriptコード (IntersectionObserver)

このJavaScriptコードでは、各セクション要素をIntersectionObserverで監視し、そのセクションがビューポート内に入るかどうかに基づいて、関連するナビゲーションリンクのスタイルを変更します。ビューポート内に入ったセクションのリンクは青色かつ太字になり、ビューポート外に出たセクションのリンクは黒色かつ通常のフォントウェイトに戻ります。

<script>
document.addEventListener('DOMContentLoaded', () => {
    const options = {
        root: null,
        rootMargin: '0px',
        threshold: 1.0
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            const id = entry.target.getAttribute('id');
            const menuLink = document.querySelector(`nav ul li a[href="#${id}"]`);

            if (entry.isIntersecting) {
                menuLink.style.color = 'blue';
                menuLink.style.fontWeight = 'bold';
            } else {
                menuLink.style.color = 'black';
                menuLink.style.fontWeight = 'normal';
            }
        });
    }, options);

    // セクションごとにObserverを設定
    document.querySelectorAll('section').forEach((section) => {
        observer.observe(section);
    });
});
</script>

IntersectionObserverを使ってスクロールに応じてヘッダーメニューの色が変わるデモページ

スクロールすることでビューポート(ブラウザ)内に表示されてるセクションエリア(4セクション)のみ、ヘッダー固定テキストリンクが青文字に変わります。ビューポート内に表示されてないセクションエリアのヘッダーテキストリンクは黒文字になります。

以下のリンクから実装したデモページが確認できます。

IntersectionObserverを使ってスクロールに応じてヘッダーメニューの色が変わるデモページ

JavaScriptのscrollイベントとの比較

scrollイベントは、ユーザーがページをスクロールするたびに発生するイベントです。これにより、ページの任意の位置で何かをトリガーすることができますが、頻繁なイベント発生はパフォーマンスに影響を与える可能性があります。

IntersectionObserverは、特定の要素がビューポートに入るかどうかを監視し、必要なときにのみ処理を実行します。これにより、パフォーマンスの問題を軽減しつつ、動的な機能を実装できます。

まとめ

IntersectionObserverは、現代のウェブ開発で多くの可能性を提供する強力なツールです。初心者のエンジニアにとっては、これを学ぶことで、パフォーマンスとユーザーエクスペリエンスを向上させる方法を理解する絶好の機会です。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。