<p>サイボウズ フロントエンドエキスパートチームの 2022 年の取り組みを紹介します。</p>
<h2>プロダクトへの支援</h2>
<p>プロダクト支援として今年はおもに次の 2 つを行いました。</p>
<ul>
<li>kintone のフロントエンドリアーキテクチャ</li>
<li>サイボウズ製品の販売管理システムのフロントエンド</li>
</ul>
<p>これに加えて現在ほかプロダクトのリアーキテクチャを進めています。また、社内向け翻訳サービスのフロントエンド刷新なども行いました。</p>
<h3>kintone のフロントエンドリアーキテクチャ</h3>
<p>kintone のフロントエンドリアーキテクチャ（フロリア）はゆっくりと着実に置き換えが進められています。フロントエンドエキスパートチームのメンバーのアウトプットとして次のような記事を出しました。</p>
<ul>
<li><a href="https://blog.cybozu.io/entry/2022/03/18/100000">Playwright &#x26; Vite ではじめる脱レガシー向け軽量 Visual Regression Test</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/04/14/110000">kintone の内部を（こっそり）React に置き換えるチームがあるってホント？</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/08/29/110000">実装例から見る React のテストの書き方</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/08/31/110000">新卒で飛び込んだフロントエンド刷新プロジェクトが学びだらけだった話</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/11/14/120000">フロントエンドのテストコードを書くときに大切にしていること</a></li>
</ul>
<p>フロリアのアウトプットでは、記事の構成やレビューなどメンバーがアウトプットしやすいようにサポートする活動も行いました。</p>
<p>エンジニアブログを見てフロリアのことを認知して応募してくれる方もおり、アウトプットによる効果が出てきているように思います。</p>
<h3>サイボウズ製品販売管理システムのフロントエンドリアーキテクチャ</h3>
<p>kintone をはじめとした、サイボウズの製品をお客様が購入する際に使われる「販売管理システム」は、 kintone と同じく Closure で構築された歴史のあるサービスです。</p>
<p>今年はこの販売管理システムの 1 ページのリアーキテクチャが完了しリリースすることができました 🎉 このまま勢いをつけてリアーキテクチャ完了を目指したいと思います。</p>
<h2>Frontend Monthly の開催</h2>
<p>社外への発信として YouTube Live にて月に一回 Frontend Monthly を 生配信・録画で開催しています。今年も月に一回の開催を継続できました。視聴してくれた方、ゲストとして参加して頂いた方々ありがとうございます。</p>
<ul>
<li><a href="https://cybozu.connpass.com/event/236989/">Cybozu Frontend Monthly#19 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/239952/">Cybozu Frontend Monthly#20 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/241837/">Cybozu Frontend Monthly#21 (ゲスト：株式会社ログラス) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/246037/">Cybozu Frontend Monthly#22 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/248124/">Cybozu Frontend Monthly#23 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/250296/">Cybozu Frontend Monthly#24 (ゲスト：LAPRAS 株式会社) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/254325/">Cybozu Frontend Monthly#25 (ゲスト：株式会社 Yuimedi) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/256774/">Cybozu Frontend Monthly#26 (ゲスト：株式会社エイチーム) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/258919/">Cybozu Frontend Monthly#27 (ゲスト：株式会社ナレッジワーク) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/262716/">Cybozu Frontend Monthly#28 (ゲスト：サイボウズ Mantle チーム) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/265151/">Cybozu Frontend Monthly#29 JSConf JP 2022 Special - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/269123/">Cybozu Frontend Monthly Special 2022 - connpass</a></li>
</ul>
<p>おかげさまで開催回数が 30 回まできました。2023 年も継続して開催したいと思います。</p>
<h2>イベントへのスポンサー</h2>
<p>今年は<a href="https://vuefes.jp/2022/">Vue Fes Japan Online 2022</a>への協賛を行いました。</p>
<p>来年も引き続き、コミュニティや場を盛り上げていくのに少しでも協力できればと思います。</p>
<h2>おわりに</h2>
<p>2023 年も引き続き支援活動、発信を続けていきたいと思います。</p>
<p>フロントエンドエキスパートチームではサイボウズのフロントエンドを最高にするメンバーを募集しています。採用サイトからの応募やカジュアル面談などお待ちしております。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.co.jp/recruit/entry/career/front-end-expert.html" style="border: none;"></iframe></div></p>


<p>2022/7/13に、フロントエンドツールである Vite のバージョン 3.0 がリリースされました 🎉</p>
<ul>
<li><a href="https://vitejs.dev/blog/announcing-vite3.html">Vite 3.0 is out! | Vite</a></li>
<li><a href="https://github.com/vitejs/vite/blob/v3.0.0/packages/vite/CHANGELOG.md">CHANGELOG</a></li>
<li><a href="https://vitejs.dev/guide/migration.html">Migration from v2 | Vite</a></li>
</ul>
<p>このエントリーでは、リリース時に公開されたアナウンス(<a href="https://github.com/vitejs/vite/releases/tag/v3.0.0">Release v3.0.0 · vitejs/vite</a>)の内容をベースに、変更点を改めて１つずつ掘り下げて確認してみます。</p>
<h3>New Documentation</h3>
<p>公式ドキュメント(<a href="https://ja.vitejs.dev/">vitejs.dev</a>)が <a href="https://vitepress.vuejs.org/">VitePress</a> のデフォルトテーマを利用した形で刷新されました。ダークテーマ表示などが可能になっています。</p>
<p>また、あわせて次のサブドメインでもドキュメントを閲覧できるようになっています。</p>
<ul>
<li><a href="https://v2.vitejs.dev/">v2.vitejs.dev</a> - Vite 2.x 系のドキュメント</li>
<li><a href="https://main.vitejs.dev/">main.vitejs.dev</a> - Vite のメインブランチの内容</li>
</ul>
<h3>Create Vite Starter Templates</h3>
<p>Vite プロジェクトの Scaffold ジェネレータである <a href="https://github.com/vitejs/vite/tree/main/packages/create-vite"><code>create-vite</code></a> について、Vite 3.x が利用されるようになりました。</p>
<h3>Dev Improvements</h3>
<h4>Vite CLI</h4>
<p>デフォルトの開発サーバーポートが <code>5173</code>、プレビューサーバーのポートが <code>4173</code> に変更されました。デフォルトポートは以前は <code>3000</code> と <code>5000</code> でしたが、MacOS でポートの衝突が発生するなどの<a href="https://github.com/vitejs/vite/issues/5707">問題があった</a>ようです。</p>
<p>ちなみになぜ <code>5173</code> という中途半端な数字なのだろう？と思い調べてみましたが、以下の Issue コメントを見つけました。</p>
<p><a href="https://github.com/vitejs/vite/pull/6330#issuecomment-1003405068">https://github.com/vitejs/vite/pull/6330#issuecomment-1003405068</a></p>
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">At a team meeting we thought about 5173
Like 5173 in leet for Vite | V I T Ǝ | V === Roman 5</code></pre></div>
<ul>
<li>V … 5</li>
<li>I … 1</li>
<li>T … 7</li>
<li>Ǝ … 3</li>
</ul>
<p>らしいです。cool</p>
<h4>Improved WebSocket Connection Strategy</h4>
<p>Vite 2.x までは、Proxy を経由したサーバー確立に課題があったとのことで、3.0 からはそれが改善されました。</p>
<p><a href="https://github.com/sapphi-red/vite-setup-catalogue"><code>vite-setup-catalogue</code></a> というセットアップのサンプルリポジトリ内にも追加されたことで、今後は同パターンは CI で検証されるようになったとのことです。</p>
<h4>Cold Start Improvements</h4>
<p>コールドスタート時に依存関係を後から解決する際に、依存の状態によってはフルリロードが発生する可能性があったのが、ブラウザに依存を渡すタイミングを調整することで効率化され、回避可能になったようです。</p>
<p>詳細: <a href="https://github.com/vitejs/vite/pull/8869#issuecomment-1172902125">https://github.com/vitejs/vite/pull/8869#issuecomment-1172902125</a></p>
<h4>import.meta.glob</h4>
<p>Vite では以前から <a href="https://vitejs.dev/guide/features.html#glob-import"><code>Glob Import</code></a> と呼ばれる機能が存在し、特別な関数 <code>import.meta.glob</code> を介して glob 形式で記述してのモジュール一括インポートが可能です。</p>
<p>Vite 3.0 では機能が強化され、より柔軟な指定が可能になりました。</p>
<ul>
<li>Multiple Patterns : 複数の glob パターンの記述</li>
<li>Negative Patterns : 除外パターンの記述</li>
<li>Named Imports : モジュールの一部のみを指定可能</li>
<li>Custom Queries : クエリの付与</li>
<li>Eager Imports : Dynamic import の回避</li>
</ul>
<h4>Aligning WASM Import with Future Standards</h4>
<p>Vite 2.x から WebAssembly を</p>
<div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports">init</span> <span class="token keyword module">from</span> <span class="token string">'./example.wasm'</span>
</code></pre></div>
<p>の形で import できましたが、将来的に ESM の仕様として WebAssembly が統合された場合のバッティングを考慮し、</p>
<div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports">init</span> <span class="token keyword module">from</span> <span class="token string">'./example.wasm?init'</span>
</code></pre></div>
<p>と、<code>?init</code> オプションが付与された場合に Vite 2.x 以前と同様の挙動になるよう変更されました。</p>
<p>現状で <code>?init</code> オプションを付与せずに ESM として処理する場合には <a href="https://github.com/Menci/vite-plugin-wasm"><code>vite-plugin-wasm</code></a>のようなプラグインの利用が必須となります。</p>
<h3>Build Improvements</h3>
<h4>ESM SSR Build by Default</h4>
<p>SSR 用フレームワークの大半が ESM ビルドを利用するようになったため、
Vite3 では SSR ビルドのデフォルト形式が ESM に変更されました。</p>
<p>Vite では、モジュールの形式(CommonJS/ESM)などに応じて、適宜 Vite の変換から切り離す（外部化する）ことで SSR 時の処理を効率化しています。</p>
<p>参考: <a href="https://v2.vitejs.dev/guide/ssr.html#ssr-externals">https://v2.vitejs.dev/guide/ssr.html#ssr-externals</a></p>
<p>ESM がデフォルトになったことで、デフォルトで外部化される依存が増え、より効率的に SSR ビルドが可能になるようです。</p>
<p>なお、ESM になると困るケースのために <code>legacy.buildSsrCjsExternalHeuristics: true</code> というオプションも用意されているようです。</p>
<h4>Improved Relative Base Support</h4>
<p><code>base</code> に <code>''</code> を指定することで、相対的なベースパスの指定ができるようになりました。
ビルドの段階でベースパスが不明なケースなどで役に立つようです。</p>
<h3>Experimental Features</h3>
<h4>Built Asset Paths fine-grained Control (Experimental)</h4>
<p><code>experimental.renderBuiltUrl</code> オプションが Experimental 機能として導入されました。</p>
<p>CDN での配布などを前提とした場合、ビルドによって生成されたアセットのうち一部のみ URL が異なるケースが考えられます。</p>
<p><code>experimental.renderBuiltUrl</code> を指定することで、ファイル名・ファイルタイプなどを利用して URL を切り分けられるようになります。</p>
<p>※公式ドキュメントよりコードを抜粋
<a href="https://vitejs.dev/guide/build.html#advanced-base-options">https://vitejs.dev/guide/build.html#advanced-base-options</a></p>
<div class="remark-highlight"><pre class="language-ts"><code class="language-ts">experimental<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token function">renderBuiltUrl</span><span class="token punctuation">(</span>filename<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> hostType<span class="token operator">:</span> <span class="token string">'js'</span> <span class="token operator">|</span> <span class="token string">'css'</span> <span class="token operator">|</span> <span class="token string">'html'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'public'</span> <span class="token operator">|</span> <span class="token string">'asset'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'public'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token string">'https://www.domain.com/'</span> <span class="token operator">+</span> filename
    <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">extname</span><span class="token punctuation">(</span>importer<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'.js'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span> runtime<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">window.__assetsPath(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>filename<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token string">'https://cdn.domain.com/assets/'</span> <span class="token operator">+</span> filename
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div>
<h4>Esbuild Deps Optimization at Build Time (Experimental)</h4>
<p><code>optimizeDeps.disabled: false</code> 指定が Experimental 機能として可能になりました。
<a href="https://vitejs.dev/guide/migration.html#experimental">https://vitejs.dev/guide/migration.html#experimental</a></p>
<p>Vite はデフォルトでは開発時には esbuild を用い、ビルド時には Rollup を利用します。
開発時とビルド時で異なるツールを利用するため、Vite を利用する際に考慮すべき大きい要素の一つとして挙げられます。</p>
<p>参考: <a href="https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild">Why Not Bundle with esbuild?</a></p>
<p><code>optimizeDeps.disabled: false</code> を用いると、ビルド時にも esbuild を利用するようになります。</p>
<p>CJS のみの依存関係も ESM に変換されるため、<code>@rollup/plugin-commonjs</code> プラグインが不要となります。</p>
<h4>HMR Partial Accept (Experimental)</h4>
<p><code>experimental.hmrPartialAccept</code> オプションが Experimental 機能として導入されました。</p>
<p>Vite ではフレームワークやツールの作成者向けに HMR 用の API を公開しています。
<a href="https://vitejs.dev/guide/api-hmr.html">https://vitejs.dev/guide/api-hmr.html</a></p>
<p>現状の HMR API の仕組みでは、HMR 可能なモジュールとそうでないモジュールが混在していたファイルの場合、
モジュールを部分的に差し替えることができず、非効率な更新が発生する可能性があります。</p>
<p>参考: <a href="https://github.com/vitejs/vite/discussions/7309">HMR partial accept · Discussion #7309 · vitejs/vite</a></p>
<p>新しい API である <code>import.meta.hot.acceptExports</code> と組み合わせることで、
export されているモジュールについてより詳細かつ効率的に HMR の制御が可能になります。</p>
<h3>Bundle Size Reduction</h3>
<p>Vite 自体のサイズが小さくなりました。30%ほど軽量化されたそうです。</p>
<p>Minify 用の Terser がオプションになったことや、 <code>node-forge</code> が <code>vitejs/plugin-basic-ssl</code> というプラグインに置き換わったことに起因しているようです。</p>
<h3>Compatibility Notes</h3>
<ul>
<li>Node.js のサポートバージョンが 14.18+ / 16+ になりました</li>
<li>Vite 自体が ESM として公開されています。CJS経由で利用する場合は CJS Proxy 経由となります
<ul>
<li>参考: teppeis/<a href="https://zenn.dev/teppeis/articles/2022-07-npm-dual-pacakge-cjs-proxy">Vite 3 が採用した CJS Proxy による Dual Package 構成</a></li>
</ul>
</li>
<li>サポートブラウザの基準が <code>"Native ESM"</code> <code>"Native ESM dynamic import"</code> <code>"import.meta"</code> の機能をサポートしているブラウザになりました</li>
<li>SSR および ライブラリモードにおいて、JS の拡張子はフォーマットやパッケージタイプに応じて適切な拡張子が選択されるようになりました</li>
</ul>
<p>ブラウザバージョンが変わった点は注意が必要になるかもしれません。
Migration Guide によると、主要ブラウザでは次のバージョンがサポート対象になるようです。</p>
<ul>
<li>Chrome >=87</li>
<li>Firefox >=78</li>
<li>Safari >=13</li>
<li>Edge >=88</li>
</ul>
<hr>
<p>というわけで簡単な Vite 3.0 の内容のおさらいでした。</p>
<p>Vite はもともと Native ESM を前提とした仕組みをフル活用していることもあってか、
今回の変更点でも ESM を考慮した変更が多く入った印象を受けます。</p>
<p>個人的には、まだ Experimental ではありますが <code>Esbuild Deps Optimization at Build Time</code> にある、
ビルド時にも esbuild を利用可能になる未来が楽しみです。</p>


<p>数多くの Node.js ライブラリの作者として知られる Sindre Sorhus 氏が次のようなツイートをしていた。</p>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Why is `import.meta.url` a string and not a `URL` instance?</p>&mdash; Sindre Sorhus 💙💛 (@sindresorhus) <a href="https://twitter.com/sindresorhus/status/1551202763383644161?ref_src=twsrc%5Etfw">July 24, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>これを見て私も理由が気になったので調査してみた。</p>
<h2>先にまとめ</h2>
<p>URL の仕様にそうすべきと書いてあるから。</p>
<h2>普通に考えると？</h2>
<p>まず最初に思いつくであろうものが「<code>import.meta.url</code>はECMAScriptの仕様だが、<code>URL</code>オブジェクトはHTMLの仕様に含まれるため、仕様間のそういった参照はできない」という理由である。</p>
<p>実際 Twitter 上ではそのように考えている人もいた。</p>
<p>しかし、それは誤りである。</p>
<p><a href="https://tc39.es/ecma262/#sec-meta-properties-runtime-semantics-evaluation">ECMAScriptの<code>import.meta</code>の Runtime Semantics</a> を見れば明らかだが、ECMAScript の仕様の範囲内では <code>import.meta</code> はオブジェクトであることくらいしか定められていない。どのようなプロパティが提供されるかは各ホストに委ねられている。</p>
<p>たとえば HTML や Node.js などの主要なホストでは、(ECMAScriptの立場から見れば偶然)同じ <code>import.meta.url</code> というプロパティが実装されているということになる。
つまり、<code>import.meta.url</code> は ECMAScript には含まれていない。</p>
<p>最近では Vite などのモジュールバンドラーが <code>import.meta</code> に独自のプロパティを実装しているが、それも ECMAScript の仕様としてはなんの問題もない。</p>
<p>もちろん、<a href="https://html.spec.whatwg.org/multipage/webappapis.html#hostgetimportmetaproperties">HTML の <code>import.meta.url</code> は HTML の仕様に定めらている。</a></p>
<h2>実際には</h2>
<p><a href="https://github.com/tc39/proposal-import-meta">https://github.com/tc39/proposal-import-meta</a> に起票された issue に答えが書いてあった。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://github.com/tc39/proposal-import-meta/issues/13" style="border: none;"></iframe></div></p>
<p>この issue はズバリ「<code>import.meta.url</code> は文字列ではなく <code>URL</code> オブジェクトであるべきでは？」という趣旨のものだ。</p>
<p>それに対して Domenic Denicola 氏が <a href="https://url.spec.whatwg.org/#url-apis-elsewhere">WHATWG の URL の仕様を参照して</a>回答している。</p>
<p>参照された URL の仕様を読むと次のように書かれている。</p>
<blockquote>
<p>A standard that exposes URLs, should expose the URL as a string (by serializing an internal URL). A standard should not expose a URL using a URL object. URL objects are meant for URL manipulation.</p>
</blockquote>
<p>要約すると「<code>URL</code> オブジェクトは URL を操作するためのものなので、標準が URL を公開するときは <code>URL</code> オブジェクトではなく文字列として公開するべきである。」ということである。</p>
<p>つまり、<code>import.meta.url</code> が文字列として提供されている理由は、<strong>URL の仕様に「URL を提供するときは <code>URL</code> オブジェクトではなく文字列として提供するべき」と記述されているから</strong>ということになる。</p>
<h2>最後に</h2>
<p>なぜ URL の仕様にそのような記述があるのか、という根本的な理由はわからなかった。</p>
<p>仕様によれば</p>
<blockquote>
<p>URL objects are meant for URL manipulation.</p>
</blockquote>
<p>とのことなので、単純に用途と異なるからということなのだろうが、直感的には「別に <code>URL</code> オブジェクトとして提供されていてもいいんじゃなかろうか」とも思う。</p>
<p>より詳しい背景を知っている人がいたら教えてほしい。</p>
<h2>参考リンク</h2>
<ul>
<li>TC39
<ul>
<li><a href="https://github.com/tc39/proposal-import-meta">tc39/proposal-import-meta: import.meta proposal for JavaScript</a></li>
<li><a href="https://github.com/tc39/proposal-import-meta/issues/13">Issues · tc39/proposal-import-meta</a></li>
</ul>
</li>
<li>WHATWG
<ul>
<li><a href="https://url.spec.whatwg.org/">URL Standard</a></li>
<li><a href="https://html.spec.whatwg.org/">HTML Standard</a></li>
</ul>
</li>
</ul>


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


<p>サイボウズ フロントエンドエキスパートチームの 2022 年上期（１月〜6 月）の取り組みを紹介します。</p>
<h2>プロダクトへの支援</h2>
<p>プロダクト支援としておもに次の 2 つを行いました。</p>
<ul>
<li>kintone のフロントエンドリアーキテクチャ</li>
<li>サイボウズ製品の販売管理システムのフロントエンドリアーキテクチャ</li>
</ul>
<p>これらの支援活動は現在（2022 年 7 月〜）も継続中です。</p>
<h3>kintone のフロントエンドリアーキテクチャ</h3>
<p>kintone のフロントエンドリアーキテクチャプロジェクト、通称フロリアへの支援を昨年から引き続いて行っています。メンバーはプロジェクトのチームに所属する形で支援活動をしています。</p>
<p>フロリアの詳細については次の記事を参照ください。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2021/07/20/170000" style="border: none;"></iframe></div></p>
<p>次の記事はメンバーによる活動のアウトプットです。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2022/03/18/100000" style="border: none;"></iframe></div></p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2022/04/14/110000" style="border: none;"></iframe></div></p>
<p>また、直接的な支援ではありませんが、フロリアプロジェクトでの社外アウトプット（社の技術ブログへの執筆）を支援する活動も行っています。</p>
<h3>サイボウズ製品の販売管理システムのフロントエンドリアーキテクチャ</h3>
<p>kintone をはじめとした、サイボウズの製品をお客様に購入していただくときに使われるサービスがあります。</p>
<p>販売管理システムは kintone と同じく Closure で構築された歴史のあるサービスです。このサービスに関しても、継続性の観点からフロントエンドの再構築を進めています。</p>
<h2>社内への情報共有と相談</h2>
<p>社内への Web フロントエンドの情報共有として Frontend Weekly を継続して開催しています。</p>
<p>また、チームの相談窓口に来たほかチームからの相談に対して調査や支援を行っています。</p>
<p>上期には次のような相談がありました。</p>
<ul>
<li>自社で提供している OSS ライブラリの特定フレームワークでの利用方法を説明したドキュメントのレビュー</li>
<li>Jest v28 へのアップデート方法</li>
<li>Dual Package の package を esbuild で利用する際のエラー</li>
<li>コンポーネントのスタイリング方法について教えてほしい</li>
</ul>
<h3>新人研修のコンテンツ作成と講義の実施</h3>
<p>社内向け新人研修のコンテンツとして「サイボウズの Web フロントエンドについて」というタイトルで研修資料を作成し、講義を行いました。</p>
<p>サイボウズ社内の各プロダクトの現状確認とこれから向かう先を、レガシーフロントエンドとモダンフロントエンドの差異を交えながら解説するといった内容になっています。</p>
<p>サイボウズの各プロダクトにはまだまだ課題がある状態ですので、現状を認識してもらったうえで未来に向けてどう解決していくかの足がかりにするとともに、やっていきを高められたかなと思います。</p>
<h3>社内で IE 卒業式を実施</h3>
<p>サイボウズは 2022/06/12 に IE 11 のサポートを終了しました。</p>
<p>公開イベントとして開催された<a href="https://web-study.connpass.com/event/250191/">IE 卒業式</a>の社内版として、チームを問わず社内から IE に関する LT をしてくれるメンバーを募集して LT 会を開催しました。</p>
<p>社内向けならではの IE の思い出話が聞けた有意義な会となりました。</p>
<h2>社外への発信</h2>
<h3>Frontend Monthly</h3>
<p>社外への発信として YouTube Live にて月イチで Frontend Monthly を 生配信・録画で開催しています。</p>
<ul>
<li><a href="https://cybozu.connpass.com/event/236989/">Cybozu Frontend Monthly#19 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/239952/">Cybozu Frontend Monthly#20 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/241837/">Cybozu Frontend Monthly#21 (ゲスト：株式会社ログラス) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/246037/">Cybozu Frontend Monthly#22 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/248124/">Cybozu Frontend Monthly#23 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/250296/">Cybozu Frontend Monthly#24 (ゲスト：LAPRAS 株式会社) - connpass</a></li>
</ul>
<p>ゲストとして参加して頂いた方々ありがとうございました。</p>
<h3>チームのブログ</h3>
<p>また、当ブログにてブラウザの更新情報や ECMAScript の最新動向などを発信しています。</p>
<ul>
<li><a href="https://cybozu.github.io/frontend-expert/posts/turborepo">workspace を使ったコマンドを最適化して実行する Turborepo について</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-firefox-96">CSS color-scheme サポート追加等 Firefox 96.0 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-97">Web Transport のサポートなど、Chrome 97 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/tc39-meeting-2021-12">ECMAScript の最新動向 2021 年 12 月版</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/considerations-for-monorepo">フロントエンドのモノレポ構成はスケーリングの夢を見るか</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-98">COLRv1 font のサポートなど、Chrome 98 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/tc39-meeting-2022-01">ECMAScript の最新動向 2022 年 01 月版</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/css-cascade-layers">主要ブラウザで使える！CSS Cascade Layers で新しい CSS 設計の手法を考える</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-99">CSS Cascasde Layers の追加など、Chrome 99 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-safari-15-4">Safari 15.4 リリースノートまとめ | dialog Element や lazy-loading, CSS Cascade Layers サポートなど</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-101">Chrome 101 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/tc39-meeting-2022-03">ECMAScript の最新動向 2022 年 03 月版</a></li>
</ul>
<h2>探究活動</h2>
<p>フロントエンドエキスパートチームでは支援・発信・啓蒙のほかに探究も業務の一環として行っています。</p>
<p>今年の 4 月からは新たな取り組みとして「フロントエンドお触り会」を実施しています。</p>
<p>この会はメンバーが気になっている技術をワイワイ触ってみる集まりです。不定期に誰かが思い立った日に開催されます。</p>
<p>次のようなものについてワイワイと試していました。</p>
<ul>
<li>Remix</li>
<li>Playwright を使ったコンポーネントテスト</li>
<li>Rome</li>
</ul>
<p>下期はもう少し開催頻度を上げて、いろいろなものを触りたいです。</p>
<h2>おわりに</h2>
<p>2022 年下期も引き続き支援活動、発信を続けていきたいと思います。</p>
<p>フロントエンドエキスパートチームではサイボウズのフロントエンドを最高にするメンバーを募集しています。採用サイトからの応募やカジュアル面談などお待ちしております。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.co.jp/recruit/entry/career/front-end-expert.html" style="border: none;"></iframe></div></p>


<h1>Chrome 102</h1>
<p>Chrome 102 のリリースノート関連の情報をまとめました。</p>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-102/">https://developer.chrome.com/blog/new-in-chrome-102/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-102/">https://developer.chrome.com/blog/new-in-devtools-102/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-102/">https://developer.chrome.com/blog/deps-rems-102/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D102">https://www.chromestatus.com/features#milestone%3D102</a></li>
<li><a href="https://v8.dev/blog/v8-release-102">https://v8.dev/blog/v8-release-102</a></li>
</ul>
<h2>New In Chrome (Chrome102)</h2>
<p>Chrome102 で新しく追加された機能です。</p>
<h3>File Handling API</h3>
<p>PWA に MIME タイプや拡張子を紐づけることができる File Handling API がサポートされました。</p>
<p>PWA のマニフェストに関連づけたい MIME タイプや拡張子を設定することで、Mac だと「このアプリケーションで開く」の候補に PWA のアプリケーションが選択できるようになります。</p>
<p>参考: Let installed web applications be file handlers</p>
<p><a href="https://web.dev/file-handling/">https://web.dev/file-handling/</a></p>
<h3>The inert property</h3>
<p><code>inert</code>プロパティは、グローバルな HTML 属性です。<code>inert</code>属性のついた要素は、フォーカスイベントや支援技術からのイベントなど、ユーザー入力イベントを無視します。</p>
<p><code>inert</code>属性はモーダルダイアログやドロワーなどの UI パーツを作成するのに便利です。モーダルダイアログでは、モーダルが表示されている間、フォーカスをモーダル内に限定したくなりますが、これはモーダル外の要素に<code>inert</code>属性をつけることで実現できます。また、ユーザーから常に見えるわけではないドロワーでは、開閉時に<code>inert</code>属性を切り替えることで、「画面外にあるドロワーを誤ってキーボードで操作してしまう」ような誤作動を防止できます。</p>
<p><code>inert</code>属性の利用例です。</p>
<div class="remark-highlight"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button 1<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>inertではない<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">inert</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button 2<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>inertである<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</code></pre></div>
<p>この例では二つ目の<code>div</code>に<code>inert</code>属性を付与しています。そのため内包された<code>&#x3C;label></code>要素や<code>&#x3C;button></code>要素はフォーカスやクリックできない要素になります。</p>
<p><code>inert</code>属性は Chrome では 102 からサポートされますが、FireFox や Safari でも同様にサポートされる予定です。(執筆現在、Safari は 15.5 から、FireFox は Nightly で利用可能です。)</p>
<h3>Navigation API</h3>
<p>近年の多く見られる SPA で作られたアプリでは、ページ移動なしで URL を更新します。この挙動を実現するため、一般的に<code>History API</code>が利用されますが、<code>History API</code>ではうまく用件を満たせないことや、動作がわかりにくくなることがあります。</p>
<p>このような History API の問題点をカバーするべく作られた API 仕様が Navigation API です。</p>
<h4>利用方法</h4>
<p>Navigation API を使用するには、グローバルに生えた<code>navigation</code>オブジェクトに navigate リスナーを追加します。</p>
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">navigation<span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'navigate'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">navigateEvent</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
  <span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>navigateEvent<span class="token punctuation">.</span><span class="token property-access">destination</span><span class="token punctuation">.</span><span class="token property-access">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token string">'https://example.com/'</span><span class="token operator">:</span>
      navigateEvent<span class="token punctuation">.</span><span class="token method function property-access">transitionWhile</span><span class="token punctuation">(</span><span class="token function">loadIndexPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">'https://example.com/cats'</span><span class="token operator">:</span>
      navigateEvent<span class="token punctuation">.</span><span class="token method function property-access">transitionWhile</span><span class="token punctuation">(</span><span class="token function">loadCatsPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div>
<p>ナビゲーションイベントは、<code>navigate</code>リスナーによって一元化されており、以下のような条件の有無に関わらずあらゆるタイプのナビゲーションイベントで発火します。</p>
<ul>
<li>フォームを送信したかどうか</li>
<li>戻る・進むアクションによる遷移か</li>
<li>プログラムによって引き起こされたものかどうか</li>
</ul>
<p>その上で、ほとんどの遷移に関するアクションに対して、デフォルトの動作を上書きすることができます。</p>
<p>詳細に関しては<a href="https://developer.chrome.com/docs/web-platform/navigation-api/">Modern client-side routing: the Navigation API</a>をご覧ください。</p>
<h3>And more!</h3>
<ul>
<li>ページ内検索等でヒットするまで表示されない<code>hidden=unfil-found</code>の指定ができるようになります</li>
</ul>
<h2>What's New In DevTools (Chrome 102)</h2>
<p>DevTools についてはこちらの日本語訳を参照ください。</p>
<p><a href="https://developer.chrome.com/ja/blog/new-in-devtools-102/">https://developer.chrome.com/ja/blog/new-in-devtools-102/</a></p>
<h2>Deprecations and removals in Chrome 102</h2>
<h3>Deprecate PaymentRequest.show() without User Activation</h3>
<p>ユーザーのアクティベーションなしに<code>PaymentRequest.show()</code>を実行できなくなりました。</p>
<p><code>PaymentRequest.show()</code>はクリックなどのユーザーイベント内で行う必要があります。</p>
<h3>Remove SDP Plan B</h3>
<p>WebRTC でセッションを確立するために使用される <code>Session Description Protocol</code> (SDP) は、Chromium 上で<code>Unified Plan</code>と<code>Plan B</code>という 2 種類の異なる実装が存在しています。
<code>Plan B</code>はクロスブラウザでの互換性がないなどの問題を抱えていたため、102 から削除されます。</p>
<p>このバージョンから Chrome では<code>Plan B</code>を利用すると例外が投げられるようになります。これを回避したい場合は 2022 年 5 月 25 日までに<a href="https://developer.chrome.com/origintrials/#/view_trial/3892235977954951169">非推奨のトライアル</a>に参加してください。また 12 月に終了した前回の非推奨トライアルに参加していて、今回のトライアルにも参加したい場合は、新しくトークンをリクエストする必要があることに注意してください。</p>
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<h3>Add Save Data Client Hint</h3>
<p>Permissions-Policy に<code>CH-Save-Data</code>を追加することで Client Hint として<code>Save-Data</code>が扱えるようになります。</p>
<p><code>Sec-CH-Save-Data</code>が適切な Client Hint になり、Permissions-Policy を介してサードパーティへ送信されることを防ぐことができます。</p>
<p>参考: Save-Data</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data">https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data</a></p>
<h3>AudioContext.outputLatency</h3>
<p><code>AudioContext.outputLatency</code>プロパティが追加されました。</p>
<p>このプロパティは音声出力レイテンシーの推定値(秒数)を返します。技術的には、UserAgent がホストシステムにバッファの再生を要求してから、バッファ内の最初のサンプルが実際に音声出力デバイスによって処理されるまで(スピーカーなどであれば音が出るまで)の間隔を指します。</p>
<p>このプロパティは入力から出力までのレイテンシーを調整するために必要で、ビデオとオーディオストリームの同期などに非常に有効です。</p>
<h3>Capture Handle</h3>
<p>ビデオキャプチャを行う他のアプリケーションに対して、特定の情報やコントロールを opt-in で公開できる仕組みを導入します。</p>
<p>たとえば、プレゼンテーション・アプリを開いたタブをビデオキャプチャしているアプリケーションがあったとします。この機能でプレゼンテーションアプリがキャプチャをしているアプリに対して、プレゼンテーションを操作を公開するとキャプチャをしているアプリからプレゼンテーションアプリを操作できるようになります。</p>
<p>ディスプレイキャプチャを行うアプリケーションは、キャプチャされるアプリケーションが Capture Handle 機能を提供していることを前提に、ユーザーに優れた機能性を提供できます。今までに似たような技術はありましたが、Capture Handle では、何を公開するか(オリジン・ハンドル・ID...etc)を選択可能にすることで、よりシンプルで信頼性が高く、安全な仕組みを提供します。</p>
<p>また私たちが提案するメカニズムでは、キャプチャされたアプリケーション側で、キャプチャする側のアプリケーションを制限できます。具体的には全ての web か特定の origin かを選択できます。</p>
<h3>HTTP->HTTPS redirect for HTTPS DNS records</h3>
<p>DNS に問い合わせをする際に、従来の<code>A</code>および<code>AAAA</code>クエリと並行して、<code>HTTPS</code>レコードを問い合わせるようになります。ウェブサイトが<code>HTTPS</code>DNS レコードを設定していて、Chrome がそれを受信すると、Chrome は常に HTTPS で接続します。</p>
<h3>WebHID exclusionFilters option in requestDevice()</h3>
<p>navigator.hid.requestDevice()に<code>exclusionFilters</code>が追加されました。</p>
<p><code>exclusionFilters</code>を指定することでブラウザから扱いたくない HID デバイスを除外することができるようになります。</p>
<p>参考:</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HID/requestDevice">https://developer.mozilla.org/en-US/docs/Web/API/HID/requestDevice</a></p>


Posts