こんにちは。虎の穴ラボのはっとりです。
この記事は「虎の穴ラボ夏のアドベントカレンダー」12日目の記事です。
11日目は大場さんによる「babylon.js でスイカ割れないゲームを作った」が投稿されました。
13日目はA.M.さんによる「【Go言語】アスキーアートでダンジョンから脱出するゲームを作ってみた」が投稿されます。こちらもぜひご覧ください。
はじめに
今回はブラウザで使えるWeb APIの中からObserverと名前が付くAPIを紹介します。
※タイトルではObserver APIと言いましたが特にそういう括りの名称があるわけではありません。
Observerは、観察者、観測者、監視者といった意味があります。
紹介するAPIは名前の通り、ブラウザ内の何らかの変化を検出することができるAPIです。
紹介するAPI
- IntersectionObserver
- ResizeObserver
- MutationObserver
- PerformanceObserver
- ReportingObserver
IntersectionObserver
https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver
日本語では「交差オブザーバー API」とも表現されるAPIで、要素の可視状態を監視するAPIです。
See the Pen IntersectionObserver1 by Tora Hattori (@toralab-hattori) on CodePen.
コンストラクタ引数に検出時の処理を書き、
const observer = new IntersectionObserver(observerCallback);
observe メソッドに監視対象を渡します。
observer.observe(content);
監視対象から外す場合は unobserve メソッドを使います。
observer.unobserve(content);
細かいオプションの違いなどはありますが、*Observer APIはどれも基本上記のようなインターフェースになっています。
スクロールでの表示・非表示以外に単純な表示・非表示の検出にも利用できます。
See the Pen IntersectionObserver2 by Tora Hattori (@toralab-hattori) on CodePen.
Media Queryなど特定の条件で見えなくなった場合などにも対応できます。
要素の属性を見ているわけではないので、例のように親要素ごと見えなくなった場合にも対応できます。
自分で制御できない、ライブラリなどによる変化にも対応できるようになります。
ResizeObserver
https://developer.mozilla.org/ja/docs/Web/API/ResizeObserver
要素のサイズを監視するAPIです。
See the Pen ResizeObserver by Tora Hattori (@toralab-hattori) on CodePen.
こちらも親要素やブラウザサイズの変化による要素のサイズ変化も検知できます。
document.bodyを渡すことにより画面全体サイズも検出可能です。
observer.observe(document.body);
MutationObserver
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver
属性や子要素の追加などを監視するAPIです。
See the Pen MutationObserver by Tora Hattori (@toralab-hattori) on CodePen.
observeメソッドの第2引数で監視する対象を指定します。
observer.observe(sushi, { attributes: true, childList: true });
subtree: trueを指定すると子要素より下の階層まで監視対象になります。
observer.observe(sushi, { attributes: true, childList: true, subtree: true });
PerformanceObserver
https://developer.mozilla.org/ja/docs/Web/API/PerformanceObserver
パフォーマンス測定イベントを監視するAPIです。
例ではボタンstartを押してからstopを押すまでの時間を計測できます。
See the Pen PerformanceObserver by Tora Hattori (@toralab-hattori) on CodePen.
このAPIはWeb Workerでも利用可能です。
ReportingObserver
https://developer.mozilla.org/en-US/docs/Web/API/ReportingObserver
こちらのAPIはまだ実験的な機能のようで Chromium 系のブラウザでしか使えないようです。
非推奨機能の利用やクラッシュレポートを検出できるようですが、
私の理解がまだ甘いのでコード例は割愛させていただきます。
まとめ
以上、Observerと名前が付くAPIを紹介しました。
従来のイベントによる検出方法よりパフォーマンスが良くなったり、今まで検出できなかった値が取れるようになったりするので、既存のWebアプリケーションに組み込みを検討してみるのも良いのではないでしょうか。
Internet Explorer がサポート切れになり、考慮しなくて良くなったので導入もしやすいのではないかと思います。
P.S.
虎の穴ラボでは、私たちと一緒に新しいオタク向けサービスを作る仲間を募集しています。
詳しい採用情報は以下をご覧ください。
