MSW 2.0やYarn 4.0のリリースなど : Cybozu Frontend Weekly (2023-10-24号)

はじめに

こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの@nakajmg です。

サイボウズでは毎週火曜日にFrontend Weeklyという「一週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。

今回は2023年10月24日のFrontend Weeklyで取り上げた記事や話題を紹介します。

Introduction to web sustainability | MDN Blog

https://developer.mozilla.org/en-US/blog/introduction-to-web-sustainability/

webの持続可能性についての概要。フォントの最適化や画像サイズの縮小、JavaScriptの使用量を減らすことなどが挙げられています。

ガイドラインの作成も進められています。

https://w3c.github.io/sustyweb/

How we optimized package imports in Next.js

https://vercel.com/blog/how-we-optimized-package-imports-in-next-js

パッケージの読み込み最適化と、それにまつわるコールドスタートの改善についての紹介です。importするライブラリ側の都合によって異なる最適化のアプローチを行っているそうです。

The State of WebAssembly 2023

https://blog.scottlogic.com/2023/10/18/the-state-of-webassembly-2023.html

WebAssemblyの利用状況などのサーベイです。Rustからの利用が一番多く、次いでJavaScriptからの利用が多いようです。2023年にはSwiftからの利用も増えてきています。

Server Actions are now in React Canary

https://x.com/reactjs/status/1716573234160967762?s=20

Server ActionsがReact Canaryに入り、experimentalではなくなりました。'use server'のAPI Referenceも存在が確認できます。

https://react.dev/reference/react/use-server

Next.js側でもserverActionsのexperimentalなフラグの削除が進んでおり、次期バージョンからフラグなしで使えるようになりそうです。

https://github.com/vercel/next.js/pull/57145

また、React Hook FormもServer Actionsのサポートを検討しているようです。

https://github.com/react-hook-form/react-hook-form/pull/11061

scrollbar-colorとscrollbar-widthがChrome 121で実装予定

https://chromestatus.com/feature/5665308343795712

CSSでスクロールバーの色とサイズを指定できるscrollbar-colorとscrollbar-widthがChrome 121で実装される予定です。フラグを有効にすることでChrome 118でも使えます。

Firefoxは実装済みで、Safariには今後実装される予定のようです。

https://developer.mozilla.org/ja/docs/Web/CSS/scrollbar-color

https://developer.mozilla.org/ja/docs/Web/CSS/scrollbar-width

Chrome 119でCSSで指数関数や平方根の計算を行う関数がフラグ付きで追加予定

https://chromestatus.com/feature/5118715069202432

Chrome 119にフラグ付きで次の関数が追加されます。

https://developer.mozilla.org/en-US/docs/Web/CSS/pow

https://developer.mozilla.org/en-US/docs/Web/CSS/sqrt

https://developer.mozilla.org/en-US/docs/Web/CSS/hypot

https://developer.mozilla.org/en-US/docs/Web/CSS/log

https://developer.mozilla.org/en-US/docs/Web/CSS/exp

Storybookを書くだけでリグレッションテストが実行される世界へようこそ

https://speakerdeck.com/kubotak/storybookwoshu-kudakederiguretusiyontesutoga-shi-xing-sarerushi-jie-heyoukoso

ChromaticのクロスブラウザでのVRTを自前で実装した事例の紹介です。

StorybookのstoryをPlaywrightを使ってスクリーンショットの差分を確認したり、vite-plugin-turbosnapを使ってGitの差分から関係のあるコンポーネントのstoryのみをテストしたりといったことを行えるようにしたと紹介しています。

Introducing MSW 2.0

https://mswjs.io/blog/introducing-msw-2.0

MSWの2.0がリリースされました。v１からv２へのマイグレーションガイドも用意されています。

https://mswjs.io/docs/migrations/1.x-to-2.x

マイグレーションガイドにはv1とv2の差分がBefore/Afterの形で例示されており、変更を把握するのに役立ちそうです。

CSS text-wrap: pretty

https://developer.chrome.com/blog/css-text-wrap-pretty/

CSSのtext-wrap: prettyの紹介です。prettyを指定した場合、組版などで最終行にぽつんと単語が残るような事象（orphans）を防げます。

ChromeとEdgeでは117から使えますが、FirefoxとSafariに関しては現状未実装になります。

Release: Yarn 4.0 🪄⚗️

https://yarnpkg.com/blog/release/4.0

Yarnの4.0がリリースされました。

4.0からはCorepackを使うようになっていたり、yarn.lockの改竄を防ぐような仕組みが追加されています。インターフェースも改善されており、追加したパッケージのサイズなどが表示されるようになりました。

4.0ではパフォーマンスの改善もあり、Gatsbyのインストールを例に依存関係（~３５０MiB）のインストールがv3.6よりも３倍ほど速度が向上していると紹介しています。

https://yarnpkg.com/blog/release/4.0#performances