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

こんにちは、メルカリでフロントエンドエンジニアをしている @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 関連技術の最新の動向や更に詳細を知りたいときのわかりやすいドキュメントの存在 ² について知ることができたのは良かったです。来年は現地に行って生で見たいですね！！！

YouTube で Web at Google I/O 2019 というプレイリストとしてまとめられているものだけを対象としています。IO の公式ページから Web タグが付いているものだけを対象と考えることもできますが、数が大きすぎるのと Web とはあまり関係ないものも多いため、Web 系の人はまずはこちらを見るのが良いと思います。------そんなことを言っていたらIOから1ヶ月以上立ってリストに動画が追加されて系28本になってしまいました…。この記事では最初からあった24本だけを対象にしています。 ↩
これが充実しているのがGoogleのすごいところです。すべての資料が集約されているわけではないですが web.dev がポータル的な存在になっています。これを読んでいるだけできれいでお行儀の良い Web サービスを作れるようになっている気がします。 ↩