実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 / practical-guide-to-lovable-ads-shadow-dom

フロントエンドカンファレンス東京 x Vue Fes Japan コラボイベント
登壇者: @hako584

Transcript

1. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 CARTA HOLDINGS フロントエンドエンジニア 小橋はこ（@hako584） フロントエンドカンファレンス東京 x Vue Fes Japan コラボイベント 2025.08.25
2. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 ねらい • Web Components がどんなものかを掴んでもらう • 世の中にこんなにWeb Components が溢れているかを知ってもらう • “愛される” 広告表現とは？ そして WebComponents 特にShadow DOMが役に立つかを実践を交えて
3. CARTA HOLDINGS / fluct フロントエンドエンジニア 小橋 はこ @hako584 略歴 ある日「自分をここまで育ててくれたインターネットに恩返しをしよう」 と思い立ち、アドテク企業に就職を決める。 広告業界の深層の浅瀬チャプチャプしつつ、皆が"無料のインターネット" を楽しみつつ世界よくなれ〜を模索する日々。 好きなものはかりんとう饅 頭とAngularとブラウザレンダリング周り。 過去スライド/領域 #年2回沖縄 #javascript #同人誌描き(ex) #タコライス #エッグタルト management engineering Server Data Cloud Infra Front 4000いいね!
4. AGENDA 01 Web Componentsの歴史とコア技術 02 実世界の採用例 / ReactやVueとの関係 03 広告×Web Components / 愛される広告とは
5. 01 Web Componentsの歴史とコア技術
6. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 Web Componentsとは 3つの柱 • Custom Elements：customElements.define('my-element', class {...}) • Shadow DOM：DOM/スタイルのカプセル化（ attachShadow({mode:'open'})） • Templates/Slots：<template>, <slot> による構造再利用 期待される効果： • CSS/JSの衝突低減、再利用性、フレームワーク非依存
7. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 Custom Element • VueやReactの ”コンポーネント”相当 ◦ 独自要素をjsで定義 ◦ <my-custom> とHTML中に書く ことで、ブラウザが解釈して独自 要素をレンダリングしてくれる • 独自要素を作るだけ？ ◦ そうではある ◦ React/Vueっぽいね？ ◦ そうだね JSで定義 HTMLでその要素を描画
8. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 Shadow DOM • いわゆる Scoped CSS をブラウ ザのネイティブで実現する機能 • シャドウツリー側のCSSは切り離 されるため、外部CSSの影響を 全く受けない • ネイティブ実装のため、*{...} や img {... } のような全称セレクタ や要素セレクタの影響も受けな い ◦ 確実な分離ができる ※画像出典: MDN https://developer.mozilla.org/ja/docs/Web/API/Web_components/Using_shadow_DOM
9. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 Templates/Slots • Vueの Slots 相当 • Reactでは props.children 相当 • 子要素を受け渡せる ◦ 名前付きでも受け渡せる ◦ このへんは本当にVueと同じ
10. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 • 2006–2012：jQueryプラグインと巨大 CSSの時代 ウィジェットはコピペ &グローバルJS/CSS。名前衝突・スタイル崩れ・ライフサイクル不一致が常態化。 iframeは安全だが 重く、親ページとの連携や計測が難しい。 1. 先行する “ブラウザ組み込みの部品化 ”の試み Mozilla XBL（XML Binding Language）、IEの HTML Components / behaviors（.htc）など、ベンダ固有機能で カスタム要素に振る舞いを付与。しかし互換性・保守性の壁が。 • 2011–2013：Web Components v0 提案 Shadow DOM v0 / Custom Elements v0 / HTML Templates / HTML Imports HTML自体にコンポーネントモデル 1. カプセル化 （DOM/CSSの衝突回避）配布可能性 （タグ1つでどこでも動く＝広告 /決済/埋め込み向け）相互運用 （フレームワークをまたぐ共通フォーマット） アクセシビリティ内包 （部品側でARIAやフォーカス管理を設計） パ フォーマンス /安全性 （iframe依存からの脱却、境界の明確化） • 初期の紆余曲折 HTML Importsは標準から離脱 →ES Modulesへ統一。v0→v1でAPI刷新、Polyfill（ShadyDOM等）の負担が一時期課題 に。2016–2018に v1が安定実装 され実用段階へ。 • 2020-：定着のフェーズ なぜ Web Components が必要になったか（前史）
11. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 2014→2025：かんたんな歴史 • 2014頃：v0仕様/Polymer実験期 • 2016–2018：v1仕様安定、主要ブラウザが実装 • 2020s：Lit・Stencil等のエコシステムが成熟、Design SystemがWeb Componentsへ • 2024–2025： ◦ Declarative Shadow DOMでSSR/初期描画の課題を緩和 ◦ Vue 3ではWeb Componentsをターゲットにビルド ◦ React 19のCustom Elements強化 ◦ Scoped Custom Element Registries（進行中）：名前の衝突を回避 🗣: 「いまは“実用の時代”。」
12. 02 実世界の採用例 / ReactやVueとの関係
13. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 実世界の採用例 : GitHub • GitHubは徐々にWeb Componentsへ 置き換わっていっています • 特に、左上部などは全部 Web Components! • パーツごとに違う採用状況 ◦ 漸進的な採用
14. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 実世界の採用例 : YouTube • YouTubeはかなりの部分が Web Componentsでできています。 • <ytd-*, <ytm-* 等、ほとんどが Custom Elementで作られています
15. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 Custom Element ベースのjsだと 　行数が 半分以下 & 読みやすい！ 実世界の採用例 : Swiper.js • メジャーなサイトでも見る、ギャラリー用の js(Adobe, ASUS, McDonald, BYD, …) • 従来のjsベースよりもずっと読みやすく早い、 Web Components版が強い！
16. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 React/Vue 等との関係 • React： ◦ v18以前は属性/イベント連携の扱いに癖 → v19で改善 （Custom Elementsの受け入れが容易に） ◦ 状態管理/SSR等の強み＋Web ComponentsでのUIカプセル化の組合せで利用 ▪ 他フレームワークもおよそ同様の状況 • Vue 3： ◦ defineCustomElementでSFC→Web Components化が可能 ◦ vue.config.js で isCustomElement を指定すれば外部からの導入も容易 • Angular： ◦ 最も早くからWeb Componentsを志向していた ◦ Web Components化 createCustomElement() や、プロパティバインディングも容易 • Lit/Stencil：Web Components実装専用の生産性ツール （小さなランタイム or ビルド時コンパイラ） 「“対立”ではなく“補完”」 置き換えるものではない
17. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 いつWeb Componentsを使うべきか？ 1. UI部品の「埋め込み」と「配布」をしたい ◦ サードパーティウィジェット、社内共通 UI、決済・認証ボタン(セキュア) ◦ フレームワーク横断・カプセル化 (Shadow DOM) 2. Design Systemの核 ◦ Button, Tooltip, Modal, TextField を共通化 ◦ 一旦包まれることで、各所で実装が異なるものが乱立することを防ぐ 3. マイクロフロントエンドの「独立した UI部品」として ◦ チーム間で技術を疎結合にするためのツール・明確な境界 4. コンテンツ主体のサイト（ CMS、ドキュメントサイトなど）の組み込みパーツ ◦ 記事の本文中に<my-video-player video-url="..."></my-video-player>と書くだけで、動画サイトのプレ イヤーを埋め込める 5. 使いたくなったとき！
18. 03 広告×Web Components / 愛される広告とは
19. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 “愛される広告” • 静か：音の自動再生しない、画面がチカチカガチャガチャしない • 速い：CLS/LCPに配慮、初期負荷を最小化 • 礼儀正しい：明確な閉じる/ミュート、フォーカス管理 • 役に立つ：文脈/クリエイティブ品質、誤クリック誘発なし • 測れる：ビューアビリティ/ブランドリフト等の設計 • ・・・何より、”愛される” ！ ◦ 隣の人やSNSで「ねえ見て、これ」とシェアしたくなる ◦ 新しい！楽しい！ ▪ 動画や静止画などのデザイナーのこだわり部分も愛されに重要な要素だが、サイト にマッチした動きのある広告なども重要
20. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 “愛される広告” の例 • 本当はもっとクリエイティブにこだわった実案件をお見せしたい …！ ◦ 今はこれがせいいっぱい • 「新しい！楽しい！」 の演出のため にアニメーションや透明化演出を行 う • Shadow DOMのCSS分離・レンダ リング分離で可能に • (本発表の範囲外だが) Web Animation API: WAAPI での描画 も活用 • クリエイティブ(画像や動画)も合わ せて「見たこと無い！」を演出 -> SNSでの反響は上々 ❤ ◦ 広告自体がシェアされるも のになる
21. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 “愛される広告” • Web上のプレイアブル広告 (実際にプレイできるゲー ム広告)なども、Shadow DOM と相性が良い ◦ 分離されたレンダリングが可能 ◦ 実際にはまだまだiframeで作るケースが多い … • このようなプレイアブル広告は、いまはスマホのアプリ 向けが圧倒的に多い ◦ サイトとの連携感がもっと出せたり、遊びたいと きに全画面化なども出来るようになると楽しそ う！！ ◦ まだまだアイデア段階 • 「これって広告？」って言われるようなものを！
22. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 広告の前史 • 広告は基本、 iframeサンドボックス を利用していた ◦ 広告といえばiframeの中に出るもの… ▪ もっと古代は、 document.write で書いていた ▪ iframe + document.write なんてことも… • リッチな挙動は グローバルJS/CSS を使っていた → 体験/計測/パフォでトレードオフ。 ◦ メディア側(Webサイト側)にたくさん貼ってもらう広告タグ ◦ メディア側のCSS変更で壊れる広告(レイアウト崩れ) ◦ 演出的にどうしても、「iframeを飛び越える挙動」は必要 ▪ 衝突しまくるCSS ▪ ロードタイミングの問題で重くなりがちな DOM ▪ 分離されないDOMツリーによる構造の激しい変化 … • Shadow DOM の登場でフェーズが変わった！ ◦ 衝突しないCSS分離 ◦ 共通のレンダリングツリー上での表示・非表示 (iframe不使用、軽い） ◦ 複雑すぎるz-indexからの解放・・・はまだならず ▪ とはいえ、shadow-rootについてだけ考えれば良い
23. 実例と表現で学ぶWeb Components 〜"愛される"広告表現とShadowDOM〜 Shadow DOM が広告と相性が良い理由 • CSS衝突ゼロ設計 ：Shadow DOM + ::part/exportpartsでホスト側カスタムも許可できる。 サイトCSSに汚染しない/されない • カプセル化と軽量化 ：iframeよりも圧倒的に軽量、必要十分なサンドボックス いずれにせよ “信頼された” Webサイト・広告ベンダでだけ出すので問題ない • 遅延初期化 ：IO/ROで可視時にだけ初期化。非表示時は影響なし • A11y：アクセシビリティAPI(スクリーンリーダー等)への対応も可能。iframeは読み飛ばされる 「アクセシブルな広告」も可能（責任重大だ・・・） • パフォ：iframeに比べレンダリングコンテキスト分離しないため軽い。さらに画像最適化、APNG/WEBM活用、 動画最適化、GPUフレンドリーなCSSを組み合わせることで、サイトのパフォーマンスへの影響を防ぐ
24. Web Components 使っていきましょう！