このページは Cloud Translation API によって翻訳されました。

web.dev のライブのまとめ

3 日間のオンラインコミュニティイベントで発表された主要なニュースと最新情報の概要と、今後の地域イベントについてのリマインダーです。

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

ライブ配信の一部を見逃してもセッションはすべて録画され、YouTube で視聴できます。また、今後世界各地で地域ごとのイベントが開催されます。このイベントは Google デベロッパーグループによって主催され、web.dev のライブで取り上げた内容に関連するトピックについて、詳細なセッションが提供されます。

この 3 日間で共有されたニュースと最新情報の一部を見てみましょう。

ウェブに関する指標

Chrome チームは、デベロッパーがウェブで優れたユーザーエクスペリエンスを提供できるように、統合されたガイダンス、指標、ツールを提供する Web Vitals イニシアチブを発表しました。また、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 を使用してサイトにとって重要な価値を確認する方法に関するベストプラクティスを共有しました。また、web.dev/live の 1 日目のスケジュールにあるパフォーマンス関連のさまざまなトークも共有しました。

tooling.report

ウェブと同様に幅広いプラットフォームを対象に開発することは容易ではありません。多くの場合、ビルドツールはウェブ開発プロジェクトの中核であり、デベロッパーとプロダクトのライフサイクルを処理するうえで重要な役割を果たします。

扱いにくいビルド構成ファイルは誰もが目にすることでしょう。そこで、ウェブデベロッパーとツール作成者がウェブの複雑さを克服できるように、tooling.report を作成しました。このウェブサイトは、次のプロジェクトに適したビルドツールを選択し、あるツールから別のツールに移行する価値があるかを判断したり、ツール構成とコードベースにベストプラクティスを取り入れる方法を検討したりするのに役立ちます。

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

tooling.report の最初のリリースでは、webpack v4、Rollup v2、Parcel v2、Browserify with Gulp がカバーされています。これらは、現在最も人気のあるビルドツールです。コミュニティのサポートを受けて、より多くのビルドツールや追加のテストを柔軟に追加できる tooling.report を構築しました。

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

それまでの間、tooling.report の構築に対するアプローチの詳細をお読みになり、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 は、あるブラウザプロセスで実行される悪意のあるコードが、そのプロセスに関連するあらゆるデータを読み取れる可能性があるという脆弱性です。生成元のプロセスが異なっていても、そのプロセスに関連するデータを読み取れる可能性があります。この問題に対するブラウザでの軽減策の一つに、サイト分離があります。つまり、各サイトを別々のプロセスに入れるというものです。詳しくは、新しいクロスオリジンオープナーポリシーとエンベダーポリシー（COOP と COEP）の web.dev ライブセッションをご覧ください。

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

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

まず、Chrome チームは、ウェブデベロッパーとユーザーがインストール環境をより細かく制御できるようにする、アドレスバーへのインストールプロモーションの追加など、その他の機能に取り組んできました。ウェブが広く普及しているにもかかわらず、一部の企業にとっては、アプリをストアで公開することが重要であることに変わりはありません。これを支援するために、Chrome では Bubblewrap をリリースしました。Bubblewrap は、PWA を Play ストアに簡単に公開できるようにするライブラリおよび CLI です。実際に、PWABuilder.com は内部で Bubblewrap を使用するようになりました。条件を満たしていれば、数回クリックするだけで APK を生成し、PWA を Play ストアにアップロードできます。

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

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

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

Chrome DevTools と Lighthouse 6.0 の新機能

Chrome DevTools: 新しい [問題] タブ、色欠陥エミュレータ、ウェブに関する指標のサポート

Chrome DevTools の最も強力な機能の一つは、ウェブページ上の問題を見つけてデベロッパーの注意を引くことです。これは、プライバシー最優先のウェブの次のフェーズに進むときに特に重要となります。コンソールでの通知疲れや煩雑さを軽減するために、Chrome DevTools で [問題] タブをリリースしました。このタブでは、まずは Cookie の問題、混合コンテンツ、COEP の問題という 3 種類の重大な問題に焦点を当てています。[問題] タブでの問題の検出と修正に関する web.dev のライブセッションを視聴して開始してください。

さらに、Core Web Vitals がウェブデベロッパーにとって追跡および測定すべき最も重要な指標セットの一つになっていることから、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 の地域イベントセクションにアクセスして、お住まいのタイムゾーンで近日開催予定のコミュニティイベントをご確認ください。