2021 年の Chrome Dev Summit で発表された重要な情報をまとめました。詳細を確認するためのリンクも掲載しています。
この記事では、Chrome Dev Summit 2021 の主な発表をまとめ、詳細を確認するためのリンクを紹介します。
ウェブの相互運用性を高める
ウェブの互換性はウェブ デベロッパーにとって最大の課題の 1 つです。そのため、Google は他のブラウザ ベンダーと協力して、互換性に関する上位 5 つの課題（flexbox、grid、position: sticky、aspect-ratio、transforms）を解決してきました。
この取り組みにより、すでにこれらの主要分野で改善が見られています。詳しくは、Compat 2021 年半ばのアップデートをご覧ください。
新しいクラスのアプリケーションをウェブ上で実行できるようにする
Project Fugu は、新しいクラスのアプリケーションをウェブで利用できるようにすることを目的とした取り組みです。Fugu API の進捗状況については、fugu-tracker.web.app で最新情報を確認できます。
Adobe は最近、Photoshop をウェブに導入することを発表しました。これは、Adobe、Google、ウェブ標準化団体のコラボレーションによって実現したものです。詳しくは、投稿「Photoshop のウェブ版への移行」をご覧ください。
プライバシーを確保する
一般的なウェブ機能の多くは、プライバシーを考慮して設計されていないサードパーティ Cookie やその他のクロスサイト トラッキング メカニズムに依存しているため、デベロッパーがプライバシーに対するニーズの高まりに対応することが難しくなっています。
Google はウェブ コミュニティや業界の関係者と協力して、エコシステムを支えるプライバシー保護のための新しいテクノロジーを開発しています。この取り組みは、サードパーティ Cookie を段階的に廃止し、隠されたトラッキングやブラウザ フィンガープリントを削減することを目的としています。
この取り組みについては、プライバシー サンドボックスのサイトをご覧ください。また、デベロッパー向けの提案に関する情報とガイド、変更と進捗状況に関する月次更新、ユーザー エージェント文字列の変更のタイムラインとテストの詳細に関する情報も提供しています。
Core Web Vitals を改善する
Google は、人気の JavaScript フレームワークのデベロッパーと協力して Core Web Vitals の改善に取り組んでおり、その一環として、皆様からのフィードバックをお待ちしている 2 つの新しい指標を特定しました。全体的な応答性とスムーズさについてお読みいただき、ご意見をお聞かせください。
また、PageSpeed Insights の更新版、現在 Canary で利用可能な Chrome DevTools の新しいレコーダー パネル、Lighthouse の新しいユーザー フロー API も発表されました。
新しいウェブ プラットフォーム機能を有効にする
RenderingNG は、Chromium のレンダリング エンジンの野心的なリファクタリングです。このプロジェクトでは、Chrome の長年のバグを修正し、新機能も利用できるようになります。これには、ウェブ デベロッパーから長年にわたって最も多くリクエストされていた機能であるコンテナ クエリが含まれます。
コンテナクエリは、メディアクエリを使用してレスポンシブ デザインを作成したことがある人にはおなじみでしょう。ただし、ビューポートのサイズをクエリするのではなく、コンポーネントが配置されているコンテナのサイズをクエリできます。Google は、Chrome の #enable-container-queries フラグの背後で、新しい仕様の試験的な実装に取り組んでいます。
RenderingNG の詳細を説明したブログ投稿を読むか、こちらの動画を視聴して、この取り組みによって、かつては実現不可能と思われていた機能の実装が可能になった経緯をご確認ください。
美しくレスポンシブなサイトの作成を支援
新しいレスポンシブ デザインは、画面やコンテナのサイズだけではありません。最新のレスポンシブ サイトを作成する方法については、コース Learn Design をご覧ください。最初の 5 つのモジュールは本日リリースされ、残りのモジュールは今後数週間にわたって投稿されます。
今年、Chrome などのブラウザに新しい CSS プロパティが導入され、美しいエクスペリエンスを簡単に作成できるようになりました。accent-color と size-adjust の詳細をご覧ください。
新しい CSS をすぐに活用できるように、一連のレイアウト パターンをリリースしました。これらは、多くの一般的なインターフェース パターンで堅牢な出発点となります。
ウェブ テクノロジーを学ぶためのコースを提供する
Learn Design に加え、今年初めにリリースされた包括的な CSS コースである Learn CSS の新しいモジュールもリリースします。
また、機能的でアクセシブルなフォームを設計するのに役立つ完全なコース「フォームを学ぶ」も開発しました。これらのコースに加えて、Learn PWA の最初のいくつかのモジュールもご覧いただけます。