nus3

フロントエンドエキスパートチームでは週に 1 回、最近のフロントエンド情報を見てワイワイする Cybozu Frontend Weekly というイベントを社内で開催しています。
今回は Cybozu Frontend Weekly で 6 月に話題に上がった記事をご紹介します。
<h2>💬 Languages</h2>
<h3><a href="https://nodejs.org/en/blog/announcements/nodejs16-eol/">Bringing forward the End-of-Life Date for Node.js 16 | Node.js</a></h3>
Node.js v16 の EOL が 当初の予定より 7 ヶ月早まり 2023/9/11 になるとのことです。OpenSSL 1.1.1 側の EOL にあわせるのが理由だそうです。
<h2>📖 Framework, Library</h2>
<h3><a href="https://zenn.dev/mugi/articles/334f9556095a07">RedwoodJS を Ruby on Rails と比較してみる</a></h3>
チームの<a href="https://twitter.com/mugi_uno">@mugi_uno</a> が書いた RedwoodJS と Ruby on Rails の比較記事。本人曰く、RedwoodRecord という ORM が Rails の ActiveRecord にかなり近い体験を提供してくれるので感動したらしいです。また、RedwoodJS は RedwoodJS を利用する企業に対してファンドを実施するなど市場拡大に対して精力的なようです。
<h3><a href="https://github.com/eslint/rfcs/pull/91">feat: create "@eslint-community GitHub organization" RFC #91</a></h3>
eslint-community org を作って ESLint に関係あるパッケージのメンテナンスをするという提案が進行しているようです。
<h3><a href="https://tailwindcss.com/blog/2022-05-23-headless-ui-v1-6-tailwind-ui-team-management">Headless UI v1.6, Tailwind UI team management, Tailwind Play improvements, and more</a></h3>
Tailwind CSS のチームが最近行った活動のまとめです。
<ul>
<li>HeadlessUI の 1.6 リリース</li>
<li>VSCode の Tailwind CSS IntelliSense の拡張に Tailwind CSS language mode が追加</li>
<li>Tailwind CSS templates が発表予定</li>
</ul>
<h3><a href="https://github.com/lerna/lerna/releases/tag/v5.0.0"><code>lerna/lerna</code> v5.0.0 Release</a></h3>
Lerna が Nx に委譲されてから初のアップデートです。内部処理が Nx に切り替わリました。
<h3><a href="https://docs.google.com/presentation/d/1tPaimqwJEXinPYifwUvA4gLCI6SezZsViuJvieWGAug/edit">State of Vuenion</a></h3>
Vue Amsterdam での Evan you の発表資料です。
Vue 2.7 の内容や、直近リリース予定の Vue 3.3 での変更内容、エコシステムの状況などに加え、Vue の将来向けに検討されている vue/vapor と呼ばれる新しいコンパイルの仕組みについてなどが紹介されています。
<h3><a href="https://prettier.io/blog/2022/06/14/2.7.0.html">Prettier 2.7</a></h3>
<a href="https://twitter.com/PrettierCode/status/1536604535497854977">https://twitter.com/PrettierCode/status/1536604535497854977</a>
Prettier 2.7 がリリースされました。
TypeScript 4.7 サポートに加え、高速化のための --cache オプションが追加されたそうです。
チェック高速化に寄与するとのことなので、ぜひ試していきましょう。
<h3><a href="https://twitter.com/kevmodrome/status/1534275183334277121?s=20&#x26;t=Fm2pmMNFKzMqzQTiUtLQSw">Apple Music の新しいサイトで Svelte が採用された</a></h3>
<a href="https://bundlescanner.com/website/beta.music.apple.com%2Fus%2Fbrowse/all">https://bundlescanner.com/website/beta.music.apple.com%2Fus%2Fbrowse/all</a> 
を見ると、Svelte が採用されているのがわかります。
<h3><a href="https://storybook.js.org/blog/component-encyclopedia/">Component Encyclopedia のアップデート</a></h3>
さまざまなプロダクトの Storybook コンポーネントを見れる Component Encyclopedia がアップデートされました。各コンポーネントの検索機能の追加などが追加されています。
fonts や token といった検索を利用することで、 Design token の参考にできたり、デザインシステムやコンポーネントの見せ方、Storybook の Addon 活用方法なども調べることができ、辞書的に活用できるそうです。
<h3><a href="https://astro.build/blog/astro-1-release-update/">Astro 1.0 Release Update | Astro</a></h3>
Astro v1.0.0 のリリースが 7 月下旬ごろになるそうです。パフォーマンス改善や Bugfix などにもう少し時間を費やすとのことです。
<h2>🖥 Browsers</h2>
<h3><a href="https://web.dev/preload-scanner/">Don't fight the browser preload scanner</a></h3>
重要なリソースの発見を遅らせるような処理は preload scanner と相性が悪く、かえってパフォーマンスが落ちることがあるので気をつけようねという記事です。
Frontend Weekly 内では、 preload scanner を邪魔しないためにも SSR のような事前に最適化が施されるような処置をした方が良いのかという議論も。SSR を実施したからといって(lazy load 等の)クライアント側の最適化手法をスキップできるわけではないため、必ずしも SSR をすれば解決できる課題ではないという話をしたりしていました。
<h3><a href="https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/">News from WWDC22: WebKit Features in Safari 16 Beta</a></h3>
Safari 16 Beta がきますという記事。Container Query や Web Push の実装や sub grid、flex box といったレイアウトのインスペクタが追加されるそうです。
<h3><a href="https://deep-space.blue/web/2263">IE11 とさよならしたら全力で使える HTML/CSS まとめ【40 個以上】</a></h3>
IE11 のサポートを考えなかった場合に使えるようになる HTML, CSS のまとめです。position: sticky や object-fit など、必須に近いものが紹介されているので抑えておくと良さそうです。
<h2>📏 Web Standard</h2>
<h3><a href="https://www.mnot.net/blog/2022/06/06/http-core">A New Definition of HTTP</a></h3>
HTTP 関連 RFC がどばっと公開されました。
<ul>
<li>RFC 9110: HTTP Semantics</li>
<li>RFC 9111: HTTP Caching</li>
<li>RFC 9112: HTTP/1.1</li>
<li>RFC 9113: HTTP/2</li>
<li>RFC 9114: HTTP/3</li>
<li>RFC 9163: Expect-CT Extension for HTTP</li>
<li>RFC 9204: QPACK: Field Compression for HTTP/3</li>
<li>RFC 9205: Building Protocols with HTTP</li>
<li>RFC 9209: The Proxy-Status HTTP Response Header Field</li>
<li>RFC 9211: The Cache-Status HTTP Response Header Field</li>
<li>RFC 9213: Targeted HTTP Cache Control</li>
<li>RFC 9218: Extensible Prioritization Scheme for HTTP</li>
<li>RFC 9220: Bootstrapping WebSockets with HTTP/3</li>
<li>RFC 9230: Oblivious DNS over HTTPS</li>
</ul>
各 RFC については<a href="https://blog.jxck.io/entries/2022-06-16/HTTP-RFCs.html">HTTP 関連 RFC が大量に出た話と 3 行まとめ</a>で概要が紹介されています。
なお、RFC 公開を祝い HTTP RFC Publication Study という、
複数人の方で内容のキャッチアップを行うイベントが行われ、その動画が YouTube 上にアーカイブとして残っています。
<a href="https://www.youtube.com/watch?v=_hfG0HCufbs">https://www.youtube.com/watch?v=_hfG0HCufbs</a>
<h3><a href="https://zenn.dev/jxck/books/cache-anatomia">Web 技術解体新書「第二章 Cache 解体新書」リリース</a></h3>
Web における Caching の概念を <code>Cache-Control</code> だけでなく関連するあらゆる仕様の側面から解説した Zenn book がリリースされました。
<h2>🎨 Design</h2>
<h3><a href="https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/">The Surprising Truth About Pixels and Accessibility</a></h3>
px と rem/em どっち使う？という話。
フォントは rem 等を使って padding なんかは px でいいよね(場合による)、みたいな話でした。
px と rem のマッピングを良い感じにするために body のフォントサイズに 62.5% を設定するのは良くないよという話が印象的でした。
(1rem はあくまでユーザが読みやすい標準的なサイズにすべきという思想らしいです)
<h3><a href="https://material.io/blog/roboto-flex">Roboto … But Make It Flex</a></h3>
Google Fonts に Roboto Flex という新しい Variable Fonts が追加されました。
<h3><a href="https://web.dev/building-a-button-component/">Building a button component</a></h3>
ダークモード・ライトモードや a11y を意識したボタンコンポーネントの作り方の紹介です。<code>:is</code> を利用した <code>:hover</code>, <code>:focus</code> の一括設定や、 outline-offset を利用したフォーカス時のスタイル制御など、実際にすぐ現場で使えそうな例も多かったです。
<h3><a href="https://webkit.org/blog/12662/customizing-color-fonts-on-the-web/">Customizing Color Fonts on the Web</a></h3>
Safari 15.4 から<code>@font-palette-values</code>がサポートされました。この記事では実際に<code>@font-palette-values</code>を使ってカラーフォントに定義されているパレットを指定する方法や、パレットの色を上書きする方法が紹介されています。
<hr>
nus3 が印象に残っているのは、<a href="https://web.dev/building-a-button-component/#interactive-focus-ring">フォーカスされているボタンのスタイリング</a>の話です。フォーカスされたボタンのインタラクティブなデザインをシンプルな CSS で実装できるのでおすすめです！

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 つとして入れてもいいかもしれません。

今年からフロントエンドエキスパートチームでは活動内容の一つである探求の一環として、メンバーが気になった技術に対して、気軽に触ってみる会をしています。次の画像は筆者が Slack で、気軽に触ってみる会の開催を宣言してる時のものです。
<img src="/frontend-expert/image/turborepo/slack.png" alt="slackで気軽に触ってみる会を宣言してる" width="718" height="152.15061295971978" >
今回は<a href="https://vercel.com/blog/vercel-acquires-turborepo">去年の 12 月に Vercel に買収されたニュース</a>があった Turborepo を気軽に触ってみました。
個人的には 1 人で調べるときよりも複数人でわいわい調べた方が、その技術や関連する周辺知識の話を色んな人の観点で深掘ってできて、とても有意義な時間でした。
<h2>概要</h2>
Turborepo はモノレポのためのビルドシステムで次のような特徴があります。
<ul>
<li>Yarn, npm, pnpm の workspaces に対応してるリポジトリに対して簡単に導入できる</li>
<li>workspace 内のコマンドの依存関係をシンプルに設定してくれる</li>
<li>Turborepo で実行するコマンドがない package はスルーしてくれる(npm workspace の<code>--if-present</code>に相当)</li>
<li>ローカルキャッシュ、リモートキャッシュを生成・利用できる</li>
</ul>
<h3>サンプルで作ったモノレポ構成</h3>
今回は Yarn v1 の workspace を使ってます。 
<a href="https://github.com/nus3/p-turborepo/tree/main/yarn">https://github.com/nus3/p-turborepo/tree/main/yarn</a>
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">├── apps
│ └── nus3-a: Next.js
└── packages:
 ├── nus3-button2: Reactのコンポーネント + ViteのLibrary Modeでビルド
 ├── nus3-config: tsconfig + eslintのconfig
 └── nus3-ui: Reactのコンポーネント(ビルドせずに使う)</code></pre></div>
サンプルで作ったモノレポ内の package たちは次のような依存関係になっています。 
(色々試してたので適当な命名になってます。すんません)
<ul>
<li><code>nus3-a</code>は<code>nus3-ui</code>と<code>nus3-button2</code>に依存している</li>
<li><code>nus3-ui</code>は<code>nus3-button2</code>に依存している</li>
</ul>
<img src="/frontend-expert/image/turborepo/dependencies.png" alt="サンプルリポジトリの依存関係" width="577" height="314" >
<h3>使い方</h3>
<ol>
<li>使っているパッケージマネージャーで(Yarn, npm, pnpm)で workspace の設定</li>
<li><code>turbo</code>のインストール</li>
<li>package.json に<code>pipeline</code>の設定</li>
</ol>
<h4>1. 使っているパッケージマネージャーで(Yarn, npm, pnpm)で workspace の設定</h4>
workspace の設定については割愛します。各パッケージマネージャーのドキュメントをご覧ください。
<ul>
<li><a href="https://classic.yarnpkg.com/lang/en/docs/workspaces/">Yarn</a></li>
<li><a href="https://docs.npmjs.com/cli/v8/using-npm/workspaces">npm</a></li>
<li><a href="https://pnpm.io/workspaces">pnpm</a></li>
</ul>
<h4>2. <code>turbo</code>のインストール</h4>
<code>yarn add turbo -W --dev</code>で Turborepo を追加します。
<h4>3. package.json に<code>pipeline</code>の設定</h4>
<code>package.json</code>に<code>turbo.pipeline</code>を追加し、そこで<code>turbo run {command}</code>で実行する command の依存関係やキャッシュの設定をします。この<code>pipeline</code>で定義した command しか<code>turbo run {command}</code>では実行できません。
実際に定義したものが次の json になります。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "turbo": {
 "pipeline": {
 "build": {
 "dependsOn": ["^build"],
 "outputs": ["dist/**", ".next/**"]
 },
 "test": {
 "dependsOn": ["build"]
 },
 "lint": {},
 "deploy": {
 "dependsOn": ["build", "test", "lint"]
 },
 }
 }
}
</code></pre></div>
<code>dependsOn</code>で依存関係を、<code>outputs</code>でキャッシュするものを指定します。
定義したコマンドを一つずつ見ていきましょう。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"dependsOn": ["^build"],
</code></pre></div>
dependOn に<code>^</code>を追加したコマンド(<code>^build</code>)を指定することで workspace 内の各 package の指定したコマンド(<code>build</code>)を package 間の依存関係を考慮した順番で実行してくれます。
実際に実行してみると、サンプルで作った各 package の依存関係を考慮した順番(<code>@nus3/example-button2</code> → <code>nus3-ui</code> → <code>nus3-a</code>)でビルドされていることがわかります。 
(※今回サンプルで作った構成では<code>nus3-ui</code>はビルドの必要がないですが、依存関係を考慮した順番を表すのにあえて build コマンドを追加しています)
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">$ turbo run build
• Packages in scope: @nus3/example-button2, nus3-a, nus3-config, nus3-ui
• Running build in 4 packages
@nus3/example-button2:build: cache miss, executing a161062b16a0be35
@nus3/example-button2:build: $ vite build &#x26;amp;&#x26;amp; tsc -p ./tsconfig.build.json
...
@nus3/example-button2:build: dist/nus3-example-button2.es.js 3.30 KiB / gzip: 1.39 KiB
nus3-ui:build: cache miss, executing b32d4fb848c8658f
nus3-ui:build: $ echo &#x26;#39;build nus3-ui&#x26;#39;
...
nus3-a:build: cache miss, executing a80d8842624981a8
nus3-a:build: $ next build
...

 Tasks: 3 successful, 3 total
Cached: 0 cached, 3 total
 Time: 5.702s</code></pre></div>
次の<code>outputs</code>はコマンドを実行した際に、<code>dist</code>と<code>.next</code>配下にあるファイル群をキャッシュする設定です。<code>node_modules/.cache/turbo</code>にキャッシュしたファイルが出力されます。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"outputs": ["dist/**", ".next/**"]
</code></pre></div>
先程の build コマンドをもう一度実行すると cache が使われ、前回より早く実行されているのがわかります。
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">$ turbo run build
• Packages in scope: @nus3/example-button2, nus3-a, nus3-config, nus3-ui
• Running build in 4 packages
@nus3/example-button2:build: cache hit, replaying output a161062b16a0be35
...
nus3-ui:build: cache hit, replaying output b32d4fb848c8658f
...
nus3-a:build: cache hit, replaying output a80d8842624981a8
...

 Tasks: 3 successful, 3 total
Cached: 3 cached, 3 total
 Time: 221ms &#x26;gt;&#x26;gt;&#x26;gt; FULL TURBO

✨ Done in 0.57s.
</code></pre></div>
次のように何も指定しない場合、依存関係がないものとして認識され並列に実行されます
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"lint": {},
</code></pre></div>
次の deploy コマンドの<code>dependsOn</code>では pipeline で定義した<code>build</code>, <code>test</code>, <code>lint</code>(順不同)を実行し、終了した時点で workspace 内の各 package の<code>deploy</code>コマンドを実行します。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"deploy": {
 "dependsOn": ["build", "test", "lint"]
},
</code></pre></div>
今回定義したものの場合、Turborepo は次のようなことを考慮しながら各々の package のコマンドを実行します。
<ul>
<li><code>build</code>: モノレポ内の各 package の依存関係を考慮しつつ build</li>
<li><code>test</code>: <code>pipeline</code>で定義した<code>build</code>が実行された後に実行</li>
<li><code>lint</code>: 他のコマンドの順番を気にせず、並列で実行</li>
</ul>
deploy コマンドを実行した結果が次になります。
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">$ turbo run deploy
• Packages in scope: @nus3/example-button2, nus3-a, nus3-config, nus3-ui
• Running deploy in 4 packages
nus3-a:lint: $ next lint
@nus3/example-button2:build: $ vite build &#x26;amp;amp;&#x26;amp;amp; tsc -p ./tsconfig.build.json
...
nus3-ui:build: $ echo &#x26;#39;build nus3-ui&#x26;#39;
...
nus3-a:build: $ next build
...
nus3-a:test: $ echo &#x26;#39;test nus3-a&#x26;#39;
...
nus3-a:deploy: $ echo &#x26;#39;deploy nus3-a&#x26;#39;</code></pre></div>
実際に上記を考慮しつつ各 package のコマンドが実行された後に、最後に deploy コマンドが実行されているのがわかると思います。
また、今回はローカルキャッシュの話のみでしたが、Turborepo には<a href="https://turborepo.org/docs/features/remote-caching#vercel">Vercel</a>や<a href="https://turborepo.org/docs/features/remote-caching#custom-remote-caches">独自</a>にキャッシュを配置することで、同じハッシュのキャッシュがあった場合にそのキャッシュを使ってくれるリモートキャッシュといった機能も Beta で用意されています。
今のプロジェクトが Yarn や npm の workspace を使っているのであれば、Turborepo を試しに入れてみてもいいかもしれません。

<a href="https://github.com/storybookjs/storybook/releases/tag/v6.4.0">Storybook の 6.4.0 がリリース</a>され、<code>Interactive stories</code>が新機能として追加されました。詳細は<a href="https://storybook.js.org/blog/interactive-stories-beta/">Storybook のブログ</a>でも記載されています。
<h2>概要</h2>
Interactive stories の Addon を追加すると、testing-library で定義した操作を Storybook 上で確認することができるようになります。
次の gif のようにユーザー操作に対するコンポーネントの状態を UI(Addon)からステップごとに確認できます。
<img src="/frontend-expert/image/storybook-interactive-stories/capture.gif" alt="Interactive addonを使った例" width="360" height="240" >
<h2>導入手順</h2>
<ol>
<li>パッケージを追加する</li>
<li>Storybook の<code>main.js</code>に設定を追加する</li>
<li>Interactive stories 用の story を<code>stories.tsx</code>に追加する</li>
</ol>
<h3>1. パッケージを追加する</h3>
Interactive addon を利用するには次のパッケージが必要です。 
(今回は React のコンポーネントを対象としています)
<ul>
<li>@storybook/addon-interactions</li>
<li>@storybook/react</li>
<li>@storybook/testing-library</li>
</ul>
次のコマンドを実行してインストールします。
<code>npm i -D @storybook/addon-interactions @storybook/react @storybook/testing-library</code>
今回試したバージョンは次になります。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "devDependencies": {
 "@storybook/addon-interactions": "6.4.0",
 "@storybook/react": "6.4.0",
 "@storybook/testing-library": "0.0.7"
 }
}
</code></pre></div>
<h3>2. Storybook の<code>main.js</code>に設定を追加する</h3>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">module.exports = {
 stories: ["../src/components/**/**/*.stories.@(js|jsx|ts|tsx)"],
 addons: ["@storybook/addon-interactions"], // addonの追加
 features: {
 interactionsDebugger: true, // Interactive storiesをaddonで1ステップずつ確認できるようにするのに必要
 },
};
</code></pre></div>
<h3>3. Interactive stories 用の story を<code>stories.tsx</code>に追加する</h3>
例えば、次のサンプルコードでは Storybook 上にマウントされたコンポーネントに対して、<code>Add</code>のラベルがついたボタンを 4 回クリックした後に<code>Reset</code>のボタンをクリックする story を<code>@storybook/testing-library</code>を使って追加しています。
<div class="remark-highlight"><pre class="language-tsx"><code class="language-tsx">// Interactive storiesに関係ある部分しか記載してません
import { within, userEvent } from "@storybook/testing-library";

const Template: Story&#x3C;ExampleComponentProps> = (args) => (
 &#x3C;ExampleComponent {...args} />
);

export const Default = Template.bind({});
Default.play = async ({ canvasElement }) => {
 const canvas = within(canvasElement);
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Reset" }));
};
</code></pre></div>
<code>Default.play = async ({ canvasElement }) => {</code>は Storybook6.4 でサポートされる<a href="https://storybook.js.org/blog/component-story-format-3-0/">CSF3</a>の構文です。 
また、まだ v0.5 ですが Storybook から<a href="https://github.com/storybookjs/eslint-plugin-storybook">eslint-plugin</a>も提供されているので、併せて試してみても良さそうです。
Interactive stories の addon を追加した Storybook を GitHub Pages でホスティングしたので、実際に触ってみたい方は次のリンクへ。 
<a href="https://nus3.github.io/p-storybook/?path=/story/components-examplecomponent--default">https://nus3.github.io/p-storybook/?path=/story/components-examplecomponent--default</a>
Storybook 上で複雑な操作があるコンポーネントのデバッグや共有がしやすくなりそうですね。
<h2>参考リンク</h2>
<ul>
<li><a href="https://storybook.js.org/blog/interactive-stories-beta/">https://storybook.js.org/blog/interactive-stories-beta/</a></li>
<li><a href="https://storybook.js.org/blog/component-story-format-3-0/">https://storybook.js.org/blog/component-story-format-3-0/</a></li>
<li><a href="https://github.com/nus3/p-storybook">実際に実装したリポジトリ</a></li>
</ul>

Chrome 95 のリリースノート関連の情報をまとめました。
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-95/">https://developer.chrome.com/blog/new-in-chrome-95/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-95/">https://developer.chrome.com/blog/new-in-devtools-95/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-95/">https://developer.chrome.com/blog/deps-rems-95/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D95">https://www.chromestatus.com/features#milestone%3D95</a></li>
</ul>
<h2>Routing with URLPattern</h2>
<code>URLPattern</code>という機能が追加されました。現在は Chrome、Edge の 95 以上に対応しています。
他のブラウザや Node.js ではまだサポートされていない機能ですが、<a href="https://github.com/kenchris/urlpattern-polyfill">urlpattern-polyfill</a>で polyfill できます。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const pattern = new URLPattern({ pathname: "/books/:id" });
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { id: '123' }

// 引数で渡せる全てのプロパティ
const p = new URLPattern({
 protocol: "http{s}?",
 username: ":username",
 password: ":password",
 hostname: ":subdomain.example.com",
 port: ":port(80|443)",
 pathname: "/:path",
 search: "*",
 hash: "*",
});
</code></pre></div>
詳細はこちら
<a href="https://web.dev/urlpattern/">https://web.dev/urlpattern/</a>
<h2>Picking colors with the Eye Dropper API</h2>
カラーを取得する Eye Dropper API が追加されました
詳細はこちらの記事で解説しています。
<a href="https://cybozu.github.io/frontend-expert/posts/eyedropper-api">Chrome 95 で追加された画面上の色を取得する EyeDropper API について</a>
<h2>PWA Summit</h2>
10 月 6~7 日に PWA Summit が開催されてました 
見逃した方はアーカイブが下記のリンクに残ってるので、そこから確認できます
<a href="https://pwasummit.org/">https://pwasummit.org/</a> 
<a href="https://www.youtube.com/channel/UC1j3gvdVISAEO1_2MwA5oQw/videos">https://www.youtube.com/channel/UC1j3gvdVISAEO1_2MwA5oQw/videos</a>
<h2>User-agent reduction origin trial</h2>
Origin Trial で実際に User-Agent の文字列が削減された後の挙動が試せます
参考:
<ul>
<li><a href="https://web.dev/user-agent-client-hints/">User-Agent Client Hints によるユーザーのプライバシーと開発者体験の改善</a></li>
<li><a href="https://developers-jp.googleblog.com/2021/09/chrome-user-agent.html">User-Agent Reduction origin trial(日本語訳)</a></li>
</ul>
<h2>And more!</h2>
<ul>
<li>Storage Foundation API を origin trial で試せます</li>
<li>WebAssembly で例外処理のサポートが提供され、例外がスローされたときにコードが中断できるようになります</li>
<li>Chrome 100 が来年きます。バージョンが 2 桁から 3 桁になるので、自分のコードに何らかの影響があるかどうかを確認するといいかもしれません</li>
</ul>
<h2>DevTools</h2>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-95/">https://developer.chrome.com/ja/blog/new-in-devtools-95/</a>
<h2>Deprecations and removals in Chrome 95</h2>
Chrome 95 で非推奨になったもの、もしくは削除されたものです。
<h3>Support for URLs with non-IPv4 hostnames ending in numbers</h3>
有効な IPv4 アドレスではない、 <code>http://foo.127.1/</code> のような数字で終わる host name を持つ URL が拒否されるようになります。
社内のプレビュー環境などで IP アドレスをポストフィックスとして利用してたりする場合は影響がでているかもしれません。
<h3>WebAssembly cross-origin module sharing</h3>
cross-originでsame-siteな環境間でのWebAssemblyモジュールの共有が非推奨になりました
<a href="https://www.chromestatus.com/feature/5650158039597056">https://www.chromestatus.com/feature/5650158039597056</a>
合わせてこちらも参考にしてください 
<a href="https://developer.chrome.com/blog/wasm-module-sharing-restricted-to-same-origin/">Restricting Wasm module sharing to same-origin</a>
<h3>Deprecate U2F API (Cryptotoken)</h3>
U2F API が非推奨になり、Chrome 98 からはデフォルトで無効になります。
U2F とはなんぞやという人はこちらの記事が参考になります。
<a href="https://blog.jxck.io/entries/2018-05-15/webauthentication-api.html">Web Authentication API で FIDO U2F(YubiKey) 認証 | blog.jxck.io</a>
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<blockquote>
<a href="https://www.chromestatus.com/features#milestone=95">https://www.chromestatus.com/features#milestone=95</a>
</blockquote>
<h3>Back-forward cache for same-site navigations on Android</h3>
Chrome 86 から origin trial で試せていた Android での戻る/進むのキャッシュが same-site で効くようになりました。 
<a href="https://www.chromestatus.com/feature/5694778600587264">https://www.chromestatus.com/feature/5694778600587264</a>
bfcache(Back/forward cache)については下記に詳細の説明が載っています。 
<a href="https://web.dev/bfcache/">https://web.dev/bfcache/</a>
<h3>CSS @counter-style rules in shadow trees</h3>
Shadow tree に対してカスタムの counter-style を定義することができるようになりました。 
<a href="https://www.chromestatus.com/feature/5716198446596096">https://www.chromestatus.com/feature/5716198446596096</a>
<code>@counter-style</code>については下記を参考ください
<div class="remark-highlight"><pre class="language-css"><code class="language-css">@counter-style circled-alpha {
 system: fixed;
 symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
 suffix: " ";
}

.items {
 list-style: circled-alpha;
}
</code></pre></div>
このスタイルを当てた list を作ると次のようなリストができます。
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">Ⓐ One
Ⓑ Two
Ⓒ Three
Ⓓ Four
Ⓔ FIve</code></pre></div>
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/@counter-style#specifying_symbols_with_counter-style">https://developer.mozilla.org/ja/docs/Web/CSS/@counter-style#specifying_symbols_with_counter-style</a>
<h3>Cookie size limits</h3>
Set-Cookie header、及び、document.cookie、CookieStore で設定される Cookie のサイズが制限されます。
具体的には Cookie の名前と値の合計が 4096 バイトまでになり、Cookie の各属性値は 1024 バイトに制限する必要があります。
<a href="https://www.chromestatus.com/feature/4946713618939904">https://www.chromestatus.com/feature/4946713618939904</a>
<h3>Logical properties for contain-intrinsic-size</h3>
contain-intrinsic-size を省略した次の表記が追加されます。
<ul>
<li>contain-intrinsic-{width,height}</li>
<li>contain-intrinsic-{inline,block}-size</li>
</ul>
<a href="https://www.chromestatus.com/feature/5709654999957504">https://www.chromestatus.com/feature/5709654999957504</a>
参考:
<a href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override</a>
<h3>contain-intrinsic-size</h3>
content-visibility で指定された要素の自然なサイズを制御するプロパティです。
次の実装は画面外の section のレンダリングをスキップする例です。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;style>
section {
 content-visibility: auto;
 contain-intrinsic-size: 0 500px;
}
&#x3C;/style>
</code></pre></div>
ビューポート外のコンテンツはレンダリングされなくなります。
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/content-visibility">https://developer.mozilla.org/ja/docs/Web/CSS/content-visibility</a>
<h3>New UA platform version source on Windows for User-Agent Client Hints</h3>
Windows の Sec-CH-UA-Platform-Version(User-Agent Client Hints)で返されるバージョンが Windows プラットフォームの違いを識別できるように更新されました。
<a href="https://www.chromestatus.com/feature/5080939765956608">https://www.chromestatus.com/feature/5080939765956608</a> 
<a href="https://github.com/WICG/ua-client-hints/issues/220#issuecomment-870858413">https://github.com/WICG/ua-client-hints/issues/220#issuecomment-870858413</a>
<h3>Note taking new note URL</h3>
Web Application Manifest が <code>note_taking</code> と <code>new_note_url</code> に対応しました。
Web Application 側から新しいメモを書きたい時にユーザーエージェントに読み込ませたい URL を指定できるようになります。
<a href="https://www.chromestatus.com/feature/5205972320518144">https://www.chromestatus.com/feature/5205972320518144</a> 
<a href="https://wicg.github.io/manifest-incubations/index.html#note_taking-member">https://wicg.github.io/manifest-incubations/index.html#note_taking-member</a>
<h3>Secure payment confirmation</h3>
WebAuthn を利用して、Web 上での支払い時の認証を強化することができるようになります。
<a href="https://www.chromestatus.com/feature/5702310124584960">https://www.chromestatus.com/feature/5702310124584960</a>
※ Payment Request API で簡単・高速な決済を実現する
<a href="https://developers.google.com/web/updates/2016/07/payment-request?hl=ja">https://developers.google.com/web/updates/2016/07/payment-request?hl=ja</a>
※ PaymentRequestAPI で secure-payment-confirmation を使った実装例
<a href="https://www.w3.org/TR/2021/WD-secure-payment-confirmation-20210831/#sctn-sample-authentication">https://www.w3.org/TR/2021/WD-secure-payment-confirmation-20210831/#sctn-sample-authentication</a>
<h3>droppedEntriesCount in PerformanceObserver callback</h3>
PerformanceObserver のコールバックに droppedEntriesCount が追加されます。
<a href="https://www.chromestatus.com/feature/5320666234486784">https://www.chromestatus.com/feature/5320666234486784</a>
PerformanceObserver 
<a href="https://developer.mozilla.org/ja/docs/Web/API/PerformanceObserver">https://developer.mozilla.org/ja/docs/Web/API/PerformanceObserver</a>
<h3>self.reportError()</h3>
キャッチされない例外をレポートする<code>self.reportError()</code>が追加されます。
<a href="https://www.chromestatus.com/feature/5634523220934656">https://www.chromestatus.com/feature/5634523220934656</a>
以下のコードを実行するとerrorはcatchで握り潰されずに<code>Uncaught Error: foo</code>になります。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const addition = (a, b) => {
 if (a > 0) {
 self.reportError(new Error('foo'))
 }
 return a + b;
};
const count = (a, b, callback) => {
 try {
 callback(a, b)
 } catch (error) {
 console.log('bar')
 }
};

count(2, 3, addition)
</code></pre></div>
参考:
<ul>
<li><a href="https://html.spec.whatwg.org/#runtime-script-errors">https://html.spec.whatwg.org/#runtime-script-errors</a></li>
</ul>