🏄
Matsuri-tech Frontend Weekly 2023-10-27

hrdtbs

hrdtbs

2023年10月27日
MFWNext.jsTanStack QueryMSW

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Next.js 14

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

Next.js 14Next.js 14 includes included performance, stability for Server Actions, a new course teaching the App Router, and more.Next.js 14

# Safari 17.1

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

WebKit Features in Safari 17.1Today we are pleased to share what new in WebKit for Safari 17.1.WebKit Features in Safari 17.1

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

# Node.js 21

Node.js 21 is now available! | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.Node.js 21 is now available! | Node.js

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

# Yarn 4.0

Release: Yarn 4.0 🪄⚗️ | YarnToday is the day! After more than a year of work, our team is excited to finally put a fancy "stable" sticker on the first release from the 4.x release line! To celebrate, let's make together a tour of the major changes; should you look for a more itemized list, take a look at the changelog.Release: Yarn 4.0 🪄⚗️ | Yarn

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

# Storybook 7.5

Storybook 7.5Next.js improvements, enhanced Angular support, and 2.2x faster startup for React TypeScript projectsStorybook 7.5

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

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

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

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

# Tanstack Query v5

Announcing TanStack Query v5 | TanStack Blog About one year ago, we announced the TanStack Query v5 roadmap, and the whole team has been working hard on that version ever since. So we're super happy to announce that today is the day: After 91 alpha releases, 35 betas and 16 release candidates, TanStack Query v5.0.0 is finally here! 🎉 v5 continues the journey of v4, trying to make TanStack Query smaller (v5 is ~20% smaller than v4), better and more intuitive to use. One of the main focus points for this release was around streamlining and simplifying the APIs we offer:

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

# MSW 2.0

Introducing MSW 2.0The biggest library release is finally here! Learn more about the changes, motivation behind them, and how to upgrade to the next version today.Introducing MSW 2.0

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

1.x → 2.xMigration guidelines for version 2.0.1.x → 2.x