Google I/O 2019 のWeb系セッションをすべて見たので内容をまとめる

こんにちは、メルカリ でフロントエンドエンジニアをしている @karszawa です。

Google I/O 2019 の開催からすでに 1 ヶ月以上経ってしまいましたが、ようやく Web 系のセッション 24 本 ¹ すべて を視聴し終わったので、（すでにいたるところで Recap イベントが開催されていますが）内容と感想を数行でまとめて見たいと思います。

記事が長すぎるので読者の方が楽しくなるように所々に絵文字を挿入してみました。

What’s New with Chrome and the Web

• Lighthouse で Performance Budgets のレポートが取れるようになった
• Firebase Performance Monitoring でユーザーが実際にページを訪れた際の種々のメトリクスが見れるようになった
• Paint holding
  • 画面遷移時にバックエンドで画面を描画してからページを切り替えるようにした
• Portals
  • ドメインをまたいだページ遷移をなめらかに表示する
• Web Packaging
  • Web ページを Signed package 化してキャッシュサービスなどに置くことができるようになった
• perception-toolkit: バーコードや二次元画像を認識する認識器と認識のためのUIがセットになったライブラリ
  • squoosh.app がこれ
• Duplex on the Web
  • Web 上で Duplex のガイドが利用できるようになる
  • 自分が読めない言語のページでも買い物ができるようになる

詳細

WebAssembly for Web Developers

• C++ → wasm: Emscripten
• Rust → wasm: wasm-pack
  • squoosh.app はこれ
• TypeScript → wasm: AssemblyScript
  • ガベージコレクションがないのでメモリ管理を自分でやる必要がある
• WebAssembly のパフォーマンス
  • JS はマシンコードの実行を監視してコードを最適化している
  • wasm は速い上に速度が安定している
• WebAssembly のこれから
  • マルチスレッド化 → WebWorker を用いて実装される
    • WebWorker でのメモリ共有は限定的なので単なるマルチスレッドというわけでもない
  • SIMD Extension: 一つの命令で複数のデータを並列に実行するための命令セット
  • WebIDL Bindings
    • wasmから直接Web APIを呼べるようにする
    • 今まではJSでブリッジしていたのでオーバーヘッドが発生していた
  • ガベージコレクション・末尾再帰最適化・エラーハンドリング

詳細

What’s new in JavaScript

• V8 のパフォーマンス改善
  • パースの速度は2年前から2倍になった
  • メモリ使用量は2年前から20%減少した
  • async/await は登場時から11倍になった
• private fields → this.#privateField
• String#matchAll → 便利な String#match
• BigInt
• Array#flatMap
• Object#fromEntries
• globalThis → Web でも node でもグローバルオブジェクトが取れるキーワード
• Array#sort が安定ソートに
• Intl の強化
  • Intl.RelativeTimeFormat, Intl.ListFormat, Intl.DateTimeFormat#formatRange, Intl.Locale など盛りだくさん
• top level await
• new Promise APIs: Promise.allSettled, Promise.any
• WeakRef

詳細

Build Fast and Smooth Web Apps from Feature Phone to Desktop

• スマートフィーチャーフォン
  • KaiOS などの現代的な OS で動いている 🐚
  • 画面は小さいしタッチインターフェースでもない
• Proxx.app
  • 2019年のマインスイーパ
  • あらゆるデバイスで快適に動くよ
• ゲームロジックは WebWorker で動いていて通信は Comlink
• Puppeteer を用いた Build time Pre-render を行っている
• パフォーマンスとアクセシビリティのために Canvas と Form を併用している
• アニメーションは Sprite イメージだが生成はフロントで行っている
  • イメージは Indexed DB に保存
• 珠玉の改善テクニックが盛りだくさんでとにかくすごい

詳細

Elevating the Web Platform with the JavaScript Framework Community

• JavaScript ではメインスレッドが他の処理を行っているのか待機状態なのか判断できない
• スケジューラーを作ってスレッドが暇な時に処理を実行することができるようにしたい
• isInputPending
  • ユーザーの入力があるかどうか判断する API
  • FaceBook の人が React で使うために Chromium に追加した
• Display Locking
  • JSにより操作されるどのDOMがレンダリングされる必要があるのかをブラウザが知れるようになった
  • スクロールコンテンツやタブ・ウィジェットなど様々なユースケースでパフォーマンスを発揮する
• Critical Resource の量は全体で1ページに付き 170KB に収めたほうが良い
• Google におけるサイト作成の知見
  • Interaction driven late-loading → フォームだけ用意して処理はあとからダウンロードする
  • jsaction → 真のイベントハンドラーがロードされるまでユーザーのクリックイベントをキューイングする
• サードパーティライブラリがでかすぎる問題
  • 過度なトランスパイルが問題
  • script タグで type="module" や nomodule を指定して JS バージョンを制御
• フロントエンドの人やらないといけないことが多すぎる！

詳細

Anatomy of a Web Media Experience

• Chrome におけるネイティブのメディアコントロールを刷新する際のインサイトについて
• MediaSessionAPI
  • キーボードのメディアコントロール入力をChromeに伝達するためのAPI
• Shaka Player
  • ABR / PWA / Offline / Chromecast / Shaka Embedded などの特徴がある
  • サッカーワールドカップの動画配信で130万人の同時視聴にも使われた ⚽

詳細

Securing Web Apps with Modern Platform Features

• Google Vulnerability Reward Program で発見された脆弱性は XSS と CSRF によるもので半分
• CSP3
  • Content-Security-Policy でノンスをつけ、ノンスのついた script タグしか実行されなくなる
• Trusted Types
  • Content-Security-Policy-Report-Only
• Cross-Origin Opener Policy

詳細

Going Big: PWAs Come to Desktop and Chrome OS

• Desktop PWA は始めるのが簡単
• Workbox で SW は簡単に書ける
• Chrome 76 からオムニボックスにインストールボタンが追加される
• Native File System API が開発中

詳細

Rendering on the Web: Performance Implications of Application Architecture

• SSR は FCP を早くする一方で CSR はリッチでインタラクティブなアプリを提供する
• 両方必要なので SSR with Hydration で間を取る
• ビルドタイム pre-rendering で FCP を改善しつつ SSR のオーバーヘッドと特異なインフラをなくす
• Streaming SSR
  • レンダリングが完了したものから順次配信する
• Progressive Hydration
  • 見た目上の意味がある範囲でコードを分割して、その要素がレンダリングされたときに処理のコードをダウンロードする
  • ユーザーの行動に応じて JS リソースがダウンロードされるのでリソースの絶対量も減らすことができる
• SEO のために SSR にする必要はないが重要な情報は meta タグと title タグできちんと書く

省略

Building Successful Websites: Case Studies for Mature and Emerging Markets

• Web 技術に投資して成功した企業のケーススタディーについて
• Twitter
  • Build once, ship to everyone
    • 一つのコードベースで Desktop,Mobile,FeaturePhone すべてに対応した
• Times Internet
  • インドのインターネット企業でネットワーク強度の弱い村に住むユーザーが多い
  • Code Splitting / Resource Optimization Offline Caching をきちっとやることが重要
  • Lighthouse 満点
  • PWA にして広告収入が 59% 増えた
  • 次は PWA でネイティブを TWA にする →普通のアプリに比べて8倍小さく5倍速い
• Hulu
  • PWA Desktop
  • PWA にするにあたっては Web App Manifest を書いて SW を導入した
  • 開発者一人が2週間で書けちゃった → 1スプリントあれば PWA 化可能！

詳細

Demystifying Speed Tooling

• 新しい（ユーザー中心の）メトリクスが提案されてた
  • Layout Stability → 広告のせいでコンテンツの位置がずれるのを図る
  • Largest Contentful Paint → 最も大きいコンテンツが描画されるまでの時間
• Search Console's Speed Report → FCP 等の実測値をパスごとに確認できる
• Performance Budgets
  • img に elementtiming 属性を追加すればそれが表示されるまでの時間を図れる
  • Firebase web performance monitoring

詳細

Protecting Users from Deception

• Unclear Subscription Protection
  • 二段階認証による電話番号入力と見せかけて法外な値段なサブスクリプションを契約させようとするサイトにChromeが警告を出す
• Android端末が二段階認証の要素として使えるようになった
• FIDO module
  • Androidで利用できる認証モジュールの一つ
  • 従来どおりの認証方法（key storeにアクセスする方法）に加えこちらも使えるようになる
  • Googleでは認証の成功率自体が20%以上向上した

詳細

Unlocking New Capabilities for the Web

• Project Fugu
• BLE, Web Share API, Web Share Target API, Media Session API, Shape Detection API, Badging, Wake Lock, File System, Serial API, WebHID, 連絡先情報, Font Access API, Clipboard Access, SMS認証, Notification Trigger API などの新しい API が利用できるようになり、ネイティブとの差がどんどん埋まっている

詳細

Taking Chrome Full Screen with Trusted Web Activities

• WebView はブラウザというよりただのレンダリングエンジンなので込み入ったことはやりにくい
• TWA はフルスクリーンで Chrome が動いているので使いやすい
• TWA は次の用途で使われる
  • ネイティブに実装されてない機能を使いたいとき
  • 高速にイテレーションを回したいとき
  • FAQなどのドキュメント類
• 実際的にただのChromeなのでセッションデータ等はChromeと共有される
• PWA アプリを TWA でガワだけ作ってもちゃんとしたアプリになる
• TWA のロードマップ
  • Splash スクリーンを使いやすくする
  • Push 通知に対応する
  • Firefox などのサードパーティ製ブラウザでも TWA が使えるようになる

詳細

Modern Web Testing and Automation with Puppeteer

• Puppeteer で Firefox も制御できるようになっている
• Incognito モードでブラウザインスタンスを作ればテストのたびにブラウザを起動するということがなくなるので速くなる
• page.waitForSelector で HTML 要素が表示されるのを待つことができる
• page.emulate(puppeteer.devices['iPhone 8']) でモバイルのエミュレートもできる
• オフラインモード / Geolocation / マウスイベントのエミュレーションもできる
• page.metrics で JS のヒープサイズなどパフォーマンス上の基本的な情報が見れる
• page.tracing で Chrome devtools の Performance タブと同じことができる
• page.accessibility.snapshot で DOM 要素のアクセシビリティを確認したりできる
• size-limit でコードサイズや実行時間を図れる
  • Puppeteer を使っているので様々なデバイスでの結果を確認できる
• penthouse は上記の css バージョン

詳細

Next-Generation 3D Graphics on the Web

• WebGL
  • Canvas を定義して context で webgl を指定するだけ
  • グラフィック自体を記述するのは大変だけど Web Components で隠してしまえば簡単に再利用できる → model-viewer
• WebGPU
  • 速い WebGL
  • ML の計算を早くする目的でも使われる

詳細

Google Search: State of the Union

• Search にとって Web サイトとは
  • URLによってWebでホスティングされてる物体
  • 公にアクセスできるもの
  • Googleにページをインデックスすることを許可しているもの
• Googlebot is now evergreen!
• モバイルとデスクトップで URL を分けるとインデクシングがうまくいかないのでレスポンシブにするべき
• 画像検索
  • 検索結果として出やすいのはページのトップにあって関連する語句の近くにある写真
  • 構造化データを使って画像に関するデータを記述しよう
  • URLはそれだけで意味がわかるものにしよう（IDや連番ではなく）
  • cssのbackground-imageではなくimgのsrc+altで記述しよう
  • レスポンシブな画像はで
  • 画像はもはや画像検索の結果だけでなくDiscoverでも表示される
• Search Console
  • インプレッション数・クリック数・CTR・検索順位・エラー等が見れる
  • Duplex for Web に対応するには Search Console でエラーがないか見ておかないといけない

詳細

Linux for Chromebooks: Secure Development

• Linux for Chromebook ではCrOS上にターミナルVMがのっている
  • ゲストVMは基本的に権限を読み込みだけに制限されている
• ファイルアクセス
  • ファイルを共有できる領域を分けて階層ごとに管理
  • 9pサーバーでVMと共有
• Android開発はAndroid Studioを入れるだけでできる

詳細

What’s new in Angular

• Angular CLI が良い
  • Schematics を常に保ってくれる
  • ng-add Schematics を考慮した上でサードパーティライブラリを追加できる
  • ng-update Schematics を…
• 8.0.0 の新機能
  • Expanded Differential Loading
    • バンドル後のファイルでES2015の機能をそのまま使ってサイズを削減
    • チャンクをLazyload
  • Builder API
    • ng-build, ng-serve, ng-generate, ng-new 等のコマンドを変更できるように
• Project Ivy
  • Tree Shaking → バンドルにはAngularフレームワークのうちの必要な部分のコードしか含まれなくなる
  • Code Splitting → ページ単位のチャンクからコンポーネント単位へ
  • Progressive Hydration
    • ページが表示されたときにHydrateする積極的Hydrationとユーザーが操作したときに必要なものを取りに行く受動的Hydrationがある
    • Ivy 受動的Hydrationに対応した

詳細

Google Search and JavaScript Sites

• Googlebot が最新の Chrome を使うようになった
  • ES6 以上の機能が使える
  • 様々な新しい API が使える
  • ポリフィルが少なくて済む
• react-snap で静的ファイルを生成できる
• React Helmet でメタタグを書こう
• Googlebot はスクロールしないのでスクロールイベントは発生しない
  • LazyLoading の実装に注意
• localStorage, sessionStorage, and IndexedDB は有効だけど保存されない
• Permission が必要な処理はすべて「拒否」として動作する

詳細

Rapidly Building Better Web Experiences with AMP

• 改めて AMP とはなにか
  • スピードとパフォーマンスとエンゲージメントを高めるためのシンプルでロバストなフォーマット
  • 簡単にカスタマイズできるオープンソースフレームワーク
  • 効率的で常に最新なAMP JSとAMP HTML
  • AMPキャッシュによって保証されるスピードと信頼性
  • 継続的なエンゲージメントの上昇と報酬/対話
• AMP JS で JS が使えるようになった
• NEXT が AMP をサポート
• Bento AMP
• AMP List, Autocomplete, Carousels, Loaders, amp-toolbox-optimizer
• AMPHTML Ads
• AMP Landing Pages
  • CTR+87% というとんでもない数字が事例として紹介されていた
  • LP はキャッシュが聞きにくく立地でサービス本体とコードベースが別れていることが多いので AMP が非常に有効
• AMP Analytics
• AB テストもできる！ → amp-experiment
• AMP Stories, AMP for Email

What's next of AMP

詳細

AMP Stories: Visual Stories for the Web

• AMP Stories: Twitter とか Instragram のストーリーみたいなものを表示するための AMP コンポーネント
• Stroy は Web のように「見つけやすい」「共有しやすい」「リンクしやすい」という特性がない
• AMP の新機能
  • Localization → 21の言語に対応
  • フォーカルポイント → 写真の注目点を設定可能に
  • Sidebar: Stories からサイトのメニューを見れるハンバーガーメニューがある
  • Attachments: Story の詳細的なもの
  • Embeds: amp-twitter とかでツイートを埋め込めるようになったりする
• Story Ads
  • フルスクリーンで広告が表示できる
  • ロードが完了してから差し込めばいいのでコンテンツの表示を邪魔しない
• MakeStories
  • AMP ストーリーを作るためのツール

詳細

AMP for Email: Coming Soon to an Inbox Near You

• text,html の次として AMP が増えるイメージ
• GoogleDocs のドキュメントに来たコメントにその場で返信したりできる
• デザインガイドラインがあるのでそれに従っていればいい感じになる
• Gmail の設定で Dynamic email を有効にしないと AMP バージョンは表示されないよ

詳細

Speed at Scale: Web Performance Tips and Tricks from the Trenches

• LightWallet で Performance Budgets を計測しよう
• Performance budget calculator で JS と Non-JS のソース料から TTI を予想する
  • 目標となる TTI から Performance Budgets の量を決定できる
• Native Lazy loading
• Image CDN で適切なサイズ・クオリティの画像を簡単に用意できる
• 巨大なライブラリの排除

• quicklink で ページ遷移が 2.7s 速くなった
• Edge Side Inclusion で CDN で Critical CSS をインライン化
• Brotli で gzip より効率よく圧縮しよう
• ネットワーク状況を調べて Adaptive serving しよう
• Get Fast &Stay Fast

詳細

完走した感想

Google IO のセッションはすべて YouTube で公開されている上に字幕もついているのでなんとかすべて視聴することができました。メモを取らずに見ると流し見するだけになってしまう予感がしたのですべての動画に対してまとめの記事を作っていますが、この作業が本当に大変でした。1本40分の動画に対して2時間半ぐらいの作業時間がかかっています。あー大変だった！ですが、その分得るものも多く、Web 関連技術の最新の動向や更に詳細を知りたいときのわかりやすいドキュメントの存在 ² について知ることができたのは良かったです。来年は現地に行って生で見たいですね！！！

1. YouTube で Web at Google I/O 2019 というプレイリストとしてまとめられているものだけを対象としています。IO の公式ページから Web タグが付いているものだけを対象と考えることもできますが、数が大きすぎるのと Web とはあまり関係ないものも多いため、Web 系の人はまずはこちらを見るのが良いと思います。------そんなことを言っていたらIOから1ヶ月以上立ってリストに動画が追加されて系28本になってしまいました…。この記事では最初からあった24本だけを対象にしています。 ↩

2. これが充実しているのがGoogleのすごいところです。すべての資料が集約されているわけではないですが web.dev がポータル的な存在になっています。これを読んでいるだけできれいでお行儀の良い Web サービスを作れるようになっている気がします。 ↩