web.dev のライブのまとめ

3 日間にわたるオンライン コミュニティ イベントで発表された主なニュースと最新情報のまとめ、および今後の地域イベントに関するリマインダー。

3 日間にわたるイベント web.dev LIVE が終了しました。このイベントでは、ウェブ コミュニティの一部がオンラインで集まり、ウェブ デベロッパーの現状について話し合いました。毎日、異なる地域のタイムゾーンでイベントを開始し、Google 社員が最新情報、ニュース、ヒントを共有しました。これは、ウェブの安定性、強力さ、アクセシビリティを維持するためのツールとガイダンスを開発者に提供することを目的としています。

ライブ配信を見逃した場合は、セッションの録画を YouTube でご覧いただけます。また、Google デベロッパー グループが主催する地域イベントが世界各地で開催される予定です。これらのイベントでは、web.dev LIVE で取り上げたトピックに関連する特集セッションが提供されます。

3 日間にわたって共有されたニュースや最新情報の一部を詳しく見ていきましょう。

ウェブに関する指標

Chrome チームは、デベロッパーがウェブ上で優れたユーザー エクスペリエンスを提供できるように、統一されたガイダンス、ウェブに関する指標、ツールを提供する ウェブに関する指標 イニシアチブを発表しました。Google 検索チームも最近発表したように、ページ エクスペリエンスをランキング基準として評価し、その基盤として Core Web Vitals 指標を組み込む予定です。

2020 年の Core Web Vitals の 3 つの柱は、ページ コンテンツの読み込み、インタラクティブ性、視覚的な安定性です。これらは、次の指標によって把握されます。

• Largest Contentful Paint は、知覚された読み込み速度を測定し、ページの読み込みタイムラインにおいてページのメイン コンテンツが読み込まれたと思われる時点を示します。
• First Input Delay は、応答性を測定する指標です。ユーザーが最初にページを操作しようとしたときに感じるエクスペリエンスを定量化します。
• Cumulative Layout Shift は、視覚的な安定性を測定し、ページ コンテンツの予期しない移動量を定量化します。

web.dev LIVE では、Core Web Vitals を最適化する方法と、Chrome DevTools を使用してサイトの Vitals 値を調べる方法に関するベスト プラクティスを紹介しました。また、パフォーマンスに関連するその他の多くの講演も共有しました。これらは、web.dev/live の 1 日目のスケジュールで確認できます。

tooling.report

ウェブのように広範なプラットフォーム向けの開発は、困難を伴うことがあります。ビルドツールは、ウェブ デベロッパーとプロダクトのライフサイクルを管理するうえで重要な役割を担っており、ウェブ開発プロジェクトの中心となることがよくあります。

扱いにくいビルド構成ファイルはよく見かけます。そこで、ウェブ デベロッパーとツール作成者がウェブの複雑さを克服できるように、tooling.report を構築しました。このウェブサイトは、次のプロジェクトに最適なビルドツールの選択、あるツールから別のツールへの移行に価値があるかどうかの判断、ツールの構成とコードベースにベスト プラクティスを組み込む方法の把握に役立ちます。

ウェブ開発のベスト プラクティスに沿ったビルドツールを特定するために、一連のテストを設計しました。Google は、ビルドツールの作成者と協力して、ツールを正しく使用し、公平に表現できるようにしました。

tooling.report の初期リリースでは、webpack v4、Rollup v2、Parcel v2、Browserify と Gulp が対象となっています。これらは、現在最も人気のあるビルドツールのようです。tooling.report は、コミュニティの協力を得て、より多くのビルドツールや追加のテストを追加できる柔軟性を備えています。

テストすべきベスト プラクティスが不足している場合は、GitHub の問題で提案してください。テストの作成や、初期セットに含まれていない新しいツールの追加をご希望の場合は、ぜひご協力ください。

それまでの間、tooling.report の構築に向けた Google のアプローチについて詳しく読み、web.dev LIVE のセッションをご覧ください。

ウェブのプライバシーとセキュリティ

Chrome は、ユーザーのプライバシーを尊重し、ウェブがすべてのユーザーにとって機能し続けるようにする主要なユースケースを維持するオープンウェブを信じています。

2019 年、Chrome は Cookie の標準を更新することを提案しました。これは、デフォルトで Cookie をファーストパーティのコンテキストに制限し、サードパーティのコンテキストの Cookie を明示的にマークすることを求めるものです。具体的には、クロスサイト リクエスト フォージェリ攻撃に対する防御手段となります。この提案は現在、Chrome、Firefox、Edge などのブラウザで採用されています。

Chrome は、COVID-19 の影響を考慮して、これらの変更を一時的にロールバックすることにしましたが、残念ながら、人々が最も脆弱な危機的状況において、このような攻撃が増加しています。そのため、Chrome 84 Stable 版のリリース（2020 年 7 月中旬）に伴い、Chrome バージョン 80 以降のすべてのバージョンで変更のロールアウトが再開されます。詳しくは、SameSite Cookie のガイダンスと web.dev LIVE セッションをご覧ください。

さらに、Chrome はプライバシー サンドボックスという名の下に、ウェブ プラットフォームを使用して生計を立てるユースケースをサポートしつつ、ユーザーのプライバシーをより尊重する方法で実現することを目指した、数多くの標準提案を導入しています。Chrome は、これらの提案に関するフィードバックを積極的に求めており、W3C のオープン フォーラムに参加して、これらの提案や他の関係者から提出された提案について議論しています。この取り組みの詳細については、オープンウェブのセキュリティとプライバシーのセッションをご覧ください。

最後に、ユーザーのセキュリティについて見てみましょう。Spectre は、1 つのブラウザ プロセスで実行されている悪意のあるコードが、異なるオリジンからのデータであっても、そのプロセスに関連するすべてのデータを読み取ることができるという脆弱性でした。これに対するブラウザの緩和策の 1 つがサイト分離です。つまり、各サイトを個別のプロセスに配置します。詳しくは、新しいクロスオリジン Opener Policy とクロスオリジン Embedder Policy（COOP と COEP）に関する web.dev LIVE セッションをご覧ください。

強力な機能を備えたウェブの構築

Chrome は、デベロッパーが最高品質のウェブアプリを自由に作成し、デバイスを問わず、より多くのユーザーにリーチできるようにしたいと考えています。PWA のインストール可能性と信頼性を機能プロジェクト（Project Fugu）と組み合わせることで、Chrome はプラットフォーム固有のアプリとウェブのギャップを埋めるために 3 つのことに重点を置き、優れたエクスペリエンスを構築して提供できるようにしています。

まず、Chrome チームは、ウェブ デベロッパーとユーザーがインストール エクスペリエンスをより細かく制御できるように、アドレスバーにインストール プロモーションを追加するなど、さまざまな取り組みを行ってきました。ウェブが普及しているにもかかわらず、一部のビジネスでは、アプリをストアに掲載することが依然として重要です。この問題を解決するため、Chrome は Bubblewrap をリリースしました。これは、PWA を Google Play ストアに簡単に公開できるようにするライブラリと CLI です。実際、PWABuilder.com では、Bubblewrap が内部で使用されるようになりました。条件を満たしていれば、数回のマウスクリックで APK を生成し、PWA を Google Play ストアにアップロードできます。

次に、Chrome はオペレーティング システムとの統合を強化しています。たとえば、Web Share API を使用してシステムレベルの共有サービスを呼び出すことで、写真や曲などを共有したり、インストール済みの別のアプリから共有されたコンテンツを受信したりできます。アプリのバッジを使用すると、ユーザーに最新情報を提供したり、新しいアクティビティをさりげなく通知したりできます。また、アプリ ショートカットを使用して、ユーザーがアクションをすばやく開始できるようになりました。これは Chrome 84（2020 年 7 月中旬）でリリースされる予定です。

最後に、Chrome は、ユーザーのローカル ファイル システム上のファイルの読み取りと書き込みを行うエディタや、ローカルにインストールされたフォントのリストを取得してユーザーがデザインで使用できるようにするなど、これまで不可能だった新しいシナリオを可能にする新機能に取り組んでいます。

web.dev LIVE では、プラットフォーム固有のアプリと同じ機能、同じエクスペリエンスを提供できる他の多くの機能について説明しました。web.dev/live の 2 日目のスケジュールですべてのセッションを確認できます。

Chrome DevTools と Lighthouse 6.0 の新機能

Chrome DevTools: 新しい [Issues] タブ、色覚特性エミュレータ、ウェブに関する指標のサポート

Chrome DevTools の最も強力な機能の一つは、ウェブページの問題を特定し、デベロッパーに通知する機能です。これは、プライバシー重視のウェブの次のフェーズに移行するにあたって、最も重要なことです。通知疲れを軽減し、コンソールを整理するために、Chrome DevTools に問題タブが導入されました。このタブでは、まず 3 種類の重大な問題（Cookie の問題、混合コンテンツ、COEP の問題）に焦点を当てています。まずは、[Issues] タブで問題を見つけて修正する方法に関する web.dev LIVE セッションをご覧ください。

さらに、Core Web Vitals は、ウェブ デベロッパーが追跡、測定する最も重要な指標セットの 1 つになりつつあります。DevTools では、デベロッパーがこれらのしきい値に対するパフォーマンスを簡単に追跡できるようにしたいと考えています。これら 3 つの指標は、Chrome DevTools の [Performance] パネルに表示されるようになりました。

最後に、アクセシビリティに重点を置くデベロッパーが増えていることから、DevTools に色覚特性エミュレータも導入されました。これにより、デベロッパーはかすみ目などの視覚特性をエミュレートできます。この機能やその他の多くの機能について詳しくは、DevTools の新機能セッションをご覧ください。

Lighthouse 6.0: 新しい指標、Core Web Vitals のラボ測定、更新されたパフォーマンス スコア、新しい監査

Lighthouse は、デベロッパーがサイトのパフォーマンスを改善するのに役立つオープンソースの自動化ツールです。最新バージョンでは、Lighthouse チームは、重要な側面に対するユーザー エクスペリエンスの品質をバランスよく把握できる指標に基づいて分析情報を提供することに重点を置いています。

一貫性を確保するため、Lighthouse に Core Web Vitals のサポートが追加されました。LCP、TBT（Lighthouse はラボツールであり、FID はフィールドでのみ測定できるため、FID のプロキシ）、CLS です。Lighthouse では、First Meaningful Paint、First CPU Idle、Max Potential FID の 3 つの古い指標も削除されました。これらの削除は、指標の変動性や、Lighthouse が測定しようとしているユーザー エクスペリエンスの一部をより適切に反映する新しい指標などの考慮事項によるものです。さらに、Lighthouse では、ユーザーからのフィードバックに基づいて、各指標が全体的なパフォーマンス スコアにどの程度影響するかも調整されています。

Lighthouse には、バージョン 5 と 6 のスコアを比較してパフォーマンス スコアを調べることができるスコア計算ツールも追加されました。Lighthouse 6.0 で監査を実行すると、レポートに計算ツールへのリンクが表示され、結果が入力されます。

最後に、Lighthouse には、JavaScript の分析とユーザー補助に重点を置いた新しい監査が多数追加されました。

詳しくは、速度ツールの新機能のセッションをご覧ください。

詳細

ウェブ プラットフォームの機会と課題について話し合うためにご参加いただいたコミュニティの皆様に感謝いたします。

この投稿では、イベントのハイライトの一部をまとめましたが、他にも多くのことがありました。すべてのセッションをチェックしてください。また、web.dev ニュースレターに登録すると、最新のコンテンツが受信トレイに直接届きます。また、web.dev/live の地域イベント セクションにアクセスして、お住まいのタイムゾーンで開催されるコミュニティ イベントをご確認ください。