はじめに
こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの@nakajmg です。
サイボウズでは毎週火曜日にFrontend Weeklyという「一週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。
今回は2023年10月24日のFrontend Weeklyで取り上げた記事や話題を紹介します。
Introduction to web sustainability | MDN Blog
webの持続可能性についての概要。フォントの最適化や画像サイズの縮小、JavaScriptの使用量を減らすことなどが挙げられています。
ガイドラインの作成も進められています。
How we optimized package imports in Next.js
パッケージの読み込み最適化と、それにまつわるコールドスタートの改善についての紹介です。importするライブラリ側の都合によって異なる最適化のアプローチを行っているそうです。
The State of WebAssembly 2023
WebAssemblyの利用状況などのサーベイです。Rustからの利用が一番多く、次いでJavaScriptからの利用が多いようです。2023年にはSwiftからの利用も増えてきています。
Server Actions are now in React Canary
Server ActionsがReact Canaryに入り、experimentalではなくなりました。'use server'のAPI Referenceも存在が確認できます。
Next.js側でもserverActionsのexperimentalなフラグの削除が進んでおり、次期バージョンからフラグなしで使えるようになりそうです。
また、React Hook FormもServer Actionsのサポートを検討しているようです。
scrollbar-colorとscrollbar-widthがChrome 121で実装予定
CSSでスクロールバーの色とサイズを指定できるscrollbar-colorとscrollbar-widthがChrome 121で実装される予定です。フラグを有効にすることでChrome 118でも使えます。
Firefoxは実装済みで、Safariには今後実装される予定のようです。
Chrome 119でCSSで指数関数や平方根の計算を行う関数がフラグ付きで追加予定
Chrome 119にフラグ付きで次の関数が追加されます。
Storybookを書くだけでリグレッションテストが実行される世界へようこそ
ChromaticのクロスブラウザでのVRTを自前で実装した事例の紹介です。
StorybookのstoryをPlaywrightを使ってスクリーンショットの差分を確認したり、vite-plugin-turbosnapを使ってGitの差分から関係のあるコンポーネントのstoryのみをテストしたりといったことを行えるようにしたと紹介しています。
Introducing MSW 2.0
MSWの2.0がリリースされました。v１からv２へのマイグレーションガイドも用意されています。
マイグレーションガイドにはv1とv2の差分がBefore/Afterの形で例示されており、変更を把握するのに役立ちそうです。
CSS text-wrap: pretty
CSSのtext-wrap: prettyの紹介です。prettyを指定した場合、組版などで最終行にぽつんと単語が残るような事象（orphans）を防げます。
ChromeとEdgeでは117から使えますが、FirefoxとSafariに関しては現状未実装になります。
Release: Yarn 4.0 🪄⚗️
Yarnの4.0がリリースされました。
4.0からはCorepackを使うようになっていたり、yarn.lockの改竄を防ぐような仕組みが追加されています。インターフェースも改善されており、追加したパッケージのサイズなどが表示されるようになりました。
4.0ではパフォーマンスの改善もあり、Gatsbyのインストールを例に依存関係（~３５０MiB）のインストールがv3.6よりも３倍ほど速度が向上していると紹介しています。
Discussion