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

Chrome 124 の新機能

Pete LePage

Chrome 124 の主な機能は次のとおりです。

JavaScript から宣言型 Shadow DOM を使用できるようにする新しい API が 2 つあります。
Web Sockets のストリームを使用できます。
ビュー遷移が改良されました。
他にもたくさんあります。

詳細を知りたいですか？Chrome 124 リリースノートを確認する。

JavaScript で宣言型 Shadow DOM を使用する

JavaScript から宣言型 Shadow DOM を使用できるようにする新しい API が 2 つあります。

setHTMLUnsafe() は innerHTML と同様に、要素の内部 HTML を指定された文字列に設定できます。これは、次のような宣言型 Shadow DOM を含む HTML を使用する場合に便利です。

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

innerHTML のみを使用すると、ブラウザはそれを適切に解析できず、Shadow DOM がありません。しかし、setHTMLUnsafe() を使用すると、Shadow DOM が作成され、要素は想定どおり解析されます。

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

もう 1 つの API は parseHTMLUnsafe() で、DOMParser.parseFromString() と同様に機能します。

これらの API は両方とも安全ではありません。つまり、入力サニタイズを行いません。そのため、何を与えても安全であることを確認する必要があります。今後のリリースでは、入力のサニタイズを提供するバージョンを用意する予定です。

なお、いずれの API も最新バージョンの Firefox と Safari ではすでにサポートされています。

WebSocket Stream API

WebSocket は、ポーリングに依存せずにユーザーのブラウザとサーバーの間でデータをやり取りするための優れた方法です。これは、チャットアプリなどで受信された情報をすぐに処理したい場合に便利です。

しかし、処理能力を超える速さでデータが到着した場合はどうすればよいでしょうか。

これはバックプレッシャーと呼ばれ、深刻な頭痛を引き起こす可能性があります。残念ながら、WebSocket API にはバックプレッシャーに対処する適切な方法がありません。

WebSocket Stream API により、ストリームとウェブソケットの機能を利用できます。つまり、追加コストなしでバックプレッシャーを適用できます。

まず、新しい WebSocketStream を作成し、それに WebSocket サーバーの URL を渡します。

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

次に、接続が開くまで待ちます。これにより、ReadableStream と WritableStream が生成されます。ReadableStream.getReader() メソッドを呼び出すことで ReadableStreamDefaultReader を取得し、ストリームが完了するまでデータを read() できます。

データを書き込むには、WritableStream.getWriter() メソッドを呼び出します。このメソッドは WritableStreamDefaultWriter を取得し、データを write() できます。

ビューの切り替えの改善

Chrome 124 には、ビューの切り替えを簡単にする新機能が 2 つあります。

pageswap イベントは、ナビゲーションによってドキュメントが新しいドキュメントに置き換えられるときに、ドキュメントのウィンドウオブジェクトで呼び出されます。

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

ドキュメントのレンダリングブロックでは、重要なコンテンツが解析されるまでドキュメントのレンダリングをブロックできるため、すべてのブラウザで一貫した初回ペイントが保証されます。

ほか多数

他にもたくさんあります。

disallowReturnToOpener は、ユーザーがオープナータブに戻るためのボタンをピクチャーインピクチャーウィンドウに表示しないようにブラウザに通知します。
キーボードでフォーカス可能なスクロールコンテナは、シーケンシャルフォーカスナビゲーションを使用してスクロールコンテナをフォーカス可能にすることで、アクセシビリティを向上させます。
ユニバーサルインストールを使用すると、現在の PWA の条件を満たしていないページも含め、任意のページをインストールできます。

Chrome 124 の新機能

JavaScript で宣言型 Shadow DOM を使用する

WebSocket Stream API

ビューの切り替えの改善

ほか多数

関連情報

登録