その要素は本当に「見えている」のか 〜要素の “visibility” に関する考察〜

重要: 2023/9/29追記:
下記に掲載している資料の中身に間違いがありました。checkVisibility()APIが要素のサイズについて確認してくれる旨の記述は誤りで、要素のサイズは確認されません！失礼しました🙇‍♂

-----

第1回 3rdparty.js(https://3rdpartyjs.connpass.com/event/289558/
)で発表した資料です🌝

2ページ目の注意書きにもあるように、gifがふんだんに使われている関係でSpeaker Deckでは内容が伝わりづらくなっています😭
gifにも興味があるよ〜という方は、下記リンクよりpptxファイルを直接ご覧ください！
(資料を無断で二次利用(転載、流用、コピーなどなど)することはなしでお願いします🙇)
https://docs.google.com/presentation/d/1o9bzUOBT6P9Mss8fPcfaX-EZ2lIOAKNS/edit?usp=sharing&ouid=110830955971099412594&rtpof=true&sd=true

テックタッチに興味がある方はこちらから！
https://techtouch.jp

Transcript

1. その要素は本当に「見えている」のか 〜要素の “visibility” に関する考察〜 はじまるよ〜！
2. Speaker Deckでこの資料を読んで下さる方へ • この資料は第1回3rdparty.jsでの発表に使われました🌝 (https://3rdpartyjs.connpass.com/event/289558/) • 当日のLTはお酒をのみながらの時間だったため、かなり柔ら かめの楽しさ満点スライドに仕上がっています✌ • gifがふんだんに使われており、Speaker Deckだと内容が伝 わらない恐れがあります。その際はお手数ですが、概要欄に 記載のリンクから資料をご覧ください！
3. 自己紹介 • canalun (@i_am_canalun) • テックタッチでフロントエンドをやっています ◦ 2022.1 エンジニアとしてテックタッチ入社 ◦ 2018.4 コンサルタントとしてマッキンゼー入社
4. 趣味でやっていること • DOMDOMタイムス (自分のzennで週刊連載👉) • TAPL.ts (TAPLの輪読会👉) オーム社 「型システム 入門 プログラミング言 語と型の理論」
5. 要素が見えているかなんて興味ないよ…… という人います！？
6. FE開発において、要素が見えているかを判 定したいときが実はけっこうある！！ • 「ある要素が見えていると きだけ、うちのプロダクト を起動したい！」 • 「うちのプロダクトの要素 が表示された回数を知りた い！」 wikipediaトップページより
7. FE開発において、要素が見えているかを判 定したいときが実はけっこうある！！ • コンテンツの出し分け、 表示タイミングの制御 • コンテンツの表示・利用 状況の把握 「見えている」 = 「ユーザーにとって見えている」 こういう定義でいきます🌝 wikipediaトップページより
8. 要素が見えない！！！ってどんなとき？ 思いを馳せてみてください
9. 要素が「見えない」ときの代表パターン3つ
10. 要素が「見えない」ときの代表パターン3つ 画面内にない
11. 要素が「見えない」ときの代表パターン3つ 画面内にない もともと見えない
12. 要素が「見えない」ときの代表パターン3つ 画面内にない もともと見えない 他の要素に覆われている
13. 要素が「見えない」ときの代表パターン3つ 画面内にない もともと見えない 他の要素に覆われている ここを起点に 要素の”visibility”を考えます 順番に見ていきますよ〜！🌝🌝
14. 要素の”visibility” その1 画面内に入ってるの？ wikipedia トップページより
15. 要素の”visibility” その2 「もともと」見えるモンなの？？ visibilityの例 opacityや content-visibilityも 関係する(後述) MDN「visibility」より
16. 要素の”visibility” その3 他の要素に覆われていないの？ wikipediaトップページより
17. 要素の”visibility”には色々ある 1. 画面内に入ってるの？ 2. もともと見えるモンなの？ 3. 他の要素に覆われていないの？ → 「見えている」を判定するときには、 どのレベルで判定するかを念頭において、 ロジックを書き分けないといけない！
18. ちょっと待ってよ！実際どう判定するのさ 1. 画面内に入ってるの？ 1. もともと見えるモンなの？ 1. 他の要素に覆われていないの？ ここを 見てみよう！ 今日はなし😭
19. 「もともと見えるモンなの？」の判定は 考えることが多い…… サイズが0: width / height boxがない: display / content-visibility 透明: opacity invisible: visibility 祖先要素も見ないとあかん😭
20. 「もともと見えるモンなの？」の判定は 考えることが多い…… サイズが0: width / height boxがない: display / content-visibility 透明: opacity invisible: visibility こんなにやるの！？！？
21. 「それ自体、見えているか？」の判定には checkVisibility()が使える！ 「動機: 要素がそれ自体見えているかの判定は考える ことが多いので、全部まとめたやつがほしい〜！」 Google; Chrome Platform Status「Feature: Element.checkVisibility method」より
22. checkVisibility()で確認してくれるコト - サイズが0: width / height - boxがない: display / content-visibility - 透明: opacity - invisible: visibility ✅ ✅ ✅ ✅ 祖先要素も見てくれる🌝
23. checkVisibility()で確認してくれるコト - サイズが0: width / height - boxがない: display / content-visibility - 透明: opacity - invisible: visibility ✅ ✅ ✅ ✅ 祖先要素も見てくれる🌝 非対応ブラウザ向けには、 自分で実装しよう！ (w3cに実装の定義が載っているヨ) (polyfillでもいいヨ)
24. でもさあ…… 「そもそも見えているのか」の確認だけでは満足できない！ wikipedia トップページより
25. でもさあ…… 「そもそも見えているのか」の確認だけでは満足できない！ wikipedia トップページより 「覆われていないか」を 見る必要がある
26. 覆われているって何？？ 覆われているを定義してみる
27. 覆われているって何？？ 覆われているを定義してみる (定義の仕方で最適な判定の仕方が変わるので注意) 覆われていない 覆われている
28. 「他の要素に覆われていないか？」の判定 にelementsFromPoint()を使うアイデア elementsFromPoint()を何点かに適用して判定！ だいたい5か所くらいでやってみよ〜！ 覆われている 覆われていない
29. 「他の要素に覆われていないか？」の判定 にelementsFromPoint()を使うアイデア elementsFromPoint()を何点かに適用して判定！ だいたい5か所くらいでやってみよ〜！ 覆われている 覆われていない これには落とし穴がある！
30. 子要素に「覆われている」かも ボタン要素が 子要素(画像やdiv)に「覆われている」 と判定されてしまう😭 Google 検索画面より
31. 子要素に「覆われている」かも ボタン要素が 子要素(画像やdiv)に「覆われている」 と判定されてしまう😭 Google 検索画面より contains()も組み合わせればいい！ みんなも家でやってみてね🌝
32. まとめ • 要素が「見えている」と言っても色々ある • 自分が求めている「見えている」にマッチしたロジックで判 定しよう👶 ◦ それ自体見えているか？: checkVisibility() ◦ 覆われていないか？: elementsFromPoint()とcontains() • でもけっこう奥が深いから、その都度がんばって考えよう！