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