<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>


FrontendWeekly