より快適なウェブの実現に向けて、Chrome はオープンソース フレームワークと協力しています
Chrome はウェブ フレームワーク エコシステムに積極的に貢献しています。Chrome Dev Summit 2019 での講演では、Google が過去 1 年間に行ったことを取り上げています。
この講演のさらに詳しいまとめと、追加の詳細やリソースをご紹介します。
ウェブをより良いものにするにはどうすればよいでしょうか？
Chrome チーム全員の目標は、ウェブをより良くすることです。Google は、デベロッパーが優れたウェブページを構築するための機能を利用できるように、ブラウザ API と V8（Chrome の基盤となる JavaScript および WebAssembly エンジン）の改善に取り組んでいます。また、さまざまな形でオープンソース ツールに貢献することで、すでに本番環境で稼働しているウェブサイトの改善にも取り組んでいます。
ほとんどのウェブ デベロッパーは、可能な限りオープンソース ツールに依存しており、完全なカスタム インフラストラクチャの構築は望んでいません。クライアントサイドの JavaScript フレームワークと UI ライブラリは、オープンソースの利用に占める割合が増加しています。よく使用されるクライアントサイドの 3 つのフレームワークとライブラリ、React、Angular、Vue のデータから、次のことがわかります。
- MDN's First Annual Web Developer & Designer Survey の参加者の 72% が、これらのフレームワークとライブラリを少なくとも 1 つ使用しています。
- HTTP Archive で分析された上位 500 万の URL の 32 万以上のサイトが、これらのフレームワークとライブラリの少なくとも 1 つを使用しています。
- 経過時間でグループ化すると、上位 100 件の URL のうち 30 件で、これらのフレームワークとライブラリの少なくとも 1 つが使用されています。（内部データを基に調査を実施しました）。
つまり、優れたオープンソース ツールはウェブの改善に直接つながるということです。そのため、Chrome のエンジニアは外部のフレームワークやライブラリの作成者と直接連携するようになりました。
ウェブ フレームワークへの貢献
ウェブページの構築と構造化に一般的に使用されるフレームワークは、次の 2 つのカテゴリに分類されます。
- Preact、React、Vue などの UI フレームワーク（またはライブラリ）。コンポーネント モデルなどを介してアプリのビューレイヤを制御します。
- Next.js、Nuxt.js、Gatsby などのウェブ フレームワーク。サーバーサイド レンダリングなどの独自の機能が組み込まれたエンドツーエンドのシステムを提供します。これらのフレームワークは通常、ビューレイヤに UI フレームワークまたは UI ライブラリを利用します。
デベロッパーはフレームワークを使用せずに、ビューレイヤ ライブラリ、ルーター、スタイル設定システム、サーバー レンダラなどを組み合わせることで、独自のタイプのフレームワークを作成することになることがよくあります。ウェブ フレームワークは独自のものですが、これらの懸念事項の多くはデフォルトで対応されます。
この投稿の残りの部分では、Chrome チームの貢献を含め、さまざまなフレームワークやツールにおける最近導入された多くの改善点について説明します。
Angular
Angular チームは、フレームワークのバージョン 8 にいくつかの改良を加えました。
- 新しいブラウザで不要なポリフィルを最小限に抑えるため、デフォルトで差分読み込みを行います。
- ルートの遅延読み込みで標準の動的インポート構文をサポートしました。
- メインスレッドとは別のバックグラウンド スレッドで処理を実行するためのウェブワーカーのサポート。
- 再コンパイルのパフォーマンスを高め、バンドルサイズを削減する Angular の新しいレンダリング エンジンである Ivy が、既存のプロジェクトのプレビュー モードで利用できます。
これらの改善の詳細については、「Angular のバージョン 8」をご覧ください。Chrome チームは来年、より多くの機能がリリースされ、緊密に協力していきます。
Next.js
Next.js は、React をビューレイヤとして使用するウェブ フレームワークです。Next.js には、多くのデベロッパーがクライアント側フレームワークに期待する UI コンポーネント モデルに加えて、いくつかの組み込みデフォルト機能が用意されています。
- デフォルトのコード分割を使用したルーティング
- コンパイルとバンドル（Babel と webpack を使用）
- サーバーサイド レンダリング
- ページ単位でデータを取得するメカニズム
- カプセル化されたスタイル設定（styled-jsx を使用）
Next.js ではバンドルのサイズを小さくするために最適化が行われており、Chrome チームはパフォーマンスをさらに改善できる領域の特定に役立っています。それぞれの詳細については、コメントのリクエスト（RFC）と pull リクエスト（PR）をご覧ください。
- よりきめ細かいバンドルを発行する改善された Webpack のチャンク戦略。複数のルート（RFC、PR）を介して取得される重複コードの量を削減します。
- module/nomodule パターンによる差分読み込み。コードを変更せずに Next.js アプリの JavaScript の合計量を最大 20% 削減できます（RFC、PR）。
- User Timing API（PR）を利用したパフォーマンス指標のトラッキングを改善しました。
また、Next.js を使用する際のユーザーとデベロッパーのエクスペリエンスを向上させるため、次のような他の機能も検討しています。
- 同時実行モードを有効にして、コンポーネントのプログレッシブまたは部分的なハイドレーションを実現します。
- すべてのソースファイルと生成されたアセットを分析して、より適切なエラーと警告を表面化させる、ウェブパック ベースの適合性システム（RFC）。
Nuxt.js
Nuxt.js は、Vue.js とさまざまなライブラリを組み合わせて独自の設定を提供するウェブ フレームワークです。Next.js と同様に、すぐに使える多くの機能が含まれています。
- デフォルトのコード分割を使用したルーティング
- コンパイルとバンドル（Babel と webpack を使用）
- サーバーサイド レンダリング
- ページごとの非同期データ取得
- デフォルトのデータストア（Vuex）
さまざまなツールのパフォーマンス向上に直接取り組むだけでなく、より多くのオープンソース フレームワークとライブラリに金銭的サポートを提供するためにフレームワーク ファンドを拡大しました。Nuxt.js の最近のサポートにより、よりスマートなサーバー レンダリングや画像最適化など、いくつかの機能が近い将来導入される予定です。
Babel
また、前述のフレームワークのほとんどすべて（Babel）で、基盤となる重要なツールのパフォーマンスを改善するための取り組みも進めています。
Babel は、新しい構文を含むコードを、さまざまなブラウザが理解できるコードにコンパイルします。最新のブラウザをターゲットにするために @babel/preset-env を使用することが一般的になりつつあります。この場合、さまざまなブラウザ ターゲットを指定して、選択したすべての環境に必要なポリフィルを提供できます。ターゲットを指定する 1 つの方法は、<script
type="module"> を使用して、ES モジュールをサポートするすべてのブラウザをターゲットにすることです。
この状況を最適化するために、新しいプリセット @babel/preset-modules をリリースしました。preset-modules は、ブラウザのバグを回避するために最新の構文を古い構文に変換するのではなく、可能な限り互換性のない最新の構文に変換することで、特定のバグを修正します。その結果、ほとんどのブラウザにほとんど変更を加えずに最新のコードを配信できます。
すでに preset-env を使用しているデベロッパーは、まもなく preset-env にも組み込まれるため、何もしなくてもこの最適化によるメリットが得られます。
次のステップ
オープンソースのフレームワークやライブラリと緊密に連携して優れたエクスペリエンスを提供することで、Chrome チームはユーザーとデベロッパーの双方にとって根本的に何が重要かを認識できます。
ウェブ フレームワーク、UI ライブラリ、またはなんらかのウェブツール（バンドラ、コンパイラ、リンター）に携わっている方は、フレームワーク ファンドにお申し込みください。