はじめに
こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの@nakajmg です。
サイボウズでは毎週火曜日にFrontend Weeklyという「一週間の間にあったフロントエンドのニュースを共有する会」を社内で開催しています。
今回は2023年12月19日のFrontend Weeklyで取り上げた記事や話題を紹介します。
Storybook for React Server Components
StorybookでReact Server Components（RSC）のサポートがexperimentalな機能として追加されました。
Storybook 8で@storybook/nextjsを使っている場合には.storybook/main.jsで次のようにexperimentalNextRSCを有効にすることで描画できるようになります。
export default {
features: {
experimentalNextRSC: true,
}
};
@storybook/nextjsの7系を使っている場合にはDecoratorsを使うとできるようです。
この機能はRSCをクライアントサイドで描画するものなので、サーバで描画した結果とは同一ではないことに注意が必要です。exprimentalな機能なので、変更が入ることも予想されるので、プロダクトでの利用は慎重に判断したほうがよさそうです。
V8 is Faster and Safer than Ever!
2023年に行ったV8の改善内容などの紹介記事です。
パフォーマンスの最適化、パーサーの改善、JavaScriptやWASMへの新機能の追加などなど、V8に多くの改善が入ったことで速度とセキュリティが向上したとのことです。
React Forget がもうすぐ来るかも？
Reactコンポーネントのメモ化を自動化するReact Forgetがそろそろ来るのではないかと噂されています。
React DevTools v5.0には新たにForgetというバッジが表示されるようになっており、Web版Instagramではすでにこのバッジが表示される（React Forgetが有効になっている）ようです。
主要ブラウザでサポートされつつある WasmGC とは何なのか
主要ブラウザでサポートがそろいつつあるWasmGCについての紹介記事です。
WasmGCが有効になると、ファイルサイズの肥大化を抑えられたり、効率的なプロファイリングなどが行えるようになることが期待できます。
CSS ラップ: 2023 年
2023年のCSSに関するまとめ記事がChromeから出ました。2023年は多くの新機能だけでなく、Interop2023の取り組みによってブラウザごとの挙動の統一が進んだ年になりました。
Announcing SvelteKit 2
SvelteKit 2がリリースされました。
Vite 5への対応と、新たな機能としてShallow routingが追加されました。
v2へのマイグレーションガイドも同時に公開されています。
Deno 1.39: The Return of WebGPU
Deno 1.39がリリースされました。
このリリースで過去にパフォーマンスの問題から削除されたWebGPUが問題を解消して再度追加されました。ほかにも、Node.jsとの互換性の大幅な向上や、TypeScript 5.3への対応などが含まれています。
Oxlint General Availability
OxcのLinterであるoxlintが使えるようになりました。oxlintはデフォルトでは設定を必要とせず、次のコマンドでLintが実行できます。
$ npx oxlint@latest
記事中ではESLintとの実行速度の比較について触れており、ESLintと比較して50〜100倍の速度であると紹介しています。
oxlintとしては現段階でESLintを完全に置き換えることは意図しておらず、ESLintの速度がワークフローのボトルネックになったときに有用であるとしています。
【月間9000万PVのPR TIMES】プレスリリース掲載ページの Next.js 移行でやったこと
PR TIMESがPHP・Smarty・jQueryというスタックからNext.jsへ移行した際の詳細などを紹介している記事です。
一休レストランで Next.js App Router から Remix に乗り換えた話
一休レストランのサイトのフロントエンドをNext.jsからRemixに移行した際の背景や経緯について紹介している記事です。
1年かけてNext.jsのapp routerへ完全移行した話
Next.jsでPages RouterからApp Routerに移行した事例の紹介記事です。
A definition update for Baseline
Webプラットフォームの機能が安全に使えるかどうかの情報を提供するBaselineの定義が更新されました。今回の更新でBaselineが次の2つの段階にわけられます。
- Newly available
- Widely available
「Newly available」は主要なブラウザで相互運用可能になった時、「Widely available」は対象の機能が相互運用可能になってから30ヶ月が経過した時に設定されます。
また、今回の更新ではモバイルのSafari・Firefox・Chromeについても明示的に主要ブラウザに含まれるようになりました。この変更によって、デスクトップブラウザでだけ使えるようになった機能は、相互運用可能な機能に分類されないことになります。
Discussion