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

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ならどこでも動くもの
• というようなブラウザーごとの実装のベースラインをまとめていくよ
  • https://web.dev/baseline/

How to optimize web responsiveness with Interaction to Next Paint

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

• 新しい指標であるINP
  • Interaction to Next Paint
  • https://web.dev/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: メインスレッドを専有しない
  • いわゆるロングタスク
  • `setTimeout()`でメインスレッドから逃がしたりして
    • https://web.dev/optimize-long-tasks/
• #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

• WASMとは
• ブラウザでできなかったことができるようになる
  • C++など他言語の資産を活用できる
  • OpenCV, Tensorflow, SQLite, FFmpeg, etc...
• パフォーマンスの向上も狙える
  • FigmaやSnapchatやPhotoshopなど
• npmにも1500以上のWASMライブラリが公開されてる
• 続々
  • https://github.com/WebAssembly/relaxed-simd
  • https://github.com/WebAssembly/tail-call
  • https://github.com/WebAssembly/memory64
  • https://github.com/WebAssembly/js-promise-integration
• WASM MVP
  • C/C++, Rust
  • 自分でメモリを割り当て、開放する必要がある言語
  • メモリの使用量が読めなくて苦労するとか
  • 呼び出すJS側と別に管理・コピーしないといけないとか悩ましい
• WASM GC
  • GC HeapをJSとWASMで共有できる拡張
  • JS側にも参照をそのまま渡せたり速いし軽い
  • Flutter(Dart)とKotlinで、Canvas描画のパフォーマンスが向上した
• Kotlin
  • クライアントサイドのビジネスロジックを、デバイス間で共有できる
  • WASMへも変換できるようになり、Webのロジックまで1ソースでできるように
  • https://kotlinlang.org/docs/wasm-overview.html
• (Jetpack)ComposeがWebに対応して、UIレイヤーまで1ソースで管理できるように
  • https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-imageviewer#compose-multiplatform-for-web
  • しかし出力されるのは`canvas`・・！
• Flutter
  • 同様にWASMの対応がきた
  • https://docs.flutter.dev/platform-integration/web/wasm

What's new in web UI

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

• 新しいUI関連の機能の紹介
• 新しいレスポンシブ表現
• コンテナクエリ
  • メディアクエリより細かい単位
• スタイルクエリ
  • CSS Variablesに対応する
  • `@container style(--rain >= 75%)`とか
• `:has()`セレクタ
• `:nth-child(2 of .foo)`
• `text-wrap: balance`
  • 帰ってきた・・・！
• `initial-letter`
• `svh`, `lvh`, `dvh`
• sRGBより広い色域のサポート
• `color-mix()`
  • 透過度も混ぜられるように
• 続いてシンタックス関連
• CSS Nesting
• `@layer`
• `@scope()`
• `transform: translateX(5%)`から`translate: 5% 0`
• コンポーネント類
• Popover
  • https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
  • いわゆるポップアップUIがブラウザネイティブで
  • `popovertarget`属性のついた`button`から
  • `popover`属性のついた要素をひらく
• Anchor positioning
  • https://drafts.csswg.org/css-anchor-position-1/
  • どこに配置するか
  • `@position-fallback` / `@try`
• Selectmenu
  • https://chromestatus.com/feature/5737365999976448
  • `select`要素では足りなかった表現ができる
  • `selectmenu`要素の中に、`option`や`button`を置ける
• 最後にインタラクション関連
• Scroll driven animation
  • https://developer.chrome.com/articles/scroll-driven-animations/
  • 効率的にスクロールをアニメーションに連携できるやつ
  • `animation-timeline`
• View Transitions API
  • https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

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
  • BiDirectional
  • https://w3c.github.io/webdriver-bidi/
  • WebSocketを介して、WebDriver BiDi Protocolでやり取りするいいとこ取り
• 絶賛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
  • `@media (pointer: coarse)`
  • DevToolsのアクセシビリティツリー
  • セマンティックなマークアップ（でAIも嬉しい時代）
• より最適化された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

• Chrome DevToolsの15年の歴史
  • 各種フレームワークに寄り添う形で進化してきた
• 最近のおすすめ機能のご紹介
  • 主にSourceパネルから
• Authored & deployed View
  • https://developer.chrome.com/blog/devtools-modern-web-debugging/
  • デプロイされ、ブラウザが読み込んだコードではなく、自分が書いたコードを見れる
• 3rdパーティのコードを無視するようになる
  • リストではグレーアウトされ、コールスタックではスキップ
• ブレークポイントはみんな使ってると思うけど、それに加えて2つ
• Conditional breakpoint
  • 条件付きでブレークポイントが指定できる
• Logpoint
  • DevTools側から`console.log`を仕込める
  • コードが汚れない
• Recorderパネル
  • バグの再現なんかを共有するのに使える
• 今後のDevToolsにも期待
  • RFCのリポジトリもあるよ
  • https://github.com/ChromeDevTools/rfcs

Advanced Web APIs in real world apps

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

• Project Fuguの進捗
  • https://developer.chrome.com/capabilities/
  • https://developer.chrome.com/fugu-showcase/
• Photopeaの例
  • 画像編集ができるサービス
  • PWAとしてインストールすると、OSのメニューから画像を開けるように
  • https://web.dev/patterns/files/
• Blockbenchの例
  • 3Dモデルのエディター
  • `EyeDropper` APIが使われてる
  • https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper
• Construct 3の例
  • File System Access
  • https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API
• Boxy SVGの例
  • Local Font Access API
  • https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API
• Photoshopの例
  • OPFS: OriginPrivateFileSystem
  • https://developer.chrome.com/articles/origin-private-file-system/
  • 拡縮の処理を効率化するために使ってる

Find form issues with Chrome DevTools

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

• いいフォームのつくりかた
  • https://web.dev/tags/forms/
• オートフィルを活用するとよい
• 入力内容は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以外のブラウザベンダ〜〜〜！