Chrome は、より良いウェブの実現に向けてオープンソース フレームワークと連携しています
Chrome はウェブ フレームワーク エコシステムに積極的に貢献しています。Chrome Dev Summit 2019 での講演では、過去 1 年間の取り組みについて説明しました。
講演の概要と詳細、リソースについては、以下をご覧ください。
ウェブをより良くするにはどうすればよいか
Chrome チームの全員が、ウェブをより良くすることを目標にしています。デベロッパーが優れたウェブページを構築するのに役立つ機能を備えられるよう、ブラウザ API と V8（Chrome の基盤となる JavaScript エンジンおよび WebAssembly エンジン）の改善に取り組んでいます。また、さまざまな方法でオープンソース ツールに貢献することで、すでに本番環境で稼働しているウェブサイトの改善にも取り組んでいます。
ほとんどのウェブ デベロッパーは、可能な限りオープンソース ツールに依存しており、完全にカスタムの インフラストラクチャを構築することを好みません。クライアントサイドの JavaScript フレームワークと UI ライブラリは、オープンソースの使用率の増加に貢献しています。最も人気のある 3 つのクライアントサイド フレームワークとライブラリ（ React、Angular、Vue）のデータは次のとおりです。
- MDN の第 1 回年次ウェブ デベロッパーおよびデザイナー調査 の回答者の 72% が、これらのフレームワークとライブラリのいずれかを使用しています。
- HTTP Archive によって分析された上位 500 万件の URL のうち、 32 万件を超えるサイトがこれらのフレームワークとライブラリのいずれかを使用しています。
- 費やした時間でグループ化すると、上位 100 件の URL のうち 30 件がこれらのフレームワークとライブラリのいずれかを使用しています。（調査は内部データに基づいて行われました）。
つまり、オープンソース ツールを改善することで、ウェブを直接的に改善できる ということです。そのため、Chrome エンジニアは外部のフレームワークとライブラリの作成者と直接連携して作業を開始しました。
ウェブ フレームワークへの貢献
ウェブページの構築と構造化に一般的に使用されるフレームワークは、次の 2 つのカテゴリに分類されます。
- Preact、React、Vue などのUI フレームワーク （またはライブラリ）。アプリケーションのビューレイヤを制御します（コンポーネント モデルなど）。
- ウェブ フレームワーク（Next.js、Nuxt.js、Gatsby など）。サーバーサイド レンダリングなど、独自の機能が組み込まれたエンドツーエンド システム を提供します。通常、これらのフレームワークはビューレイヤに UI フレームワークまたはライブラリを利用します。
デベロッパーはフレームワークを使用しないこともできますが、ビューレイヤ ライブラリ、ルーター、スタイル設定システム、サーバー レンダラなどを組み合わせることで、独自のフレームワークを作成することになります。ウェブ フレームワークは独自の機能を提供しますが、デフォルトで多くの懸念事項に対応しています。
この記事では、Chrome チームの貢献など、さまざまなフレームワークとツールに最近導入された多くの改善点について説明します。
Angular
Angular チームは、フレームワークのバージョン 8 に多くの改善を加えました。
- 差分読み込みを デフォルトで行い、新しいブラウザで不要なポリフィルを最小限に抑えます。
- ルートの遅延読み込みのための標準の動的インポート構文をサポートします。
- ウェブワーカーのサポートにより、メインスレッドとは別のバックグラウンド スレッドでオペレーションを実行できます。
- Ivy は、Angular の新しいレンダリング エンジンであり、再コンパイルのパフォーマンスが向上し、バンドルサイズが削減されます。既存のプロジェクトでは プレビュー モード で利用できます。
これらの改善について詳しくは、 Angular バージョン 8 をご覧ください。Chrome チームは、今後も機能が追加されるため、来年も緊密に連携して取り組んでいく予定です。
Next.js
Next.js は、ビューレイヤとして React を使用するウェブ フレームワークです。多くのデベロッパーがクライアントサイド フレームワークに期待する UI コンポーネント モデルに加えて、Next.js には次のようなデフォルト機能が組み込まれています。
- デフォルトのコード分割によるルーティング
- コンパイルとバンドル（Babel と webpack を使用）
- サーバーサイド レンダリング
- ページ単位でデータを取得するメカニズム
- カプセル化されたスタイル設定（styled-jsx を使用）
Next.js はバンドルサイズの削減に最適化されています。Chrome チームは、パフォーマンスのさらなる改善に役立つ領域を特定しました。各機能の詳細については、コメントのリクエスト（RFC）とプルリクエスト（PR）をご覧ください。
- より細かいバンドルを生成する webpack チャンク戦略の改善により、複数のルートで取得される重複コードの量が削減されます (RFC, PR)。
- モジュール/nomodule パターン を使用した差分読み込みにより、コード を変更せずに Next.js アプリの JavaScript の合計量を最大 20% 削減できます（RFC、 PR）。
- User Timing API を利用したパフォーマンス指標のトラッキングの改善（PR）。
また、Next.js のユーザー エクスペリエンスとデベロッパー エクスペリエンスを向上させるために、次のような他の機能も検討しています。
- 同時実行モードを有効にして、コンポーネントのプログレッシブ ハイドレーションまたは部分的なハイドレーションを有効にします。
- すべてのソースファイルと生成されたアセットを分析して、より適切なエラーと警告を表示する webpack ベースの準拠システム（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 ライブラリ、またはあらゆる形式のウェブツール（バンドラー、コンパイラ、リンター）に取り組んでいる場合は、 フレームワーク ファンドにご応募ください！