🧊

Web Sessions at Google I/O 2023の気になった発表のまとめ

まとめプレイリストが公開されてたので、その中から気になったやつを流し見した。

https://www.youtube.com/playlist?list=PLOU2XLYxmsIJGxIV8Lt8gF_79Z334LQ6h

What's new in Web

https://www.youtube.com/watch?v=x9rh0Du4Czg

  • ブラウザで使える最新機能のご紹介
  • `dialog`要素はいいぞ
    • `showModal()`のほう
    • フォーカスやタブ管理までブラウザがやってくれるし、スタッキングコンテキストも安心
  • CSS transform
    • `transform: scale(1)`を`scale: 1`って書けるように
    • 複数の組み合わせでもコードがごちゃつかない
  • 新しいCSSの単位
    • `lv(h|w|min|max)`、`sv(h|w|min|max)`、`dv(h|w|min|max)`
    • スマホでアドレスバーがあったりなかったりしても大丈夫
  • `:focus-visible`擬似クラス
    • ほしかったやつ
  • `structuredClone()`
    • さよなら`JSON.parse(JSON.strigify(x))`
  • `TransformStream()`
    • Nodeではおなじみreadableとwritableのペア
  • `importmap`
  • これらは、モダンブラウザの最新verならどこでも動くもの
  • というようなブラウザーごとの実装のベースラインをまとめていくよ

How to optimize web responsiveness with Interaction to Next Paint

https://www.youtube.com/watch?v=KZ1kxzsJZ5g

  • 新しい指標であるINP
  • FIDは本当に最初の1回しか見てなかった
    • ユーザーはその後も回遊するはずで、そっちが大事
    • ゆくゆくはFIDを置き換える
  • ユーザー入力に対して200ms以内に反応すべし
    • 500msを超えると問題

The 9 most effective Core Web Vitals opportunities of 2023

https://www.youtube.com/watch?v=mdB-J6BRReo

  • https://web.dev/top-cwv-2023/
  • #1 LCP: LCPに関わる要素はHTMLで表現する
    • 背景ではなく`img`要素にするとか
    • `loading=lazy`しない
    • `rel="preload"`はよい
  • #2 LCP: LCPに関わるものを優先的に処理する
    • `fetchpriority`属性
    • 現状はChromium系にだけ実装
  • #3 LCP: CDNにコンテンツを配置する
    • TTFBに効くよ
  • #4 CLS: サイズ指定を忘れない
    • `img`要素に`width/height`を指定しようね
    • CSSの`aspect-ratio`も使えるよ
    • 広告枠には`min-height`
  • #5 CLS: bfcacheを活用する
    • デフォルトで有効ではあるけど
    • DevToolsのApplicationタブでも様子が見れる
  • #6 CLS: CSSのレイアウトを動かさない
    • `top`ではなく`translate`で
  • #7 FID|INP: メインスレッドを専有しない
  • #8 FID|INP: 不必要なJavaScriptに注意
    • 使われないものは送らない
    • コードカバレッジを計測するなどして監視
    • 適切にコード分割・遅延ロードしよう
  • #9 FID|INP: 大きくDOMを更新しない
    • 大きなDOM変更を避ける
    • CSSの`contain`や`content-visibility`で制御したり
    • `requestAnimationFrame()`も使いすぎるとよくない

WebAssembly: A new development paradigm for the web

https://www.youtube.com/watch?v=RcHER-3gFXI

What's new in web UI

https://www.youtube.com/watch?v=buChHSdsF9A

What's new in web animations

https://www.youtube.com/watch?v=oDcb3fvtETs

  • View Transitions API
    • https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
    • 基本はページ単位だが、 `view-transition-name`でページの一部分だけにも適応できる
    • いまは`document.startTransition()`だが、`element.startTransition()`もできるようになるかも
    • `view-transition-offscreen`で画面外のものはスキップしたり
  • Scroll-driven animations
    • https://scroll-driven-animations.style/
    • スクロール量に応じたアニメーションがJSなしでできる
    • どこまで読み勧めてるかの進捗バーみたいなのとか
    • `animation-timeline: scroll()`
    • `self, nearest, root`と`horizontal, vertical, inline, block`
    • デフォルトは`nearest block`
  • 続・Scroll-driven animations
    • その要素がスクロールによってビューポートに現れたら
    • ペライチでありがちな演出がJSなしでできる
    • `animation-timeline: view()`
    • `animation-range`
  • まだまだScroll-driven animations
    • `@keyframe`で`entry 0 {}%`や`exit 100% {}`を定義できるように
  • Easing function
    • 理想的なbounceアニメーションをCSSだけで
    • `animation-timing-function: linear()`
  • Transformプロパティ
    • 複数のtransformを個別に、順番を気にせず書ける
    • 個別にアニメーションさせても補完してくれる
    • translate, rotate, scale, transformの適用順

WebDriver BiDi: Future of browser automation

https://www.youtube.com/watch?v=6oXic6dcn9w

  • WebDriverの歴史
    • Webは90sに生まれたが、自動テストが意識されはじめたのは2000sになってから
    • Seleniumにはじまり、cypressやPuppeteerなどいろいろなのが出てきた
  • ブラウザを立ててJSを実行するcypressのようなハイレベルなものもあれば
  • 複数のタブで開いたときの挙動など、ローレベルなものもある
    • WebDriverは後者を支えるもの
    • CDP(Chrome DevTools Protocol)を使うPuppeteerも後者の仲間
  • WebDriver(Classic)の仕組み
    • HTTPリクエストを受けて、ブラウザの公開するAPIを叩く
    • HTTPな都合上、long-pollなんかも必須で、動作も速くなかった
    • コンソールのログなんかも見れない
  • そこでCDPに注目が集まった
    • 内部的にWebSocketで直接ブラウザに命令を送る
    • Chromiumベースなブラウザである必要がある
    • ネットワークに介入できたりデバイスのシミュレートもできる
  • どちらも特徴があるが、両方のいいところをマッシュアップしたい
  • そこで生まれたのがWebDriver BiDi
  • 絶賛WIPではあるが、モダン4ブラウザを巻き込んだWGになってる
    • 既存のツールやサービスも参加してる
    • Puppeteerなんかは初期Specのサポートがもうある

How to create personalized web experiences

https://www.youtube.com/watch?v=JiVQBqAkkac

  • UXをより細かく調整していくにあたり、使えるものたち
  • フォント
    • ブラウザ自体の設定、CSSの指定、リーダーモード
    • `rem`のほか、 `rlh`, `rex`, `ric`など
  • OSと色をあわせる
    • `accent-color`プロパティ
    • `AccentColor`と`AccentColorText`が値に使えるように
    • `@media (prefer-color-scheme: dark)`
    • `@media (forced-colors: active)`
  • Reduced motion
    • `@media (prefer-reduced-motion: reduce)`
    • `@media (prefer-contrast)`
    • HD color
    • `oklch()`
    • `@media (dynamic-range)`
  • あらゆる閲覧環境に対応する
    • ブラウザの言語設定 by `accept-language`ヘッダー
    • `margin-inline`といった書字方向に捕われない記述
    • コンテナークエリであらゆる閲覧環境に
  • a11y
  • より最適化されたUIを目指す
    • コンテナクエリ
    • スタイルクエリ
    • `:has()`

Rethinking reactivity with Angular Signals

https://www.youtube.com/watch?v=EIF0g9LDHcQ

  • Angularもv16でSignalsが使えるようになった
  • SignalsがもたらすReactivityとは
    • ある値に呼応して、その依存値がすべて更新されること
    • スプレッドシートのセルみたく
  • 構成要素は3つ
    • signal: 値を抱える箱
    • computed: signalの派生
    • effect : signalに依存する副作用、画面の表示もこれ
  • これらはViewとは分離されていて、任意の場所で使える
  • v16から依存なしで使えるし、使わなくてもいい

Debugging modern web applications

https://www.youtube.com/watch?v=3lNkq264nkM

Advanced Web APIs in real world apps

https://www.youtube.com/watch?v=Y40vMQap9fs

Find form issues with Chrome DevTools

https://www.youtube.com/watch?v=Rb-LALxgsfY

  • いいフォームのつくりかた
  • オートフィルを活用するとよい
  • 入力内容はChrome自体に保存できる
    • あとから変更することもでき、あらゆるフォームで使い回せる
  • 適切な`name`属性がなくても、Chromeはオートフィルを提案できる
    • まじか
  • オートフィルできない理由は、DevToolsのConsoleパネルのIssuesに出る
    • `--enable-features=AutofillEnableDevtoolsIssues`
  • オートフィルはa11yにも有用
    • 入力の手間を省くこともできるし、間違いもない
  • キーボードのアクセサリーに
    • 任意の入力項目で、任意の項目を呼び出せるようになったり
  • `enable-autofill-touch-to-fill-for-credit-cards`
    • カードの一覧を、ボトムシートUIでより探しやすく
  • PCI準拠の都合なんかで、クレカの入力項目がそれぞれ別の`iframe`になってたとしても
    • 同じセキュリティオリジンであれば、よしなにオートフィルする
  • ベストプラクティス
  • Chromeは`autocomplete`属性がなくても、よしなに処理する
    • が、Non-standardな値が指定されてると、うまく処理できない
  • `autocomplete`属性は、ブラウザのためのものなので、サイト独自のものに勝手に使わない
    • 標準の値を指定するか、指定しないか
  • `label`の`for`が対応してないエラーもDevToolsでわかる
  • フォームを適切に作ることができれば、スクリーンリーダーにも優しい
  • https://developer.chrome.com/blog/devtools-autofill/

感想

つかれた・・・。

  • 最初のプレイリストをざっくり眺めるだけでも楽しいね
  • イベント全体のrecapが5分くらいの動画なのでそれだけでも
  • 個別のセッションは内容が被ったりしてるのもあるので、What's newシリーズだけ見るでもいいかも

個人的にアツかったのは、

  • WASM GC
    • でも`canvas`で吐かれるのはなあ・・・
  • Popover/Selectmenu
    • ブラウザ標準になるのはよいこと
  • Scroll-driven animations
    • JSなしでできるようになるの嬉しい
  • Conditional breakpoint / Logpoint
    • ぜったい使う!

というわけで、がんばれChrome以外のブラウザベンダ〜〜〜!