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

Chrome 77 の新機能

Pete LePage

Chrome 77 のリリースが開始されました。

サイトのパフォーマンスをトラッキングするより良い方法として、Largest Contentful Paint があります。
フォームに新しい機能が追加されました。
ネイティブの遅延読み込みが利用可能になりました。
Chrome DevSummit 2019 は 2019 年 11 月 11 ～ 12 日に開催されます。
その他多くの機能。

Pete LePage と申します。Chrome 77 のデベロッパー向けの新機能について、詳しく説明します。

Largest Contentful Paint

サイトの実際のパフォーマンスを把握して測定するのは難しい場合があります。load や DOMContentLoaded などの指標では、ユーザーが画面上で何を見ているかはわかりません。First Paint と First Contentful Paint は、エクスペリエンスの開始のみをキャプチャします。First Meaningful Paint のほうが優れていますが、複雑で、誤りがあることもあります。

Chrome 77 以降で利用可能な Largest Contentful Paint API は、ビューポートに表示される最大のコンテンツ要素のレンダリング時間を報告し、ページのメインコンテンツが読み込まれた時点を測定できるようにします。

Largest Contentful Paint を測定するには、Performance Observer を使用して largest-contentful-paint イベントを探す必要があります。

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

ページは段階的に読み込まれるため、ページ上の最大要素が変更される可能性があります。そのため、アナリティクスサービスには最後の largest-contentful-paint イベントのみを報告する必要があります。

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

Phil は、web.dev で Largest Contentful Paint に関する優れた投稿をしています。

フォームの新機能

多くのデベロッパーは、既存の要素の外観をカスタマイズしたり、ブラウザに組み込まれていない新しいコントロールを構築したりするために、カスタムフォームコントロールを構築します。通常、これは JavaScript と非表示の <input> 要素を使用することになりますが、完璧なソリューションではありません。

Chrome 77 で追加された 2 つの新しいウェブ機能により、カスタムフォームコントロールを簡単に作成でき、既存の多くの制限が解除されます。

`formdata` イベント

formdata イベントは、任意の JavaScript コードがフォーム送信に参加できるようにする低レベルの API です。使用するには、操作するフォームに formdata イベントリスナーを追加します。

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

ユーザーが送信ボタンをクリックすると、フォームから formdata イベントが送信されます。このイベントには、送信されるすべてのデータを保持する FormData オブジェクトが含まれます。その後、formdata イベントハンドラで、formdata が送信される前に更新または変更できます。

フォームに関連付けられたカスタム要素

フォームに関連付けられたカスタム要素は、カスタム要素とネイティブコントロールのギャップを埋めるのに役立ちます。静的 formAssociated プロパティを追加すると、カスタム要素を他のすべてのフォーム要素と同様に扱うようにブラウザに指示します。また、ネイティブコントロールとの整合性を確保するために、入力要素に共通のプロパティ（name、value、validity など）を追加する必要があります。

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

詳しくは、web.dev の高度なフォームコントロールをご覧ください。

ネイティブ遅延読み込み

前回の動画でネイティブレイジーローディングを忘れていたなんて、とても素晴らしいので、今から追加します。遅延読み込みとは、画面外の <img> や <iframe> などの重要でないリソースの読み込みを、必要になるまで延期してページのパフォーマンスを向上させる手法です。

Chrome 76 以降では、カスタムの遅延読み込みコードを記述したり、別の JavaScript ライブラリを使用したりすることなく、ブラウザが遅延読み込みを処理します。

画像または iframe を遅延読み込みすることをブラウザに指示するには、loading="lazy" 属性を使用します。「上部」にある画像と iframe は通常どおり読み込まれます。下にあるものは、ユーザーがその近くまでスクロールしたときにのみ取得されます。

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

詳しくは、web.dev のウェブのブラウザレベルの遅延読み込みをご覧ください。

Chrome Dev Summit 2019

Chrome Dev Summit が 11 月 11 日と 12 日に開催されます。

ウェブプラットフォームの最新のツールやアップデートについて学び、Chrome エンジニアリングチームから直接情報を得る絶好の機会です。

イベントは YouTube チャンネルでライブ配信されます。現地で参加したい場合は、Chrome Dev Summit 2019 ウェブサイトで招待状をリクエストしてください。

その他

これらはデベロッパー向け Chrome 77 の変更のほんの一部であり、もちろん他にも多くの変更があります。

Contact Picker API は、オリジントライアルとして利用できる新しいオンデマンドピッカーです。ユーザーは連絡先リストからエントリを選択して、選択した連絡先の限定的な詳細情報をウェブサイトと共有できます。

また、intl.NumberFormat API に新しい測定単位が追加されました。