Chrome チームでは、ユーザー エクスペリエンスとウェブ エコシステムの発展を重視しています。 Google は、静的なドキュメントだけでなく、リッチでインタラクティブなアプリケーションを使用するときも、ウェブで可能な限り優れたユーザー エクスペリエンスを実現したいと考えています。
オープンソースのツールとフレームワークは、デベロッパーが優れたデベロッパー エクスペリエンスをサポートすると同時に、ウェブ向けの最新のアプリを構築できるようにするうえで大きな役割を果たします。これらのフレームワークとツールは、あらゆる規模の企業とウェブ開発を行っている企業を支援します。
フレームワークは、パフォーマンス、ユーザー補助、セキュリティ、モバイル対応などの主要な品質面でデベロッパーを支援するうえでも大きな役割を果たすと Google は考えています。すべてのデベロッパーとサイト所有者にこれらの分野のエキスパートになってもらい、絶えず変化するベスト プラクティスに対応してもらう代わりに、フレームワークが組み込みソリューションでこれらをサポートできます。これにより、デベロッパーはプロダクト機能の構築に集中できます。
簡単に言えば、UX 品質の基準が高いことがウェブ向け開発の副作用になる、というのが Google のビジョンです。
Aurora: Chrome とオープンソースのウェブ フレームワークおよびツールのコラボレーション
Google は約 2 年間、Next.js、Nuxt、Angular などの広く利用されているフレームワークと協力して、ウェブ パフォーマンスの改善に取り組んできました。また、Vue、ESLint、webpack などの一般的なツールやライブラリにも資金を提供しています。本日、この取り組みに Aurora と名付けました。
オーロラは、空にきらめく自然光です。Google は、フレームワークで構築されたユーザー エクスペリエンスを輝かせるため、この名前にふさわしいと考えました。
Aurora については、今後数か月以内に詳細をお知らせします。これは、Chrome エンジニア（社内コードネームは WebSDK）の少人数のチームとフレームワーク作成者が共同で行うものです。Google の目標は、レンダリングに使用するブラウザに関係なく、本番環境のアプリで可能な限り優れたユーザー エクスペリエンスを提供することです。
戦略は？
Google では、フレームワークとツールを使用して、Google 検索、マップ、画像検索、Google フォトなどの大規模なウェブ アプリケーションを構築および維持するにあたり、多くのことを学びました。強固なデフォルトと独自のツールを提供することで、フレームワークが予測可能なアプリの品質において重要な役割を果たす仕組みを見出しました。
フレームワークには、クライアントとサーバー、開発環境と本番環境で、コンパイラ、バンドラ、リンターなどのツールを統合し、システム全体にわたって DX と UX の両方に影響を与える独自の視点があります。
フレームワークにソリューションが組み込まれている場合、デベロッパー チームはこれらのソリューションを使用して、プロダクトにとって最も重要なこと、つまりユーザーに優れた機能を提供することに時間を集中できます。
Google はスタックの各レイヤに存在するツールの改善に取り組んでいますが、Next.js、Nuxt、Angular CLI などのフレームワークは、アプリケーションのライフサイクルのすべてのステップを管理します。こうした理由から、React の採用はコア UI フレームワーク エコシステム内で最大規模であるため、最適化のほとんどは、Next.js で実証されてから、エコシステムの他の部分に拡大しています。
Aurora は、一般的な技術スタックの適切なレイヤにソリューションを提供することで、大規模な成功をサポートします。ブラウザとフレームワークのギャップを埋めることで、ウェブ プラットフォームを改善するためのフィードバック ループとして機能しながら、高品質をウェブ向けのビルドの副作用として使用できます。
作業プロセスはどのようなものか？
Aurora がブラウザとデベロッパー エコシステムの橋渡しをする方法に関する Google の原則は、謙虚、好奇心、科学的な探求、実用主義です。Google はフレームワーク作成者と協力して改善に取り組み、コミュニティと連携し、変更を加える前にデュー デリジェンスを実施しています。
開発中の新機能について Google が実施する手順を以下にまとめます。
- 代表的なアプリを使用して、一般的なスタックにおけるユーザー エクスペリエンスの問題を特定します。
- 「強いデフォルト」に重点を置いて、この問題に対処するためのプロトタイプ ソリューションを作成する。
- 別のフレームワーク スタックで機能を検証し、適応可能であることを確認します。
- いくつかの本番環境アプリでテストし、機能を検証します（パフォーマンスのラボテストが一般的です）。
- RFC プロセスを使用して、コミュニティからのフィードバックに対処して設計を推進する。
- 対象物を一般的なスタック（通常は旗の裏）に配置する。
- 代表的な製品版アプリでこの機能を有効にして、品質とデベロッパー ワークフローの統合を評価します。
- この機能を採用した、またはアップグレードした代表的な製品版アプリの指標を追跡して、パフォーマンスの向上を測定します。
- この機能をスタックのデフォルトとして有効にすると、アップグレードするすべてのユーザーにメリットがあります。
- 効果が実証されたら、他のフレームワークを使用して機能を導入します。
- フィードバック ループを使用して、ウェブ プラットフォームのギャップを特定します。
- 次の問題に進みます。
基盤となるツールとプラグイン（webpack、Babel、ESLint、TypeScript など）は、多くのフレームワークで共有されます。これにより、単一のフレームワーク スタックに貢献している場合でも、波及効果を生み出すことができます。
さらに、Chrome Framework Fund は、資金提供によりオープンソースのツールとライブラリをサポートしています。Google は、他のフレームワークやツールへの変換が、上記の取り組みと問題やソリューション レイヤにおいて十分な重複があることを願っていますが、まだまだ改善の余地があることはわかっています。そのため Google は、デベロッパーの皆様の成功を支援するライブラリとフレームワークを確実に提供したいと考えています。これこそ、Google が Chrome Framework Fund に引き続き投資する理由の一つです。これまで、Webpack 5 と Nuxt に向けた取り組み、ESLint のパフォーマンスと改善をサポートしています。
これまでに得られた成果は何でしょうか。
Google はこれまで、画像、JS、CSS、フォントなどのリソースの基礎的な最適化に重点を置いてきました。複数のフレームワークのデフォルトを改善する多くの最適化がリリースされています。以下にその例を示します。
- Next.js の Image コンポーネント。画像の読み込みのベスト プラクティスをカプセル化し、Nuxt と共同で開発しています。このコンポーネントを使用することで、ペイント時間とレイアウト シフトが大幅に改善されました（例: nextjs.org/give での Largest Contentful Paint は 57% 削減され、Cumulative Layout Shift は 100% 減少しました）。
- ビルド時にウェブフォント宣言用 CSS を自動的にインライン化する。この機能は Angular（Google Fonts）と Next.js（Google Fonts と Adobe Fonts）で導入され、Largest Contentful Paint と First Contentful Paint が大きく改善されています（例）。
- Angular と Next.js の両方で Critters を使用して重要な CSS をインライン化し、ペイント時間を短縮します。フォント CSS インライン機能と組み合わせると、一般的な大規模な Angular アプリで Lighthouse のパフォーマンス スコアが 20 ～ 30 ポイント向上しました。
- Next.js ですぐに使用できる ESLint サポート。カスタム プラグインと共有可能な構成が含まれており、フレームワーク固有の一般的な問題をビルド時に簡単に把握できるため、予測可能な読み込みパフォーマンスを実現できます。
- Create React App と Next.js に組み込まれたパフォーマンス リレイヤが導入され、ウェブに関する指標やその他のカスタム指標からページ パフォーマンスを簡単に把握できるようになりました。
- Next.js と Gatsby ではきめ細かなチャンク化により、キャッシュのパフォーマンスを向上させながら、バンドルサイズを 30 ～ 70% 削減しました。Webpack 5 では、これがデフォルトになっています。
- 最新のブラウザのバンドルサイズを改善するため、Next.js チームと共同で、古いブラウザ用の独立したポリフィル チャンク。
これらの機能はすべて、デフォルトで自動的に有効になるか、オプトインするだけで有効になります。これは、デベロッパーがワークフローを複雑化することなく、簡単にメリットを享受できるようにするために不可欠です。
2021 年の予定
今年の後半は、フレームワーク スタックがユーザー エクスペリエンスを向上させ、Core Web Vitals などの指標のパフォーマンスを向上させることに重点を置きます。この作業には以下が含まれます。
- ベスト プラクティスを適用するための適合性。詳しくは、ブログ投稿をご覧ください。
- Google とのコラボレーションによる画像、フォント、重要な CSS の最適化による、初期読み込みのパフォーマンスの最適化。
- Script コンポーネントに関する作業の基盤を構築し、3P の最適な順序付けと順序付けを徹底的に調査することで、パフォーマンスへの影響を最小限に抑えながらサードパーティ スクリプト（3P）を読み込みます。
- 大規模な JavaScript のパフォーマンス（Next.js で React Server Components をサポートするなど）。
Google のチームは、RFC に関するより定期的な情報の投稿と、これらのアイデアの設計ドキュメントを投稿することを目指しています。これにより、希望するフレームワークやデベロッパーもそれを実現できるようになります。
おわりに
Aurora チーム（Shubhie、Houssein、Alex、Gerald、Ralph、Addy、Kara、Keen、Katie）は、オープンソース コミュニティのユーザー エクスペリエンスの改善と、オープンソース コミュニティの機能向上に引き続き取り組んでいます。今後、さらに多くのフレームワークやツールを 利用できるように対応範囲を広げていく予定です今後 1 年間に提供される Google チームからのブログ投稿、講演、RFC について詳しくは、こちらをご確認ください。