この記事について この記事は、生成AIを活用した自動生成フローで作成しています。 MDNのIntersection Observer APIの説明を確認し、架空のタスクカードをスクロールして可視率の条件を比べる教材を制作しました。JavaScriptの構文とDOM・Observerの模擬試験は実施しましたが、実ブラウザ・WordPress表示は未確認です。
検証ステータス：🧪 JavaScript構文・モック試験確認済み／ブラウザ実機未確認
「スクロールして、カードがある程度見えたら処理を始めたい」。そんなときに役立つのが、ブラウザ標準の IntersectionObserver です。カードが画面の中に入ったかどうかだけでなく、25％見えた場合と75％見えた場合の違いを、架空のタスク3枚で観察します。
| 項目 | この教材の条件 |
|---|---|
| 対象 | IntersectionObserver対応ブラウザ |
| 使う技術 | JavaScript標準API |
| 費用・認証 | 無料・ログイン不要 |
| 外部通信 | 外部ライブラリ・API送信なし |
| データ | 架空のタスクカード3枚 |
| 確認範囲 | 構文・モック試験のみ |
まず試す：カードをスクロールして色の変化を見る
ライブデモを開く（公開ページの到達・実ブラウザ動作は未確認）／GitHubの教材とREADME
デモの青い枠の中をスクロールし、カードの枠が緑色になる場所を探します。
「可視率の条件」を25％から75％へ変更し、同じ位置で判定が変わるか見ます。
「観察停止」を押してスクロールし、文字表示が更新されないことを確かめます。「観察再開」で元に戻せます。
操作はデモの冒頭に置いてあります。マウスを使わない場合は、青い枠を選んで矢印キーでもスクロールできます。ライブデモが404なら、後半の「自分のPCで動かす」を参照してください。
操作後はここを見る：25％と75％では何が違う？
カードの下には「通知時の可視率」と「条件を満たす／条件未満」が文字で表示されます。緑色だけで判定を伝えないため、色の区別が難しい場合も内容を読めます。
| カードの可視率 | 条件25％ | 条件75％ |
|---|---|---|
| 10％ | 条件未満 | 条件未満 |
| 30％ | 満たす | 条件未満 |
| 80％ | 満たす | 満たす |
これはコードから予測した判定表であり、実ブラウザのスクリーンショットや実測結果ではありません。実際の数値は、枠の高さ、カードの高さ、スクロール位置によって変わります。
観察のポイント 表示される割合は「最後にIntersectionObserverが通知した時点」の値です。スクロールに合わせて1％刻みで連続更新される測定器ではありません。条件をまたいだときなどに非同期で通知される仕組みです。
なぜ動く？：画面全体ではなく青い枠を基準にする
IntersectionObserverは、指定した要素が基準領域（root）とどの程度交差しているかを非同期に知らせます。今回のrootはブラウザ画面全体ではなく、青いスクロール領域です。3枚のカードをその中の監視対象として登録します。
flowchart TD
A["青い枠内をスクロール"] --> B["交差率を計算"]
B --> C["閾値をまたぐ"]
C --> D["Observerが通知"]
D --> E["文字とカードの枠を更新"]
intersectionRatio は、対象カードの面積のうち、rootの表示範囲と交差する割合を0〜1で表します。例えば0.30なら30％です。画面上で人が本当に読んだか、別のウィンドウに隠れていないか、注意を向けていたかまでは示しません。
完成版の核心部分を抜粋すると次のようになります。
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
const ratio = entry.isIntersecting
? entry.intersectionRatio : 0;
const passed = ratio > 0 && ratio >= 0.25;
entry.target.dataset.visible = passed ? "yes" : "no";
}
}, { root: document.getElementById("viewport"),
threshold: [0, 0.25, 1] });
これは理解用の抜粋で、完成コードではありません。実際のサンプルでは閾値を選択欄から読み、各カードの状態を文字で示し、観察停止・再開・ページ離脱時の後始末も実装しています。コード全文はGitHubへ分離しています。
1か所変えてみる：75％を50％へ
GitHubサンプルの index.html にある「75％」の選択肢を「50％」に変えて、再読み込みします。可視率60％付近のカードなら、変更前の75％では条件未満、変更後の50％では条件を満たすと予想できます。
| 可視率60％ | 判定 |
|---|---|
| 75％を条件にする | 条件未満 |
| 50％を条件にする | 満たす |
変更するのは選択肢の値と表示名だけです。実験後は75％へ戻します。Observerの閾値は生成後に書き換えられないため、サンプルでは条件を変更した際に古い監視を解除し、新しいObserverを作って監視を開始します。単に表示文言を変更するだけでは判定は変わりません。
自分のPCで動かす
固定コミットのHTMLとJavaScriptを同じフォルダに保存し、HTMLをブラウザで開きます。ビルドツール、外部CDN、APIキーは不要です。
ネットワーク接続を前提にした外部コードは読み込みません。公開用のHTMLにある青い背景はDaily Codeデモ専用で、WordPress記事本文へ未検証の独自CSSを持ち込むものではありません。WordPressの記事の青い引用枠は、サイト既存の表示ルールに委ねます。
うまく動かないとき
| 症状 | 確認すること |
|---|---|
| デモが404 | Pages反映未確認。ローカルで開く |
| 白い画面 | HTMLとapp.jsの同じ配置 |
| 緑色にならない | 青い枠の中をスクロールしたか |
| 数値が変わらない | 観察停止中か、閾値を跨いだか |
| 未対応と表示 | ブラウザのAPI対応状況 |
| 印刷で動かない | PDFは静止表示。表を読む |
「先頭に戻す」を押せばスクロール位置を戻せます。観察停止中は、最後の通知時点の状態を維持します。再開すると現在の位置を新しく観察します。ページを離れるときは disconnect() で監視を解除します。
仕事・学習で使うなら
例えば、研修教材で「次の章が表示領域に入ったら、補足説明を出す」仕組みを考えるときに役立ちます。画像を読み込むタイミングを遅らせる設計や、長いダッシュボードのどのカードが見えているかを調べる実験にも応用できます。
ただし、表示領域に入ったことと読了・理解・本人確認は別です。業務の進捗や学習完了の証拠に、IntersectionObserverの通知だけを使うべきではありません。アクセス解析や閲覧追跡を実装する場合は、別途プライバシーや同意、利用目的を検討する必要があります。この教材は閲覧履歴の外部送信を実装していません。
追加実験：見える割合を正しく理解する
25％と75％という数字は、ページ全体のスクロール位置ではなく、監視対象が基準となる領域とどの程度重なったかを表す割合です。同じスクロール距離でも、カード自身の高さが違えば割合の変化は異なります。例えば小さなカードは少し動かすだけで大部分が見えることがありますが、大きなカードは一度に全体が入らない場合もあります。まずカードの高さと観測範囲を確認し、数字だけで表示の成否を判断しないでください。
Observerの通知は、スクロールを1ピクセル動かすたびに必ず届くわけではありません。指定した境界を横切るタイミングなどで変化を知らせる仕組みです。変化の途中で表示が滑らかに連続更新されなくても、指定の25％・75％を超えたかどうかを確認する用途では正常な場合があります。スクロール操作だけでは変化しない場合は、監視開始時点で対象がすでに境界を超えていないかも確かめます。
基準の領域をブラウザの画面全体にするか、スクロールできる枠の内側にするかで結果が変わります。教材の青い枠を基準にする場合、ブラウザの最上部へ戻してもカードが枠の中で見えている可能性があります。rootとrootMarginなどの設定は見え方を変えるため、実験では一度に一つだけ変更し、見える割合と変化する表示を記録します。
監視停止の操作は、カードをページから消すこととは別です。監視を停止した後にスクロールしても新しい判定が通知されない場合、画面が壊れたとは限りません。再開後にどのカードから通知が来るか、リセットしたとき以前の表示が残っていないかを比べてください。広告や画像の読み込み判定に応用する場合も、「見えた」を「読まれた」「クリックされた」と同じ意味にしないことが重要です。
公式資料
MDN：Intersection Observer API — root、threshold、intersectionRatio、非同期通知（2026-11-01確認）
MDN：IntersectionObserver — observe、disconnect、設定の不変性（2026-11-01確認）
GitHubサンプル
検証範囲： JavaScript構文とDOM・IntersectionObserverモックによる9グループの操作・判定検査を実施。GitHub mainへのサンプル3ファイルの保存と読戻しを確認。実ブラウザ、GitHub Pages到達、WordPressの青い引用枠、アイキャッチ、モバイル、A4/PDF印刷は未確認です。アイキャッチ画像は未制作・未登録であり、架空のメディアIDを指定していません。
