Popoverを早速実践投入してついでにブラウザにバグ報告もした話/Popover use, bug reported

2025年3月12日開催「kaonavi Tech Talk#20」で登壇した際の発表資料です。
https://kaonavi.connpass.com/event/344412/

◼︎イベント概要
カオナビでは、プロセスや、エンジニアリングについて日々改善をおこないながらアジャイルな開発を行なっています。
スクラムをスケールする際の工夫、品質向上へのチーム全体でのアプローチ、データ活用による顧客視点の醸成など、実りの多い内容が盛りだくさんです。
本イベントのアーカイブは下記からご覧いただけます！是非ご覧ください。
https://www.youtube.com/live/zQAlHonf-KA

◼︎kaonavi Tech Talkとは？
「"はたらく"にテクノロジーを実装し、個の力から社会の仕様を変える」というパーパスを掲げるカオナビによるオンラインイベントです！
HRTechのリーディングカンパニーであるカオナビの開発組織は、学習する組織として絶え間なく変化を続けてきました。
組織・チーム・プロセス・エンジニアリングなど多くの領域に対してTry&Errorを繰り返すことで学びを重ね、開発組織もサービスもカイゼンを行ってきました。
そうした学びは社内の勉強会や交流会で共有されてきましたが
カオナビの開発組織の文化・人を多くの方に知っていただきたい
社内外で学びを循環させ、コラボレーションを実現する場を創出したい
といった想いから、kaonavi Tech Talkは生まれました。
カオナビの開発最前線で活躍するメンバーがスピーカーを務め、日々の開発で得た学びを発信して参ります！
ぜひカジュアルにご参加いただければと思います。

Transcript

1. Popoverを早速実践投入してついでに ブラウザにバグ報告もした話 2025.03.12 | kaonavi Tech Talk #20〜 フロントエンドスペシャル vol.3 〜 © kaonavi, inc.
2. uhyo 株式会社カオナビ フロントエンドエキスパート 業務ではフロントエンドの開発効率の向上に尽力。 好きなHTML要素はtime要素。 発表者紹介 © kaonavi, inc. 2
3. これまでのあらすじ © kaonavi, inc. 3
4. z-indexの管理がつらい どこのご家庭にもあるグローバルな z-indexカタログ！！ 場当たり的なz-indexの修正！！！ © kaonavi, inc. 4
5. 汎用コンポーネントに z-indexの指定機能が増える 使う場所によって適切なz-indexが異なるので、 さまざまなコンポーネントにz-indexが生えてとてもつらい © kaonavi, inc. 5
6. z-indexの理想と現実 理想的には、重ね合わせコンテキスト を活用し、 グローバルなz-indexの管理はせず、0と1のみといったローカルな管理をすべき。 ポップアップなど浮いてる系のコンポーネントに職人芸で z-indexを指定して回る のはバグの元になり、開発効率も低下する。 なるべく職人芸が必要ないように軌道修正をしたいが、 すでに大量のz-indexが使われているプロダクトを壊さずに修正するのは たいへん難しい。 © kaonavi, inc. 6
7. 救世主としての popover Popoverとは、HTMLの比較的新しい機能で、要素をトップレイヤーに表示できる という特徴がある。 トップレイヤーに表示された要素は、 それ以外の要素よりも上に表示される 。 （z-indexを53万とかにしてもトップレイヤーには勝てない） © kaonavi, inc. 7
8. Popoverの基本 <!-- ポップオーバーを表示するボタン --> <button command="show" commandfor="my-popover">メニューを開く</button> <!-- ポップオーバー要素 --> <div id="my-popover" popover> <h3>メニュー</h3> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">設定</a></li> <li><a href="#">ログアウト</a></li> </ul> <button command="hide" commandfor="my-popover">閉じる</button> </div> © kaonavi, inc. 8 popover属性を指定することでその要素は popoverになる。 JavaScriptを使わずに開閉したり、 popoverの外をクリックしたら閉じるといった 挙動も標準でサポート。
9. ReactとPopover React（宣言的UI）を使っている場合、HTMLだけでpopoverの挙動を記述できる 機能をフル活用するのは難しい。 完全にJavaScriptから挙動を制御できるpopover="manual"があるので今回はこちらを使 用。 （一応、非制御コンポーネント的な感じにすれば HTMLの機能を活用する方針も行けなくはな さそうだが……） 今回の目的としては、とにかくトップレイヤーを活用できれば十分。 © kaonavi, inc. 9
10. Popoverの活用法 特に浮いてる系の汎用コンポーネントは、 popoverに寄せていきたい。 これ系の要素は、基本的に一番上に来ればいいので、 ややこしいz-index管理をしなくても自動的に一番上に来る ようにすれば大抵は問題ない。 © kaonavi, inc. 10
11. Popoverコンポーネント爆誕 ということで、Reactから使いやすい形でまとめた<Popover>コンポーネントを 用意した。 使い勝手としてはFloating UIのFloatingPortalみたいな感じ。 <Popover open={isOpen}> 浮いてるコンテンツ </Popover> © kaonavi, inc. 11
12. とはいえ © kaonavi, inc. 12
13. Popoverの重なり順も管理できると嬉しい とはいえ、popover同士（トップレイヤー同士）の重なり順も、 全く制御しないわけにはいかない。 例えば、ページのコンテンツから発生した Popoverよりも、 モーダルダイアログのほうが上に来てほしい。 Popoverコンポーネントには、重なり順を制御するための priority propを追加した。 © kaonavi, inc. 13
14. Popoverは“やり直し”の手段である priority propがz-indexの二の舞になっては困るので、 意味を持ったenum的な管理にした。 言い換えれば、popoverは重なり順の管理に関してやり直しの機会を与えてくれた。 © kaonavi, inc. 14
15. sugaoでのPopover利用 カオナビのデザインシステム・コンポーネントライブラリである sugaoで Popoverコンポーネントを導入開始。 　　　　　　　　　　　　　　　　　　　　　　　　これとか → © kaonavi, inc. 15
16. Popover普及策 従来z-indexを使って実装されていたものをいきなり Popoverに変えたら プロダクトが壊れる恐れがあるので、 既存のコンポーネント にはPopoverをオプトインで実装。 プロダクト側で、画面単位でPopover利用するかどうかを切り替えられる。 新規コンポーネントでは Popoverのみサポートすることにより、 Popoverへのオプトインを促す。（今ここ） © kaonavi, inc. 16
17. Popoverの重なり順の制御 © kaonavi, inc. 17
18. 重なり順を直接操作する方法は存在しない 現在のところ、Popover（というかトップレイヤー）の重なり順を直接制御する 方法は存在しない。以下のルールだけが存在する。 • トップレイヤーでは、後からトップレイヤーに追加された要素が上に表示される そのため、「既存のPopoverよりも下に表示されてほしい新しい Popover」みたいな ものを画面に追加するためには 工夫が必要。 © kaonavi, inc. 18 これが後から増えたときとか
19. 重なり順を制御する工夫 Popoverは開いた順に重なるので、 Popoverが新たに表示されるときは全部のPopoverを望ましい順番に閉じて開き直す ことで 意図通りの重なり順にできる。 強引だがこれしか方法がない。 （実際にはこれだとPopover内にあったフォーカスが消えちゃうなど問題もあるので、開き直す 操作は最小限にしている） © kaonavi, inc. 19
20. ということで実装してみたが …… バックドロップ付きのPopoverの重なり順制御で問題が発生。 Google Chromeとそれ以外（Firefox, Safari）で挙動が違う…… Dialog（バックドロップ付きでトップレイヤーに表示される）を 閉じてすぐ開き直した場合、バックドロップの位置がおかしい。 　当時のFirefoxの表示（正しい）　　　　当時の Chromeの表示（おかしい） © kaonavi, inc. 20
21. Google Chromeのバグ Dialogを閉じてすぐ開き直した場合、 仕様に従ってDialogはトップレイヤーの一番上に再配置されるが、 ChromeではDialogのバックドロップが付いてこない という問題があった。 　 　　　　初期状態　　　　　　　　　　　　　　　　　　正しい表示　　　　　　当時の Chromeの表示 　　　　　　　　　　　　　 Dialogを一瞬閉じて 　　　　　　　　　　　　　すぐ開き直す © kaonavi, inc. 21 Dialogのバック ドロップ Popover Dialogのバック ドロップ Dialog Dialog Popover Dialogのバック ドロップ Popover Dialog
22. Google Chromeのバグ Google Chrome（正確にはChromium）にバグ報告したら10日くらいで修正された。 https://issues.chromium.org/issues/360158414 無茶な使い方したせいでChromeのバグ修正にも貢献できた！ （少なくとも当時は）誰もやっていない Popoverの使い方をしたということで、 フロンティアを走ってる感があり個人的には満足。 （ただ無茶な使い方なのは確かなので重なり順を変える APIが欲しい気もする） © kaonavi, inc. 22
23. まとめ © kaonavi, inc. 23
24. まとめ PopoverというHTMLの機能を、グローバルなz-indexの管理がつらいという問題に 対処するために導入した。 トップレイヤーに表示されるという特徴を生かして、混沌に満ちた既存の重なり設計を やり直す機会として活用した。 このように新しい機能はブラウザ実装も完璧ではなく、バグがあることもある。 そういうのを見つけてWebに貢献できるのは面白い。 © kaonavi, inc. 24