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

Chrome 97 の新機能

Pete LePage

必知事項は次のとおりです。

WebTransport は、クライアントとサーバー間でリアルタイムメッセージを送信するための新しいオプションです。
機能検出を使用すると、ブラウザでサポートされているスクリプトの種類を確認できます。
配列の末尾からの検索が少し簡単になります。
他にも多くの機能を利用できます。

ハッピーニューイヤーPete LePage と申します。Chrome 97 のデベロッパー向けの新機能について詳しく見てみましょう。

ウェブトランスポート

Web Sockets または WebRTC Data Channel API を使用してサーバー間とページ間でメッセージを送信している場合は、新しいオプションがあります。WebTransport は、低レイテンシの双方向のクライアントサーバーメッセージングを提供する新しい API です。

WebSocket よりもレイテンシが低く、ピアツーピアメッセージング用に設計された RTC Data Channel API とは異なり、Web Transport API はクライアントサーバーメッセージング用に特別に設計されています。

Streams API では信頼性の高いデータ送信をサポートし、Datagram API では信頼性のないデータ送信をサポートします。ウェブワーカーでサポートされています。また、Streams 準拠のインターフェースを公開するため、バックプレッシャーに関する最適化をサポートしています。

使用するには、HTTP/3 をサポートするサーバーが必要です。これは、通常、WebRTC サーバーの設定とメンテナンスよりも簡単です。新しい WebTransport インスタンスを開き、接続が完了するまで待つと、データの送信を開始できます。

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

詳しくは、web.dev の記事「WebTransport の試験運用」をご覧ください。

スクリプトタイプの特徴検出

現在、nomodule 属性を使用して、ブラウザでの JavaScript モジュールのサポートを検出できます。ただし、パイプラインには、マップのインポート、投機ルール、バンドルのプリロードなど、いくつかの新しい機能の提案があります。ブラウザがサポートしている内容を確認する方法が必要です。

「HTMLScriptElement.supports()」と入力します。これを使用して、使用できるスクリプトの種類を判断し、最適なオプションをブラウザに送信できます。

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

新しい配列プロトタイプ

JavaScript が簡単になるのは嬉しいですね。Array と TypedArray が findLast() と findLastIndex() の静的メソッドをサポートするようになりました。

これらの関数は、find() や findIndex() と実質的に同じですが、先頭ではなく配列の末尾から検索します。

たとえば、10 より大きい配列の最後の数値を検索するには、値が 10 より大きいかどうかを確認するテスト関数で findLast() を呼び出します。

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

UA 文字列で Chrome 100 をエミュレートする

あと数か月で、3 桁のバージョン番号である Chrome 100 がリリースされます。バージョン番号をチェックするコード、または UA 文字列を解析するコードは、必ず 3 桁の数字を処理することを確認する必要があります。

現在のバージョン番号を 100 に変更する #force-major-version-to-100 というフラグがあるため、すべてが想定どおりに動作することを確認できます。

新しい #force-major-version-to-100 オプションがハイライト表示された Chrome フラグページ

その他

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

フォームのエントリ内の改行は、Gecko や WebKit と同じように正規化され、ブラウザ間の相互運用性が改善されました。

クライアントヒント名の先頭に sec-ch を付加して、クライアントヒント名を標準化します。たとえば、dpr は sec-ch-dpr になります。これらのヒントの既存のバージョンも引き続きサポートされますが、最終的には非推奨となり削除されるため、計画を立てる必要があります。

閉じられた <details> 要素を検索してリンクできるようになりました。これらの非表示要素は、ページ内検索、ScrollToTextFragment、要素フラグメントナビゲーションを使用すると自動的に展開されます。

Chrome 97 の新機能

ウェブ トランスポート

スクリプト タイプの特徴検出

新しい配列プロトタイプ

UA 文字列で Chrome 100 をエミュレートする

その他

関連情報

登録

ウェブトランスポート

スクリプトタイプの特徴検出