フロントエンドカンファレンス沖縄2023
レギュラートーク 30分

ゲーム「webページ崩し」の仕組み〜あなたの知らないDOMスクリプティングの世界〜

i_am_canalun canalun(Kanaru Sato) i_am_canalun

DOMをブラウザAPIで直接操作する「DOMスクリプティング」は古い技術だと思われがちですが、PlaywrightやReactなどモダンFEスタックを支える現役の重要技術です👶

本セッションでは、ブロック崩しのように、webページ上の要素にボールを当てて消すゲーム「webページ崩し」(動画: https://x.com/i_am_canalun/status/1707700748610629911)の実装の紹介を通じて、Playwrightの要素探索の手法や最新のブラウザAPIなど、実践的かつ興味深いDOMスクリプティングを扱います！

特に下記を見ていく予定です🌞

  • Shadow DOMやiframeの中の要素の当たり判定
  • visibility等だけではできない、要素の可視性判定
  • レイアウトを極力保つ、要素の消去方法

「DOMって面白いな」と思って頂ければ幸いです🌴