JSer.info #718 - React v19がリリースされました。
+ + + +2年半ぶりのメジャーリリースとなります。
+非同期遷移を扱うアクションの概念の追加とuseActionState
/useFormStatus
/useOptimistic
/use
APIの追加が行わなわれています。
+また、react-domにprerender APIの追加、Server ComponentとServer Actionの追加が行われています。
そのほかの改善として、ref
をpropsとして渡す際にforwardRef
は不要に、Hydration Errorの改善、ref
callbackがcleanup関数を返せるようになりました。
+<title>
/<meta>
/<link>
などのメタタグをサポート、<link rel=stylesheet>
や<script async={true} src=...>
のサポートも追加されています。
+また、リソースのpreload APIのサポート、Custom Elementをサポートなども行われています。
Next.jsは15.1でReact v19のStableをサポートしています。
+ + + ++ +
Astro 5.0がリリースされました。
+ + + +Content Layerの改善、Server Islands/astro:envをStableに、Vite 6へアップデートなどが行われています。
+ ++ +
HTTP Archiveのデータを元にしたウェブのステータスをまとめたレポートであるThe 2024 Web Almanacがリリースされました。
+ + + +HTML/CSS/JavaScript/Performance/Accessibility/SEO/Securityなど幅広い項目にわたって調査されたレポートがまとめられています。
+ ++ +
JSer.infoをサポートするには
+ +-
+
- 😘 知り合いにJSer.infoをおすすめする +
- ❤️ GitHub Sponsorsで@azuのスポンサーになる +
- 🐦 X(Twitter)で@jser_infoをフォローする +
JSer.info Sponsors
+ ++ + JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 + +
+ + + ++ +
ヘッドライン
+ ++ +
React v19 – React
+ +react.dev/blog/2024/12/05/react-19
+
React 19リリース。
+非同期遷移を扱うアクションの概念の追加とuseActionState
/useFormStatus
/useOptimistic
/use
APIの追加。
+react-domにprerender APIの追加、Server ComponentとServer Actionの追加。
+ref
をpropsとして渡す際にforwardRef
は不要に、Hydration Errorの改善、ref
callbackがcleanup関数を返せるように。
+<title>
/<meta>
/<link>
などのメタタグをサポート、<link rel=stylesheet>
や<script async={true} src=...>
をサポート。
+リソースのpreload APIのサポート、Custom Elementをサポートなど
+ +
ECMAScript proposal updates @ 2024-12 | ECMAScript Daily
+ +ecmascript-daily.github.io/ecmascript/2024/12/08/ecmascript-proposal-update
+
2024年12月のTC39ミーティングでのECMAScript Proposalのステータス変更のまとめ。
+Sync Importsの追加、Error.isError
がStage 3に、Intl.DurationFormat
がStage 4となるなど
+ +
Astro 5.0 | Astro
+ + + +Astro 5.0リリース。
+Content Layerの改善、Server Islands/astro:envをStableに、Vite 6へアップデートなど
+ +
Next.js 15.1 | Next.js
+ + + +Next.js 15.1リリース。
+React 19 Stableに対応、Source Mapsの改善、エラースタックトレースの改善。
+実験的な機能としてforbidden()
とunauthorized()
を追加、<link>
と<style>
のインライン化の対応。
+ +
アーティクル
+ ++ +
改めて学ぶ satisfies 演算子
+ +zenn.dev/okkun/articles/ed6f146e03c60a
+
TypeScriptのsatisfies
演算子の使い方について
+ +
ニコニコ生放送のアプリケーションにRspackを導入している話
+ +zenn.dev/thiry/articles/0f671d086b2fb0
+
webpackからrspackへの移行について。
+css modules周りのいくつかの動作の問題があるが、ほとんどの部分でwebpackと互換性がある状態でbundleのパフォーマンスが改善できたという話
+ +
Introducing Nuxt Icon v1 · Nuxt Blog
+ +nuxt.com/blog/nuxt-icon-v1-0
+
Nuxt Icon v1.0リリース。
+アイコンロードの方法の比較とNuxt Iconでの実装について。
+imgタグ/Webフォント/インラインSVG/動的なAPI/コンポーネント/CSSアイコンのアプローチの比較。
+Nuxt Iconで時はCSSモードとSVGモードを両方サポートし、アイコンごとに切り替えられる。
+ +
What's new in DevTools, Chrome 132 | Blog | Chrome for Developers
+ +developer.chrome.com/blog/new-in-devtools-132?hl=en
+
Chrome 132でのChrome DevToolsの変更点について。
+AI assistanceの改善、パフォーマンスタブのNetworkパネルにそのリソースがレンダリングブロックしてるかを表示、scheduler.postTask
の可視化など
+ +
How To Improve INP: Yield Patterns | Jacob 'Kurt' Groß
+ +kurtextrem.de/posts/improve-inp
+
ReactアプリケーションでInteraction-to-Next-Paint(INP)を改善するアプローチについての連載記事
+ ++ +
State of JavaScript 2024
+ +survey.devographics.com/survey/state-of-js/2024
+
JavaScriptについての開発者アンケートであるState of JavaScript 2024の募集が開始された
+ ++ +
A leap in the evolution of Airtable’s codebase: Scaling TypeScript to thousands of projects | by Michael Mitchell | The Airtable Engineering Blog | Dec, 2024 | Medium
+ + + +Bazelを使ったTypeScriptの並列ビルドを最適化する話。
+TypeScriptのプロジェクト同士が循環参照していたのをCopilotを使ってインターフェースの分離、Isolated Declarationsを使った並列ビルドができるような明示的な型付けなど
+ +
サイト、サービス、ドキュメント
+ ++ +
CSS Wrapped 2024
+ +chrome.dev/css-wrapped-2024/
+
2024年にChromeへ追加されたCSSの機能を体験できるサイト。
+ ++ +
onlook-dev/onlook: The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
+ +github.com/onlook-dev/onlook
+
FigmaライクなUIでReactアプリケーションを編集できるエディタアプリ
+ ++ +
The 2024 Web Almanac
+ +almanac.httparchive.org/en/2024/
+
Web Almanacの2024年版が公開された。
+HTTP Archiveのデータを元にしたウェブのステータスをまとめたレポート。
+ +