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 の追加の変更については、次のリンクをご覧ください。
- Chrome 124 リリースノート
- Chrome DevTools の新機能(124)
- ChromeStatus.com の更新(Chrome 124)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。
Chrome 125 のリリースと同時に Chrome の最新情報をお伝えします