<h1>Chrome101</h1>
Chrome 101 のリリースノート関連の情報をまとめました。
<a href="https://developer.chrome.com/blog/new-in-chrome-101/">https://developer.chrome.com/blog/new-in-chrome-101/</a>
<a href="https://developer.chrome.com/blog/new-in-devtools-101/">https://developer.chrome.com/blog/new-in-devtools-101/</a>
<a href="https://developer.chrome.com/blog/deps-rems-101/">https://developer.chrome.com/blog/deps-rems-101/</a>
<a href="https://www.chromestatus.com/features#milestone%3D101">https://www.chromestatus.com/features#milestone%3D101</a>
<h2>New In Chrome (Chrome 101)</h2>
Chrome101 で新しく追加された機能です。
<h3><code>hwb()</code> color notation</h3>
CSSの色指定方法として<code>hwb()</code>値がサポートされました。
hwb() は、色相、白色度、黒色度にしたがって色を指定します。他の色表記と同様に、オプションのアルファ成分で不透明度を指定することもできます。以下の例では<code>#00c3ff</code>の色を50%透過度で指定しています。
<div class="remark-highlight"><pre class="language-css"><code class="language-css">h1 {
 color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
</code></pre></div>
FireFoxではv96から、Safariではv15からこの<code>hwb()</code>値をサポートしているため、今回のChromeのサポートにより、多くのブラウザでこの記法が使えることになります。
<h3>Priority Hints</h3>
ブラウザがページ内リソース(<code>image</code>,<code>script</code>,<code>CSS</code>)を読み込む際の優先度ヒントを明示的に宣言できる<code>Priority Hints</code>機能がリリースされました。
htmlで読み込みの優先度ヒントを書く場合は、<code>fetchpriority</code>属性に<code>high</code>,<code>low</code>,<code>auto</code>のいずれかを指定します。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;!-- 優先度 low で画像を読み込む場合 -->
&#x3C;img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
</code></pre></div>
この機能はChrome96からOriginTrialとして試験的に実装されており、当時は<code>importance</code>属性を用いる方法をとっていましたが、Web標準化プロセスの中で、HTMLでは<code>fetchpriority</code>、JavaScriptのFetch APIでは<code>priority</code>というプロパティを利用するよう仕様が変更されました。
優先度指定における細かい挙動やユースケースについては<a href="https://web.dev/priority-hints/">Optimize resource loading with Priority Hints</a>を参照してください。
<h3>Also in this release</h3>
<h4>USBDevice forget()</h4>
<code>USBDevice</code>オブジェクトで<code>forgot()</code>メソッドがサポートされました。このメソッドでは以前許可されていたデバイスの登録を削除することができます。例えば多くのデバイスで共有されているコンピューターで使用されているアプリケーションなどでは有用です。
<h4>Web USB sameObject behavior</h4>
<code>USBConfiguration</code>、<code>USBInterface</code>、<code>USBAlternateInterface</code>、<code>USBEndpoint</code> の4つのインスタンスが厳密な同値（<code>===</code>）なるのは、同じ<code>USBDevice</code>のアクセッサから取得した場合のみに変更されます。
<h4>Secure context fix for dedicated workers</h4>
全な(HTTPSの)Originからロードされていますが、安全でない(HTTPSでない)コンテキストでインスタンス化された専用ワーカーは安全だとはみなされなくなりました。
具体的に上記のような状況において、以下のような変更が入ります
<ul>
<li><code>self.isSecureContext</code>が<code>false</code>を返すようになる</li>
<li><code>self.caches</code> と <code>self.storageFoundation</code> が使用できなくなる</li>
</ul>
この修正により、上記のようなワーカーの挙動においてHTML標準やGeckoと互換性を持つようになりました。
<h4>Make 'true' a truthy value for window.open boolean features</h4>
chrome98から、<code>window.open()</code>に対し<code>popup=yes</code>または<code>popup=1</code>のように指定することで、ポップアップウィンドウで開くことをブラウザに要求することが出来るようになりました。
このpopup値として<code>yes</code>,<code>1</code>などがサポートされていたものの、<code>true/false</code>がサポートされていなかったため、<code>popup=true</code>はpopupを開かないことを意味していました。
このように<code>popup=true</code>がfalseとして評価されるのは直感に反しているため、Chrome101からは<code>popup=true</code>がtrueとして評価されるようになります。
<h2>What's New In DevTools (Chrome 101)</h2>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-101/">https://developer.chrome.com/ja/blog/new-in-devtools-101/</a>
<h2>Deprecations and removals in Chrome 101</h2>
<h3>Reduce user agent string information</h3>
ChromeではHTTPリクエストやnavigatorで利用されるUser-Agent文字列の削減に取り組んでいます。この取り組みはUser-Agent文字列がユーザーフィンガープリンティング(webブラウザからの情報だけで個人の情報を特定する技術)に利用されるのを防ぐために行われています。現在はOriginTrialとしてこれらの取り組みを進めています。
<h3>Remove WebSQL in third-party contexts</h3>
サードパーティーのコンテキストにおけるWebSQL機能を削除しました。Web SQL Database標準は2009年4月に提案され、2010年11月に放棄された標準で、FireFoxはこの機能を搭載せず、Safariも2019年から非推奨としています。またW3Cは代替手段として、Web StorageとIndexed Databaseを推奨しています。Chromeとしても使用率が十分に低くなった時点で完全に非推奨とし、削除する予定です。
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<h3>MediaCapabilities API for WebRTC</h3>
<code>MediaCapabilities API</code>でWebRTCストリームをサポートするようになりました。
<code>MediaCapabilities API</code>は、動画再生に使用できるコーデックや解像度などの情報を提供するAPIです。これらの情報によりwebアプリケーションは使用するコーデクなどがサポートされているかどうか、スムーズな再生が期待できるかどうかを判断できるようになります。
今回のリリースからWebRTCストリームについての情報もこの<code>MediaCapabilities API</code>から取得できるようになります。この機能がない場合、アプリケーションが不必要に低い解像度やフレームレートを使用して品質が低下したり、クライアントが希望するフレームレートでストリームを処理できずスタッタリングが発生したりする可能性があります。
<h3>font-palette and custom @font-palette-values palettes</h3>
カラーフォントで利用するパレットを選択することができる、<code>font-palette</code> CSSプロパティがサポートされました。
また<code>@font-palette-values</code>ルールを利用することで、ベースとなるカラーパレットを選択したり、カラーパレットの上書きなどができるようになります。
ベースとなるカラーパレットを選択する例
<div class="remark-highlight"><pre class="language-css"><code class="language-css">@font-palette-values --Pinks {
 font-family: MultiColorFont;
 base-palette: 1; /* パレットを番号で指定 */
}

.text-pink {
 font-palette: --Pinks; /* @font-palette-valuesで作成したパレットを指定 */
}
</code></pre></div>
カラーパレットを上書きする例
<div class="remark-highlight"><pre class="language-css"><code class="language-css">@font-palette-values --SkyAndYellow {
 font-family: MultiColorFont;
 override-colors:　
 0 #87dbe8, 
 1 #f7ca25;　/* 対応する番号のカラーを上書き */
}
</code></pre></div>
このように<code>font-palette</code> CSSプロパティのサポートは、すでにサポートしているCOLR/CPALカラーフォントの有用性を向上するものです。ダークモード対応をはじめとして、アイコンフォントをコンテンツの配色に合わせたいユースケースでこの機能はとても有用です。

🔗 <a href="https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/">https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/</a>
Safari 15.4 がリリースされました 🎉 
これまで Technology Preview として公開されていた様々な変更が含まれています。
<h2>HTML</h2>
<ul>
<li>遅延読み込みのための <code>lazy-loading</code> のサポート
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading">https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading</a></li>
</ul>
</li>
<li><code>&#x3C;dialog></code> Element のサポート
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element</a></li>
</ul>
</li>
<li><code>::backdrop</code> 疑似要素のサポート
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/::backdrop">https://developer.mozilla.org/ja/docs/Web/CSS/::backdrop</a></li>
</ul>
</li>
<li><code>autofocus</code> 属性のサポート
<ul>
<li>dialog 表示時にどの要素にフォーカスをセットするかを指定できる</li>
</ul>
</li>
</ul>
<h2>CSS</h2>
<h3>Features for CSS Architecture</h3>
<ul>
<li><code>:has()</code> のサポート (現状 Safari のみサポート)
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/:has">https://developer.mozilla.org/ja/docs/Web/CSS/:has</a></li>
</ul>
</li>
<li>CSS Cascade Layers のサポート
<ul>
<li>FEE チームの @nus3 が書いた CSS Cascade Layers の紹介エントリ: <a href="https://cybozu.github.io/frontend-expert/posts/css-cascade-layers">https://cybozu.github.io/frontend-expert/posts/css-cascade-layers</a>)</li>
</ul>
</li>
</ul>
<h3>Solving Pain Points</h3>
<ul>
<li>主にモバイル向けに、viewport に応じた新しい値の指定が可能に
<ul>
<li><code>svh</code>, <code>svw</code> → メニューバーなどを除いた最小の viewport</li>
<li><code>dvh</code>, <code>dvw</code> → スクロールによるメニューバーなどの表示切り替えに応じて変化する viewport</li>
<li><code>lvh</code>, <code>lvw</code> → メニューバーなどが存在しない状態を想定した最大の viewport</li>
<li><code>svmin</code>, <code>svmax</code>, <code>lvmin</code>, <code>lvmax</code>, <code>dvmin</code>, <code>dvmax</code> → <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code> の上記 CSS 値版 (幅, 高さに対する割合指定)</li>
</ul>
</li>
<li><code>:focus-visible</code> 疑似要素のサポート</li>
<li><code>accent-color</code> プロパティのサポート
<ul>
<li>checkbox, radio, progress, select, datalist (iPad OS と iOS のみ range, button) にアクセントカラー指定が可能になる</li>
</ul>
</li>
<li><code>calc()</code> 数学関数のサポート</li>
</ul>
<h3>Typography</h3>
<ul>
<li><code>font-palette</code> と <code>@font-palette-values</code> CSS プロパティのサポート
<ul>
<li>カラーフォントに含まれるパレットの指定と、カラーパレットの独自定義</li>
</ul>
</li>
<li><code>text-decoration-skip-ink</code> CSS プロパティのサポート
<ul>
<li>text-decoration (underline とか)を文字に被らず表示できる</li>
</ul>
</li>
<li><code>ic</code> 単位のサポート
<ul>
<li><code>1ic</code> が <code>水</code> の文字の幅と同等になる</li>
</ul>
</li>
</ul>
<h3>Retiring WebKit prefixes</h3>
<ul>
<li><code>-webkit</code> vendor prefix の付与が必要だった様々なプロパティが廃止。また、廃止に伴い prefix 不要で利用可能なプロパティのサポート追加
<ul>
<li><code>appearance</code></li>
<li><code>mask</code></li>
<li><code>backface-visibility</code></li>
<li><code>text-combine-upright</code></li>
<li><code>print-color-adjust</code></li>
<li><code>match-parent</code> (<code>text-align</code> プロパティに指定可能な値)</li>
<li>削除: <code>-webkit-border-fit</code>, <code>-webkit-margin-collapse</code>, <code>-webkit-margin-top-collapse</code>, <code>-webkit-margin-bottom-collapse</code>, <code>-webkit-margin-before-collapse</code>, <code>-webkit-margin-after-collapse</code>, <code>-webkit-background-composite</code></li>
</ul>
</li>
</ul>
<h2>Web APIs</h2>
<ul>
<li>BroadcastCannel のサポート
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/web-messaging.html#broadcasting-to-other-browsing-contexts">https://html.spec.whatwg.org/multipage/web-messaging.html#broadcasting-to-other-browsing-contexts</a></li>
<li>タブ、ウィンドウ、iframe, worker の相互通信が可能になる</li>
</ul>
</li>
<li>Web Locks API のサポート
<ul>
<li><a href="https://w3c.github.io/web-locks/">https://w3c.github.io/web-locks/</a></li>
<li>タブ、ウィンドウ、iframe, worker 間でリソースのロックコントロールを行う</li>
</ul>
</li>
<li><code>scroll-behavior</code> または <code>window.scroll()</code>, <code>window.scrollTo()</code>, <code>window.scrollBy()</code> の <code>behivior</code> オプションでスクロール制御を可能に</li>
<li><code>ResizeObserver API</code> で <code>ResizeObserverSize</code> インタフェースのサポート
<ul>
<li>対象要素の <code>box-sizing</code> プロパティの変更を監視可能に</li>
</ul>
</li>
<li><code>structuredClone</code> のサポート
<ul>
<li>DeepClone</li>
<li>Chrome/Edge/Firefox/Safari のすべてがサポートされました 🎉</li>
</ul>
</li>
<li><code>Origin Private File System</code> のサポート
<ul>
<li>詳細はこちら: <a href="https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system/">https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system/</a></li>
</ul>
</li>
</ul>
<h2>JavaScript</h2>
<ul>
<li><code>findLast()</code>, <code>findLastIndex()</code> メソッドのサポート</li>
<li><code>at()</code> のサポート</li>
<li><code>Object.hasOwn()</code> のサポート</li>
</ul>
<h3>Internationalization</h3>
<ul>
<li><code>Intl Enumeration API</code> (<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl</a>) の強化
<ul>
<li><code>Intl.Locale</code> で、暦週・書く方向・12h/24h のサイクル・番号システムといった情報を取得可能になった</li>
<li><code>Intl.DisplayNames</code> で calendar・dateTimeField のサポート追加および languageDisplay オプションのサポート</li>
<li><code>Intl.PluralRules</code> に <code>selectRange()</code> メソッドの追加
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/selectRange">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/selectRange</a></li>
<li><a href="https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html#rules">https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html#rules</a> に従い、数値の複数形のルールを示す文字列を得る</li>
</ul>
</li>
<li><code>Intl.NumberFormat</code> に <code>formatRange()</code> と <code>formatRangeToParts()</code> メソッドの追加
<ul>
<li>数値範囲を示す文字列にフォーマットする</li>
</ul>
</li>
<li><code>Intl.DateTimeFormat</code> に 複数の <code>timeZoneName</code> オプションの追加</li>
</ul>
</li>
</ul>
<h2>Web Apps</h2>
<ul>
<li>Web App Manifest 周りのアップデート (≒ PWA 絡みでのアップデート)
<ul>
<li>Manifest ファイルをページロード時に常にフェッチするようになる</li>
<li>Manifest ファイルでのアイコン宣言のサポート
<ul>
<li><code>purpose</code> 指定に応じて <code>apple-touch-icon</code> 以外のアイコンを利用する</li>
</ul>
</li>
<li>ServiceWorker で Navigation Preload が使えるように
<ul>
<li>ServiceWorker の起動時のブロッキングを回避できるように</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2>Media</h2>
<ul>
<li>WebRTC negotiation API が WebRTC 1.0 仕様に準拠</li>
<li>in-band chapter tracks のサポート
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/kind">https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/kind</a></li>
</ul>
</li>
<li><code>&#x3C;video></code> で <code>requestVideoFrameCallback()</code> のサポート追加
<ul>
<li>ビデオフレームの表示可能タイミングでのコールバックとメタデータ受け取りが可能になる</li>
</ul>
</li>
</ul>
<h2>Privacy</h2>
<ul>
<li>Private Click Measurement (<a href="https://webkit.org/blog/11940/pcm-click-fraud-prevention-and-attribution-sent-to-advertiser/">https://webkit.org/blog/11940/pcm-click-fraud-prevention-and-attribution-sent-to-advertiser/</a>) 周りで幾つかのアップデート</li>
</ul>
<h2>Security</h2>
<ul>
<li>Inline Script / Style / eval などでリソースがブロックされた場合のレポートが Web 標準にあわせて更新</li>
<li>XSS 対策機能の XSS Auditor サポート削除 (CSP や COEP で代替)</li>
</ul>
<h2>WKWebView</h2>
<ul>
<li>iOS, iPadOS, macOS 上のアプリケーションの場合、FullScreen API 利用の制御が可能になった</li>
<li>iPadOS で Media Source Extensions を利用するコンテンツが動作するようになった
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/Media_Source_Extensions_API">https://developer.mozilla.org/ja/docs/Web/API/Media_Source_Extensions_API</a></li>
</ul>
</li>
</ul>
<h2>Safari Web Extensions</h2>
<ul>
<li>クロスブラウザでの拡張機能サポートに伴う <code>manifest_version 3</code> のサポートなど
<ul>
<li>バックグラウンドスクリプトで <code>service_worker</code> のサポート</li>
<li><code>browser.scripting</code> によるスクリプトとスタイルのインジェクション</li>
<li><code>browser.declarativeNetRequest</code> を介したネットワークリクエストの動的ルールやセッションルール</li>
<li><code>externally_connectable:matches</code> による、Web ページから拡張機能へのメッセージング</li>
</ul>
</li>
</ul>
<h2>Web Inspector</h2>
<ul>
<li>CSS Cascade Layer サポート追加に伴い、Web Inspector 上で <code>@layer</code> ルールセットが確認可能になった</li>
<li>Flexbox および Grid で、視覚的なコントロールの追加</li>
<li>Style パネルでのプロパティや値の変更時の自動補完の強化</li>
<li>CSS 表示の改善。未使用の継承値の非表示や、フィルタによる検索、種類でのグループ化など</li>
</ul>
<hr>
<code>&#x3C;dialog></code> のサポートや <code>:focus-visible</code> などは身近な感じがありますね。
また、Web Extensions で manifest_version 3 のサポートが強化されたことで、クロスブラウザ向けのブラウザ拡張で Safari も含めやすくなるかもしれません。

この記事では2021年01月24日~27日に開催された TC39 meeting 88th で議題に上がったプロポーザルについて紹介します。
<h2>For Stage 4</h2>
For Stage 4 の提案はありませんでした。
<h2>For Stage 3</h2>
<h3><a href="https://github.com/tc39/proposal-array-from-async/">Array.fromAsync</a></h3>
Stage 3 にはなりませんでした。
<code>Array.fromAsync</code> は次のようにして非同期イテラブルから配列を生成するスタティックメソッドを追加するプロポーザルです。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">async function * asyncGen (n) {
 for (let i = 0; i &#x3C; n; i++)
 yield i * 2;
}
const arr = await Array.fromAsync(asyncGen(4));
</code></pre></div>
<a href="https://github.com/tc39/proposal-array-from-async/issues/19">https://github.com/tc39/proposal-array-from-async/issues/19</a> で指摘された問題のため、Stage 3 にはなりませんでした。
<h2>For Stage 2</h2>
<h3><a href="https://github.com/tc39/proposal-class-brand-check">Class brand checks</a></h3>
Stage 2 にはなりませんでした
Class brand checks は brand check のための新しい構文を導入するプロポーザルです。
brand check は TC39 内で使われる用語で、<a href="https://github.com/tc39/how-we-work/blob/master/terminology.md#brand-check">https://github.com/tc39/how-we-work/blob/master/terminology.md#brand-check</a> で説明されています。
brand check とは、雑に言えば「ある値があるデータ型であることを検証すること」です。たとえば <code>Array.isArray</code> は brand check です(<a href="https://zenn.dev/sosukesuzuki/articles/e0516a3d4c424e"><code>instanceof</code> は厳密ではない</a>ため brand check ではありません)。
以前 brand check の方法の一つである <a href="https://github.com/tc39/proposal-private-fields-in-in">Ergonomic brand checks for private fields</a> についての記事を書いたので興味のある方はそちらもご覧ください。
<div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.github.io/frontend-expert/posts/ergonomic-brand-checks-for-private-fields" style="border: none;"></iframe></div>
Class branc check プロポーザルでは <code>class.hasInstance(x)</code> という新しい Meta Property を追加します。これはクラスの中でのみ使うことができ、引数として渡された値が今いるクラスのインスタンスかどうかをチェックします。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">class Foo {
 static isFoo(o) {
 return class.hasInstance(o);
 }
}

const foo = new Foo();
console.log(Foo.isFoo(foo)); // true

const obj = {};
console.log(Foo.isFoo(obj)); // false
</code></pre></div>
<h2>For Stage 1</h2>
<h3><a href="https://github.com/rbuckton/proposal-enum">enum</a></h3>
Stage 1 にはなりませんでした。
enum は列挙型を実現するためのプロポーザルです。このプロポーザルは 4 年ほど前から存在していましたがまた動き出したようです。
enum プロポーザルでは次のような構文を導入します。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">enum SyntaxKind {
 A,
 B,
 C
}
</code></pre></div>
他のプログラミング言語の enum と構文上は似ています。
しかし細部の仕様について検討すべき事項が多く、今回のミーティングでは Stage 1 に到達することはありませんでした。<a href="https://docs.google.com/presentation/d/14WtGmdWjEYXIXZVWJWpERF98D90_BytceAu7b7DKr5Q/edit#slide=id.g10effb28f4f_0_273">このスライド</a>に詳しくまとまっているので興味のある方はご覧ください。
<h3><a href="https://github.com/tc39/proposal-reversible-string-split">Reversible string split</a></h3>
Stage 1 になりました。
Reversible string split は可逆(Reversible)の文字列分割のための方法を導入するプロポーザルです。
JavaScript では <code>String.prototype.split</code> を使って文字列を分割できます。
<div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split" style="border: none;"></iframe></div>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const splitted = "A,B,C,D,E".split(",");
console.log(splitted); // [ 'A', 'B', 'C', 'D', 'E' ]
</code></pre></div>
<code>String.prototype.split</code> は第2引数として非負の整数を渡すことで、分割する数を制限できます。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const splitted1 = "A,B,C,D,E".split(",", 1);
console.log(splitted1); // [ 'A' ]

const splitted2 = "A,B,C,D,E".split(",", 2);
console.log(splitted2); // [ 'A', 'B' ]

const splitted3 = "A,B,C,D,E".split(",", 3);
console.log(splitted3); // [ 'A', 'B', 'C' ]
</code></pre></div>
JavaScript 以外のいくつかの言語(Perl、PHP、Ruby、Go、Rust、Java など)では第2引数を受け取った <code>String.prototype.split</code> に相当する機能は、次のように文字列の分割を行います。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const splitted2 = "A,B,C,D,E".split(",", 2);
console.log(splitted2); // [ 'A', 'B,C,D,E' ]
</code></pre></div>
N-1 回分割され、残りの部分が戻り値の配列の末尾に含まれています(戻り値の配列の要素数が N)。
Reversible string split プロポーザルでは、このような振る舞いを持つ新しいメソッド <code>String.prototype.splitN</code> を導入します。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const splitted2 = "A,B,C,D,E".splitN(",", 2);
console.log(splitted2); // [ 'A', 'B,C,D,E' ]
</code></pre></div>
このような文字列分割メソッドを使うと、次のようにして分割する前の文字列を取得できます。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const value = "A,B,C,D,E";
const separator = ",";
const n = 2;
console.log((value.splitN(separator, n).join(separator)) === value); // true
</code></pre></div>
提案の名前に含まれている Reversible というのはこのような可逆性のことを指しているようです。
<h2>Updates</h2>
<h3><a href="https://github.com/tc39/proposal-symbols-as-weakmap-keys">Symbols as WeakMap keys</a></h3>
Symbols as WeakMap keys は Symbol を WeakMap のキーとして使えるようにするためのプロポーザルです。
現在では一部情報が古くなっていますが以前このプロポーザルについて解説する記事を書いたので興味がある方はそちらもご覧ください。
<div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://sosukesuzuki.dev/posts/symbols-as-weakmap-keys" style="border: none;"></iframe></div>
以前から Symbols as WeakMap keys プロポーザルのモチベーションや基本的な振る舞いについては概ね合意がとれていました。しかし、Well-knwon Symbols やグローバルシンボルレジストリに登録された Symbol (Eternal Symbol と呼ばれている)についてはどのように扱うべきかという点で TC39 メンバー内でも意見が分かれていました。
今回のミーティングで Symbols as WeakMap keys チャンピョングループは、Eternal Symbol を WeakMap のキーとして使おうとするとエラーが throw されるという振る舞いを選択したことを発表しました。それにともなって、<code>WeakMap.isValidKey(x)</code>、<code>WeakSet.isValidValue(x)</code>、<code>WeakRef.isValidTarget(x)</code>、<code>FinalizationRegistry.isValidTarget(x)</code> などのいくつかのスタティックメソッドが追加される可能性があります。
しかし議事録によればまだ TC39 メンバーの中で意見が分かれているため仕様の決定には時間がかかりそうです。
<h2>参考リンク</h2>
<ul>
<li>TC39
<ul>
<li><a href="https://github.com/tc39/agendas/blob/main/2022/01.md">agendas/01.md at main · tc39/agendas</a></li>
<li><a href="https://github.com/tc39/notes/blob/main/meetings/2022-01/jan-24.md">notes/jan-24.md at main · tc39/notes</a></li>
<li><a href="https://github.com/tc39/notes/blob/main/meetings/2022-01/jan-25.md">notes/jan-25.md at main · tc39/notes</a></li>
<li><a href="https://github.com/tc39/notes/blob/main/meetings/2022-01/jan-26.md">notes/jan-26.md at main · tc39/notes</a></li>
<li><a href="https://github.com/tc39/proposal-array-from-async/">Proposal Array.fromAsync</a></li>
<li><a href="https://github.com/tc39/proposal-symbols-as-weakmap-keys">Proposal Symbols as WeakMap keys</a></li>
<li><a href="https://github.com/tc39/proposal-class-brand-check">Proposal <code>class.hasInstance()</code></a></li>
<li><a href="https://github.com/rbuckton/proposal-enum">Proposal enum</a></li>
<li><a href="https://github.com/tc39/proposal-reversible-string-split">Proposal Reversible string split</a></li>
</ul>
</li>
<li>Babel
<ul>
<li><a href="https://github.com/babel/proposals/issues/80">Jan 2022 · Issue #80 · babel/proposals</a></li>
</ul>
</li>
</ul>

Chrome 98 のリリースノート関連の情報をまとめました。
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-98/">https://developer.chrome.com/blog/new-in-chrome-98/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-98/">https://developer.chrome.com/blog/new-in-devtools-98/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-98/">https://developer.chrome.com/blog/deps-rems-98/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D98">https://www.chromestatus.com/features#milestone%3D98</a></li>
</ul>
<h2>New In Chrome (Chrome 98)</h2>
Chrome98 で新しく追加された機能です。
<h3>Opting out of auto-dark themes on Android</h3>
Chrome96 から、Android では OriginTrial として「<a href="https://developer.chrome.com/blog/auto-dark-theme/">Auto Dark Themes</a>」という機能を追加しています。
この機能はユーザーの OS がダークモードである場合、明るいテーマのサイトに対しブラウザが自動的に生成したダークテーマを適用するものです。
今回のアップデートでは OriginTrial に登録したサイトのうち、特定のページで自動生成されるダークテーマを無効にする方法が追加されました。
具体的には以下のように<code>meta</code>タグを利用して無効化することが出来ます。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;meta name="color-scheme" content="only light" />
</code></pre></div>
また以下のように<code>color-scheme: only light</code>というスタイルを<code>:root</code>要素にあてることでも無効化できます。
<div class="remark-highlight"><pre class="language-css"><code class="language-css">:root {
 color-scheme: only light;
}
</code></pre></div>
CSS スタイルを利用する方法の優れた点として、以下のように要素ごとに自動生成されるダークテーマを無効にできる点が挙げられます。
<div class="remark-highlight"><pre class="language-css"><code class="language-css">.only-light,
#my-element {
 color-scheme: only light;
}
</code></pre></div>
詳しくは<a href="https://developer.chrome.com/blog/auto-dark-theme/">Auto Dark Themes on Android</a>における<a href="https://developer.chrome.com/blog/auto-dark-theme/#per-element-opt-out">How to opt-out of Auto Dark Theme</a>の章を参照してください。
<h3>COLRv1 font support</h3>
COLRv1 フォントがサポートされました。
COLRv1 では COLRv0 と比べて、新たにフォントのグラデーションや合成などに対応しています。また、フォントが鮮明なまま圧縮率が高いのも特徴の一つです。
次の参考記事では実際にグラデーションを導入したカラーフォントや COLRv1 と Bitmap を比較してどれほど鮮明なのかを確認することができます。
お使いの Chrome のバージョンを 98 にアップデートした上で、ぜひ見てみてください！
参考:
<a href="https://developer.chrome.com/blog/colrv1-fonts/">https://developer.chrome.com/blog/colrv1-fonts/</a>
<h3>Emulate Chrome 100 in the UA string</h3>
ここ何回かのリリースには必ず含まれている内容ですね。
Chrome のバージョンがもうすぐ 100 になるので、Chrome のバージョンを使っているような実装がある場合はバージョン番号が 3 桁になっても正しく動くかどうか確認しましょう。現在のバージョンを 100 にする<a href="https://developer.chrome.com/blog/force-major-version-to-100/">#force-major-version-to-100</a>フラグを使って、既存のコードが正しく動くか確認することができます。
<h3>And more!</h3>
<h2>What's New In DevTools (Chrome 98)</h2>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-97/">https://developer.chrome.com/ja/blog/new-in-devtools-97/</a>
<h2>Deprecations and removals in Chrome 98</h2>
<h3>Remove SDES key exchange for WebRTC</h3>
Chrome97 で記載があったものですが、98 で Shipping になりました。
詳細は<a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-97">前回のリリースノートのまとめ</a>でも記載したので、そちらをご覧ください。
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<h3>Add support for Promise to Blobs in clipboard item</h3>
<code>ClipboardItem</code>オブジェクトに対して Promise をサポートしました。
今まで、Chrome では<code>ClipboardItem</code>コンストラクターの引数として「文字列または blob に解決される Promise」を受け取ることが出来ませんでした。
今回のアップデートにより<code>clipboard.write</code>API が呼ばれた時に、一旦クリップボードに書き込む Blob データを同期的に取得する必要がなくなり、ブロックすることなく非同期的に write メソッドを呼び出すことができるようになります。
<h3>CSS Color Adjust: 'only' keyword for color-scheme</h3>
<code>color-scheme</code>プロパティの<code>only</code>キーワードがサポートされました。only を指定することでユーザーエージェント(ブラウザ)が要素のカラースキーマを上書きすることを禁止します。
参考:
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/color-scheme">https://developer.mozilla.org/ja/docs/Web/CSS/color-scheme</a></li>
<li><a href="https://drafts.csswg.org/css-color-adjust/#color-scheme-prop">https://drafts.csswg.org/css-color-adjust/#color-scheme-prop</a></li>
</ul>
<h3>FileSystemHandle::Remove() method</h3>
FileSystemHandle に<code>Remove()</code>メソッドを追加しました。
今ままで<code>FileSystemHandle</code>から直接ファイルやディレクトリを削除することは不可能で、親ディレクトリの<code>FileSystemDirectoryHandle</code>から<code>RemoveEntry</code>を呼ぶ必要がありました。
今回のアップデートにより「<code>showSaveFilePicker</code>から<code>FileHandle</code>を取得したが、結局保存したくなくなったのでファイルを削除したい」というような、よくあるユースケースに対応できるようになりました。
<h3>HDR CSS Media Queries: dynamic-range</h3>
CSS のメディアクエリーに<code>dynamic-range</code>が追加されました。
次のサンプルコードのように、ディスプレイが HDR をサポートしてるかしていないかを<code>dynamic-range</code>で判別できるようになります。
<div class="remark-highlight"><pre class="language-css"><code class="language-css">/* HDRをサポートしていない */
@media (dynamic-range: standard) {
 .contrast {
 color: red;
 }
}

/* ディスプレイがHDRをサポートしている */
@media (dynamic-range: high) {
 .contrast {
 color: green;
 }
}
</code></pre></div>
参考:
<a href="https://www.w3.org/TR/mediaqueries-5/#dynamic-range">https://www.w3.org/TR/mediaqueries-5/#dynamic-range</a>
<h3>New window.open() popup vs. window behavior</h3>
<code>window.open()</code>では第 3 引数として<code>windowFeatures</code>という option を DOMString で指定できますが、今バージョンから<code>popup</code>という機能に対応するようになりました。<code> popup=yes</code>または<code>popup=1</code>のように指定することで、ポップアップウィンドウを利用して開くことをブラウザに要求することが出来ます。
この変更は window.open の新しくリリースされた仕様に合わせて、相互運用性のために行われた変更です。 広報互換性のため、ポップアップやタブ/ウィンドウを開く既存の動作に変更はありません。
<h3>Private Network Access preflight requests for subresources</h3>
サブリソースに対するプライベートネットワークリクエストの前に CORS プリフライトリクエストを送信し、ターゲットサーバーからの明示的な許可を求めるようになります。
プライベートネットワークリクエストとは以下のようなリクエストとのことです。
<ul>
<li>パブリック Web サイトからプライベート IP アドレスまたはローカルホストへのリクエスト</li>
<li>プライベートな Web サイト（イントラネットなど）からローカルホストへのリクエスト</li>
</ul>
プライベートネットワーク上のサービスや機器(ネットワーク機器やプリンタなど)は CSRF 対策が不十分なものが多く、今回のアップデートはこれらの攻撃リスクを軽減させるための対策になります。
<h3>WritableStream controller AbortSignal</h3>
<a href="https://developer.mozilla.org/ja/docs/Web/API/WritableStream/abort">WritableStream.abort()</a>を実行した際に、ストリームへの進行中の書き込みの中止や終了がすぐに実行されるようになりました。
<h3>self.structuredClone()</h3>
ディープコピーができる<code>structuredClone()</code>がついに 98 で実装されました。
お使いの Chrome を 98 にアップデートした上で、DevTools の Console で次のサンプルコードを試しに実行してみると<code>structuredClone()</code>で実際にディープコピーが実行されていることが確認できます。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const myOriginal = {
 someProp: "with a string value",
 anotherProp: {
 withAnotherProp: 1,
 },
};

const myShallowCopy = { ...myOriginal };
myShallowCopy.anotherProp.withAnotherProp = "a new value";
console.log(
 myOriginal.anotherProp.withAnotherProp,
 myShallowCopy.anotherProp.withAnotherProp
);
</code></pre></div>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const myOriginal = {
 someProp: "with a string value",
 anotherProp: {
 withAnotherProp: 1,
 },
};

const myDeepCopy = structuredClone(myOriginal);
myDeepCopy.anotherProp.withAnotherProp = "a new value";
console.log(
 myOriginal.anotherProp.withAnotherProp,
 myDeepCopy.anotherProp.withAnotherProp
);
</code></pre></div>
参考:
<a href="https://web.dev/structured-clone/">https://web.dev/structured-clone/</a>

それっぽいタイトルを付けましたが特に意味はないです。
<a href="https://cybozu.github.io/frontend-expert/posts/turborepo">workspace を使ったコマンドを最適化して実行する Turborepo について</a>のお話で Turborepo を軽く触ってみた際に<code>npx create-turbo@latest</code>で作られる構成がとてもわかりやすく、プロダクトの初期段階からモノレポを採用するのは選択肢の 1 つとしていいのでは、と思い続編を書きました。
前回と同じくサンプルのリポジトリはこちらになります。 
<a href="https://github.com/nus3/p-turborepo/tree/main/yarn">https://github.com/nus3/p-turborepo/tree/main/yarn</a>
<h2>概要</h2>
<ul>
<li>モノレポを採用することで、同一リポジトリ内で自作した汎用的なライブラリやコンポーネントを複数のアプリケーションで使いまわせる</li>
<li>モノレポの規模が大きくなってきた場合には、モノレポ内のパッケージを npm に公開することでアプリケーションとパッケージを非同期に開発できる</li>
<li>Yarn や npm の workspace はイイゾ！</li>
</ul>
<h2>モノレポとは</h2>
モノレポとは本記事では npm や Yarn の workspaces 機能を使い、1 つのリポジトリ内で複数の npm パッケージを管理している構成のこととします。
<h3>npm や Yarn の workspaces</h3>
npm や Yarn の workspaces は 1 つのリポジトリ内で複数の npm パッケージを管理するための機能です。
<ul>
<li><a href="https://classic.yarnpkg.com/lang/en/docs/workspaces/">Yarn(v1)</a></li>
<li><a href="https://yarnpkg.com/features/workspaces">Yarn(v2 以降)</a></li>
<li><a href="https://docs.npmjs.com/cli/v8/using-npm/workspaces">npm</a></li>
</ul>
workspaces を使うにはリポジトリのルート直下にある<code>package.json</code>に<code>workspaces</code>を追加します。
例えば<code>apps</code>配下にアプリケーションの npm パッケージを、<code>packages</code>配下に汎用的なコンポーネント、ライブラリなどの npm パッケージを入れる場合、次のようになります。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "workspaces": ["apps/*", "packages/*"]
}
</code></pre></div>
<code>apps</code> 配下にある<code>nus3-a</code>というアプリケーションから <code>packages</code> 配下にある<code>nus3-ui</code>という名前の npm パッケージを使う場合、それぞれ次のような<code>package.json</code>になります。
<code>apps/nus3-a</code>
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-a",
 "version": "0.0.0",
 "dependencies": {
 "nus3-ui": "*"
 // Yarnのv2以降であれば`workspace:`構文が使えるようになる
 // REF: (nus3) https://yarnpkg.com/features/workspaces#workspace-ranges-workspace
 // "nus3-ui": "workspace:*"
 }
}
</code></pre></div>
<code>packages/nus3-ui</code>
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-ui",
 "version": "0.0.0"
}
</code></pre></div>
workspaces 内にある npm パッケージの名前が npm に公開されているパッケージ名と同じ場合は、 workspace 内の npm パッケージが優先してインストールされます。後々 workspaces 内の npm パッケージを公開する可能性がある場合、パッケージ名は npm で公開されているパッケージ名と被らない名前にした方が良いかもしれません。
workspace 内の npm パッケージを依存関係に追加すると node_modules にシンボリックリンクが作成されます。次の画像のように node_modules 配下に<code>nus3-ui</code>と<code>nus3-a</code>のシンボリックリンクが追加されていることが確認できます。
<img src="/frontend-expert/image/considerations-for-monorepo/symlink.png" alt="node_modulesに作成されたシンボリックリンク" width="340" height="101" >
シンボリックリンクにより依存する npm パッケージのコードを直接参照するので、npm に公開しバージョン管理するまでは、version は<code>0.0.0</code>、かつ、使う側は<code>"nus3-ui": "*"</code>のようにワイルドカードを指定するとバージョンのことを意識せずに管理できます。
<h3>create-turbo で作られるモノレポ構成</h3>
create-turbo(<code>npx create-turbo@latest</code>) では作られるモノレポ構成に次のようなものが含まれます。
<ul>
<li>npm に公開せずに config をモノレポ内の別パッケージに分けて、複数のパッケージから使用する</li>
<li>React を使った汎用的なコンポーネント(tsx)を別パッケージに分けて アプリケーション(Next.js)で使用する</li>
</ul>
それぞれ見ていきましょう。
<h4>npm に公開せずに config をモノレポ内の別パッケージに分けて、複数のパッケージから使用する</h4>
ESLint や Stylelint の config は npm に公開することで、異なるプロジェクトで共通の設定を使えます。サイボウズでは<a href="https://github.com/cybozu/eslint-config">@cybozu/eslint-config</a>や<a href="https://github.com/cybozu/stylelint-config">@cybozu/stylelint-config</a>として npm に公開しています。
モノレポ内であれば ESLint や Stylelint の設定を npm に公開・管理せずに共有することもできます。
<code>packages/nus3-config</code> 
で共通の ESLint や TSConfig を定義して、<code>package.json</code> の<code>files</code> に指定します。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-config",
 "version": "0.0.0",
 "files": [
 "eslint-preset.js",
 "tsconfig.base.json",
 "tsconfig.nextjs.json",
 "tsconfig.react-library.json"
 ]
}
</code></pre></div>
<code>apps/nus3-a</code>
で<code>nus3-config</code>を追加し、<code>nus3-config</code>から TSConfig や ESLint のルールを適用します。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-a",
 "version": "0.0.0",
 "devDependencies": {
 "eslint": "8.6.0",
 "nus3-config": "*"
 }
}
</code></pre></div>
<code>apps/nus3-a/tsconfig.json</code>
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "extends": "nus3-config/tsconfig.nextjs.json"
}
</code></pre></div>
<code>apps/nus3-a/.eslintrc</code>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">module.exports = require("nus3-config/eslint-preset");
</code></pre></div>
<h4>React を使った汎用的なコンポーネント(tsx)を別パッケージに分けて アプリケーション(Next.js)で使用する</h4>
create-turbo では汎用的な React コンポーネントを tsx ファイルのまま <code>packages</code> 配下の npm パッケージで管理し、Next.js の<a href="https://github.com/martpie/next-transpile-modules">plugin</a>を使って アプリケーション 側でトランスパイルしています。
<code>packages/nus3-ui</code> 
で React(tsx)のコンポーネントを実装します。実装した tsx ファイルのパスをそのまま<code>main</code>と<code>types</code>に追加します。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-ui",
 "version": "0.0.0",
 "main": "./index.tsx",
 "types": "./index.tsx",
 "devDependencies": {
 "@types/react": "17.0.37",
 "@types/react-dom": "17.0.11",
 "typescript": "4.5.4"
 }
}
</code></pre></div>
<code>packages/nus3-ui/index.tsx</code>
<div class="remark-highlight"><pre class="language-tsx"><code class="language-tsx">import { VFC } from "react";

export const Button: VFC = () => {
 return &#x3C;button>ボタン&#x3C;/button>;
};
</code></pre></div>
<code>apps/nus3-a</code> 
<code>nus3-ui</code>の tsx ファイルを<code>nus3-a</code>で<code>next-transpile-modules</code>を使ってトランスパイルします。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "name": "nus3-a",
 "version": "0.0.0",
 "devDependencies": {
 "next-transpile-modules": "9.0.0"
 }
}
</code></pre></div>
<code>apps/nus3-a/next.config.js</code>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const withTM = require("next-transpile-modules")(["nus3-ui"]);
module.exports = withTM({});
</code></pre></div>
<h2>フロントエンドのモノレポ戦略</h2>
筆者のこれまでの経験では、創業して間もない会社やプロダクトの初期フェーズで、複数のアプリケーションの開発が並列して始まることが多くありました。そういった状況では、モノレポを採用しておくと複数のアプリケーションで共通したコンポーネントやライブラリを少ないコストで使用できます。
また、モノレポ内で共通して使っているパッケージに変更を加える際に、その影響範囲が把握できないくらいモノレポの規模が大きくなった場合には、パッケージを npm に公開してバージョン管理することで、バージョンの変更タイミングを各々のアプリケーションに任せることができ、アプリケーションとパッケージの開発を非同期に行うことができます。
このように、初期段階では汎用的な npm パッケージをアセットとして複数のアプリケーションに提供することで開発スピードを上げられ、また、規模が大きくなってきた場合はパッケージを npm に公開するといった方針をとることもできます。
もちろん、1 つのリポジトリですべてのパッケージを管理することやコードベースが大きく複雑になることなどデメリットもあり、モノレポを採用することが適切ではない場合もあります。メリット・デメリットを踏まえつつ、フロントエンドの技術選定の中にモノレポの採用を選択肢の 1 つとして入れてもいいかもしれません。

Chrome 97 のリリースノート関連の情報をまとめました。
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-97/">https://developer.chrome.com/blog/new-in-chrome-97/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-97/">https://developer.chrome.com/blog/new-in-devtools-97/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-97/">https://developer.chrome.com/blog/deps-rems-97/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D97">https://www.chromestatus.com/features#milestone%3D97</a></li>
<li><a href="https://v8.dev/blog/v8-release-97">https://v8.dev/blog/v8-release-97</a></li>
</ul>
<h2>New In Chrome (Chrome 97)</h2>
Chrome97 で新しく追加された機能です。
<h3>Web Transport</h3>
サーバーとクライアントの双方向リアルタイム通信を実現する新しいフレームワークとして提案されている<code>Web Transport</code>が正式にサポートされました。
Web Transport は既存の代表的手法である<code>Web Sockets</code>や<code>WebRTC</code>と比べ以下のような利点を持っています。
<ul>
<li><code>WebSockets</code>よりも低遅延な通信を実現する</li>
<li>P2P メッセージング用に設計された<code>WebRTC</code>と違い、クライアントサーバーメッセージングを前提として設計されているため扱いやすい</li>
</ul>
Web Transport では<code>streams API</code>と<code>datagram API</code>という２種類の通信 API がサポートされており、それぞれ以下のような特徴から使い分けることができます。
<ul>
<li>streams API : 信頼性の高い順序付けられたデータ送信に最適</li>
<li>datagram API : 信頼性や順序がそこまで求められず、より低遅延でベストエフォートなデータ送信に最適</li>
</ul>
注意点として、Web Transport を試すためには<code>HTTP/3</code>をサポートしたサーバーが必要となります。
Web Transport は以下のような形で簡単に利用することができます。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url); // WebTransportインスタンス生成
await transport.ready; // 接続を待つ

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);
</code></pre></div>
詳しくは<a href="https://web.dev/webtransport/">Experimenting with WebTransport</a>を参照しててください。
<h3>Script type feature detection</h3>
ブラウザ側で<code>ES Modules</code>の対応状況を判別する方法として今まで<code>nomodule</code>属性がありましたが、<code>import maps</code>, <code>speculation rules</code>,<code>bundle preloading</code>などの新しく提案されている仕様には対応しきれていませんでした。
今回サポートされた<code>HTMLScriptElement.supports()</code>を利用することで以下のように JavaScript側でscriptがどの仕様に対応しているかのチェックをすることができるようになります。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">if (HTMLScriptElement.supports('importmap')) {
 // Use &#x3C;script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
 // Use &#x3C;script type="module" ...>
} else {
 // Use classic method...
}
</code></pre></div>
<h3>New array prototypes</h3>
Array と TypedArray で<code>findLast()</code>と<code>findLastIndex()</code>が使えるようになりました。
この二つの関数は引数で渡された条件に合致する配列内の最後の要素の値、位置をそれぞれ返します。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const array = [5, 12, 8, 130, 44, 3, 6];

const last = array.findLast((value) => value > 10);
console.log(last); // 44
const lastIndex = array.findLastIndex((value) => value > 10);
console.log(lastIndex); // 4
</code></pre></div>
<h3>Emulate Chrome 100 in the UA string</h3>
あと数ヶ月で Chrome のバージョンは 3 桁となる 100 に到達します。
バージョンや UA 文字列をパースするコードがある場合は 3 桁でも動くかどうか確認しましょう。
現在のバージョンを 100 にする<a href="https://developer.chrome.com/blog/force-major-version-to-100/">#force-major-version-to-100</a>フラグを使って、既存のコードが正しく動くか確認することができます。
<h3>And more!</h3>
上記以外のようなアップデートがあります。
<ul>
<li>フォーム入力の改行が Gecko や WebKit と同じ方法で正規化されるようになりました。
<ul>
<li>これによりブラウザ間の相互運用性が向上しました。</li>
</ul>
</li>
<li><code>client hint</code>のプレフィクスを<code>sec-ch</code>にするように標準化を進めています。
<ul>
<li>例えば<code>dpr</code>は<code>sec-ch-dpr</code>のようになります。</li>
<li>以前の仕様も当分の間サポートを続けますが、いずれは非推奨となり削除されることを想定しましょう。</li>
</ul>
</li>
<li>閉じている<code>&#x3C;detail></code>要素が検索可能になり、閉じている<code>&#x3C;detail></code>要素内の element にスクロールしようとした際は閉じられている<code>&#x3C;detail></code>要素を自動的に開くようになりました。</li>
</ul>
<h3>What's New In DevTools (Chrome 97)</h3>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-97/">https://developer.chrome.com/ja/blog/new-in-devtools-97/</a>
<h3>Deprecations and removals in Chrome 97</h3>
Chrome97 で非推奨になったもの、もしくは削除されたものです
<a href="https://developer.chrome.com/blog/deps-rems-97/">https://developer.chrome.com/blog/deps-rems-97/</a>
<h3>Remove SDES key exchange for WebRTC</h3>
WebRTC の SDES 鍵交換の仕様は 2013 年以降、関連する IETF の標準仕様では MUST NOT となっており、近年では Chrome での使用率も大幅に低下しているので Chrome97 で廃止されました。
参考:
<a href="https://webrtc-security.github.io/report_ja/">https://webrtc-security.github.io/report_ja/</a>
<h3>Remove WebSQL in third-party contexts</h3>
サードパーティ製の WebSQL が廃止されました。W3C では代わりに Web Storage と Indexed Database を推奨しています。
<h3>Remove SDP Plan B</h3>
WebRTC でセッションを確立するために使用される SDP に非標準の実装であった<code>Plan B</code>が削除されました。
参考: SDP の Unified Plan と Plan B
<a href="https://blog.jxck.io/entries/2018-01-05/sdp-unified-plan.html">https://blog.jxck.io/entries/2018-01-05/sdp-unified-plan.html</a>
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<a href="https://www.chromestatus.com/features#milestone%3D97">https://www.chromestatus.com/features#milestone%3D97</a>
<h3>Feature policy for Keyboard API</h3>
各言語に対応した keybord レイアウト情報を返す<code>getLayoutMap()</code>メソッドは全てのコンテキスト(iframe 内など)では利用できないという問題点がありました。今回のアップデートで iframe の allow 属性に<code>keyboard-map</code>を追加することでこの問題を解決することができるようになりました。
<a href="https://chromestatus.com/features/5657965899022336">https://chromestatus.com/features/5657965899022336</a>
<h3><code>PermissionStatus.prototype.name</code></h3>
<code>PermissionStatus</code> インターフェースに読み取り専用の属性 <code>"name"</code> を追加し、<code>PermissionStatus</code> が作成された後、パーミッションの名前が取得できるようになりました。
今までは<code>Permissions API</code> を使って複数のパーミッションを同時に問い合わせた際、どの PermissionStatus がどのパーミッションに対応しているのかを識別する方法がありませんでした。
<a href="https://chromestatus.com/features/5651653697994752">https://chromestatus.com/features/5651653697994752</a>
<h3>Propagate request origin and redirect chain in passthrough service workers.</h3>
<code>fetch(evt.request)</code>メソッドで navigation requests を発行する ServiceWorker が<code>FetchEvent.request</code> からのオリジンとリダイレクトチェーンを使用するようになります。
今までは常に ServiceWorker のオリジンが設定され、リダイレクトチェーンを使用することはありませんでした。
<a href="https://chromestatus.com/features/5752539724120064">https://chromestatus.com/features/5752539724120064</a>
<h3>Support calc(<code>&#x3C;number></code>) where only accepts <code>&#x3C;integer></code></h3>
<a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-96">Chrome 96 リリースノートまとめ</a>にも記載したものが、Chrome97 で追加されました。
<blockquote>
css の calc()関数で integer しか受け取らないような場所でも number を指定できるようになりました。 もっとも近い整数に丸められます。
</blockquote>
<a href="https://chromestatus.com/features/5656451751084032">https://chromestatus.com/features/5656451751084032</a>
<h3>transform: perspective(none)</h3>
CSS transform プロパティ内で利用できる、<code>perspective()</code>関数への引数として'none'を実装としてサポートしました。<code>perspective(0)</code>と<code>perspective(none)</code>では挙動が変わるため、変形をしないことを意図する場合(単位行列として扱いたい場合)は<code>perspective(none)</code>を利用するようにしましょう。
<a href="https://chromestatus.com/features/5687325523705856">https://chromestatus.com/features/5687325523705856</a>

<ul>
<li><a href="https://www.mozilla.org/en-US/firefox/96.0/releasenotes/">https://www.mozilla.org/en-US/firefox/96.0/releasenotes/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96</a></li>
</ul>
Firefox 96 がリリースされました！
全体的に性能面での改善が多くを占めるアップデートでした。
本リリースでは Cookie Policy がデフォルトで <code>SameSite=lax</code>を指定するようになりました。
また、<code>color-scheme</code>プロパティが追加され、IE 以外の主要なブラウザで利用可能になりました。
<h2>New</h2>
<ul>
<li>ノイズ抑制やオートゲインコントロールの大きな改善とエコーキャンセレーションの若干の改善がされました</li>
<li>メインスレッドの負荷が大きく軽減されました</li>
<li>Cookie Policy をデフォルトで <code>SameSite=lax</code> に強制するようになりました</li>
</ul>
<h2>Fixed</h2>
<ul>
<li>macOS で Gmail のリンクをコマンドクリックした際、正常に新しいタブが開くようになりました
<ul>
<li>Firefox95 で unresolved になっていた問題の解決</li>
</ul>
</li>
<li>ビデオの SSRC(RTP セッションでの参加者の識別子) が断続的にドロップする問題が修正されました</li>
<li>特定のサイトでビデオの画質が劣化する問題が修正されました</li>
<li>macOS でいくつかの問題を回避するためにフルスクリーンでのビデオが無効化されています</li>
</ul>
<h2>Developer</h2>
<ul>
<li>Linux にて <code>Select All</code> のショートカットキーが <code>Alt-A</code> から <code>Ctrl-A</code> に変更されました
<ul>
<li>web-compatibility の確保やアクセスキーとの衝突回避のため</li>
</ul>
</li>
</ul>
<h2>Web Platform</h2>
<ul>
<li>Web Lock API が実装されました。
<ul>
<li>異なる ServiceWorker やタブで実行されているスクリプトを相互連携させることが可能になります</li>
</ul>
</li>
<li>WebRTC ライブラリが更新されたことで Web 会議アプリでの音声やビデオ機能が改善されました</li>
<li>CSS にて <code>color-scheme</code> がサポートされ、Web ページがどのカラースキームでレンダリング可能かを指定できるようになりました</li>
</ul>
<h2>開発者向けの変更</h2>
<h3>for web developers</h3>
<h4>CSS</h4>
<ul>
<li>CSS で色の値として利用される <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb()"><code>hwb()</code></a> 関数が実装されました</li>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/color-scheme"><code>color-scheme</code></a>プロパティがサポートされました</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset"><code>counter-reset</code></a> プロパティにて逆順の CSS カウンターを生成する <code>reversed()</code> 関数がサポートされました</li>
</ul>
<h4>HTTP</h4>
<ul>
<li>同じドメインから送信された Cookie でも異なるスキームを使用されているものは Cookie SameSite ディレクティブについて別サイトから送信されたものと見なすようになりました</li>
<li>SameSite 属性が指定されていない Cookie は暗黙的に <code>SameSite=lax</code> が指定されるようになりました</li>
<li><code>SameSite=none</code> を指定した Cookie はセキュアなコンテキストが必要になりました</li>
<li>Cookie の SameSite についてはこちらをお読みください
<ul>
<li><a href="https://blog.cybozu.io/entry/2020/05/07/080000">Cookie の SameSite 属性について - Cybozu Inside Out | サイボウズエンジニアのブログ</a></li>
</ul>
</li>
</ul>
<h4>APIs</h4>
<ul>
<li>Android において <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/canShare"><code>navigator.canShare()</code></a> がサポートされました</li>
<li>デフォルトで <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API">Web Locks API</a> が有効になりました</li>
</ul>
<h4>Canvas</h4>
<ul>
<li>WebP の画像エンコーダーをサポートしました</li>
</ul>
<h4>DOM</h4>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver"><code>IntersectionObserver()</code></a> のコンストラクターが関連付けられたパラメータオプションにから文字が渡された場合に例外発生ではなく <code>rootMargin</code> を設定するようになりました</li>
</ul>
<h4>Media, WebRTC, and Web Audio</h4>
<ul>
<li>いくつかの非標準な静的フィールドが <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_Statistics_API">WebRTC Statistics API</a> から削除されました</li>
</ul>
<h4>WebDriver conformance (Marionette)</h4>
<ul>
<li><code>WebDriver:GetElementShadowRoot</code> コマンドが追加されました
<ul>
<li>指定された要素が持っている shadow root を取り出す</li>
</ul>
</li>
<li><code>WebDriver:ExecuteScript</code> 及び <code>WebDriver:ExecuteAsyncScript</code>にて要素の <code>ShadowRoot</code> を返す際に <code>cyclic object error</code> が発生する問題が解決されました</li>
<li><code>WebDriver:Print</code> が PDF にプリントする際のページ範囲をサポートするように拡張されました</li>
</ul>

Posts