O hirunewani blog

Frontend Weekly 2023-10-27

Created at

Next.js 14、Safari 17.1、Node.js 21、Yarn 4.0、Storybook 7.5、JavaScriptビルドツールの整理、Tanstack Query v5、MSW 2.0について紹介する。

Next.js 14

Next.js 14リリース。Sever Actionsが安定版に。他、Turbopackが9割のテストケースに合格、パフォーマンスの大きな改善。React Suspenseを利用した部分的な事前レンダリングが開発中。App Router、認証、データベースなどを扱った無料コースNext.js Learnが公開など。

https://nextjs.org/blog/next-14

Safari 17.1

Safari 17.1リリース。Managed Media Source API (MMS)のサポートがiPhoneにも入りました。

https://webkit.org/blog/14735/webkit-features-in-safari-17-1/

長年に渡りiPhone以外ではサポートされていたMedia Source Extensions API(MSE)については低レベルなツールキットであることや電力効率を気にしてサポートせず、ブラウザ側に一部を任せたMMS APIを生やしたようです。W3Cにプロポーザルが投げられています。

Node.js 21

https://nodejs.org/en/blog/announcements/v21-release-announce

Node.js 21リリース。奇数バージョンなので開発版です。Fetch/WebStreams APIが安定版に、node --test でglobがサポート。デフォルトの解釈をCJSからESMに変更する--experimental-default-type=moduleフラグが追加。

Yarn 4.0

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

Yarn 4.0リリース。Node.js v18以上が必須に。yarn set versionなどで指定されたバージョンがpackage.jsonに記録されるように。公式プラグインがデフォルトで含まれるように。2系3系利用している場合は4系に移行するとパフォーマンスの改善が見込まれます。

Storybook 7.5

https://storybook.js.org/blog/storybook-7-5/

Storybook 7.5リリース。 Vite 5とLit 3のサポート、storiesOfの非推奨化。

JavaScriptビルドツールの整理 各ツールの機能と依存関係

https://zenn.dev/nakaakist/articles/86457bf2908379

フロントエンドのビルドツールの比較、おおまかな比較表も掲載されている。

Tanstack Query v5

https://tanstack.com/blog/announcing-tanstack-query-v5

TanStack Query v5リリース。 APIの引数の形式変更など破壊的な変更がそこそこあるため、マグレーションガイドを読んだ方が良いです。codemodも用意されています。Suspenseと合わせてuseQueryを利用した際に意図せずデータの型がundefinedになってしまう問題がありましたがuseSuspenseQuery()useSuspenseInfiniteQuery()useSuspenseQueries() を利用するように変更され解決しました。

MSW 2.0

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

MSW 2.0リリース。バージョンを上げる場合は、APIの変更がそこそこあるのでマイグレーションガイドを読んだ方がいいです。

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