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

Chrome 124 の新機能

Pete LePage

Chrome 124 の特長は次のとおりです。

JavaScript から宣言型 Shadow DOM を使用できるようにする新しい API が 2 つあります。
Web ソケットでストリームを使用できます。
ビュー遷移が改善。
他にも多くの機能を利用できます。

詳細については、Chrome 124 リリースノートをご覧ください。

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

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

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;
  }
});

また、ドキュメントのレンダリングブロッキング機能により、重要なコンテンツが解析されるまでドキュメントのレンダリングをブロックし、すべてのブラウザで First Paint を一定に保つことができます。

その他

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

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

Chrome 124 の新機能

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

WebSocket Stream API

ビュー遷移の改善

その他

関連情報

登録