This Week in React #299 キャッチアップ

発行日: 2026-09-30 ソース: Panda, Vinext, Next.js, Preact, Design Systems, RTK | … | TC39, Composites, WebSkills, MSW, upm, pnpm

今週の注目ポイント

• Panda CSS 2.0: Oxc 上の Rust コンパイラへ書き直したメジャーバージョン。スタイリング API は維持しつつエンジンを刷新し、ゼロランタイム CSS、タイポグラフィプリセット、デザインシステムの publish、ESLint プラグイン対応を追加。既存ユーザーは移行の影響を要確認。
• Vinext 1.0: Cloudflare による Vite ベースの Next.js 再実装が安定版に。「99%+ の互換性」を謳い、App Router / Pages Router の両方をサポート。Next.js を Vite で動かす選択肢として注目。
• Preact 11.0: 6 年以上ぶりのメジャーバージョン。ESM-only、TS 5.1+、ストリーミング SSR 対応の Hydration 2.0、props としての refs、Object.is ベースの hook 依存比較、React 互換の改善などを含む破壊的変更。
• Next.js セキュリティリリース（16.3.8 / 15.5.27）: 「critical 1 件・high 2 件・medium 5 件」の脆弱性に対応。該当バージョンを使うアプリは早急なアップデートが必要。
• TC39 ミーティング（Composites ほか）: Records & Tuples の後継となる Composites（値で比較されるオブジェクト、interning を利用）や Iterator メソッド、export defer などが進捗。ES の進化を追ううえで重要な回。

React

Panda CSS 2.0 - Same styling API, a new engine underneath

• URL: https://panda-css.com/blog/panda-css-v2
• 要約: Oxc 上の Rust コンパイラへ書き直したメジャーバージョン。スタイリング API はそのままに、ゼロランタイム CSS、タイポグラフィプリセット、デザインシステムの publish、ESLint プラグイン対応を追加した。

Vinext 1.0 - Next.js applications, powered by Vite

• URL: https://blog.cloudflare.com/vinext-nextjs-on-vite/
• 要約: Cloudflare による Vite ベースの Next.js 再実装が安定版に到達。「99%+ の互換性」を謳い、App Router / Pages Router の両方をサポートする。

PostHog - I wrote a 70x faster SQL parser while barely looking at the code

• URL: https://go.posthog.com/twir-sept30
• 要約: スポンサー枠。コードをほとんど見ずに 70 倍高速な SQL パーサーを書いたというパフォーマンス最適化の話。

Next.js September Security - 16.3.8 and 15.5.27

• URL: https://nextjs.org/blog/september-2026-security-release
• 要約: 「critical 1 件・high 2 件・medium 5 件」の脆弱性をカバーする新しいセキュリティリリース。該当バージョンのアプリは要アップデート。

React Summit US

• URL: https://reactsummit.us/?utm_source=thisweekinreact
• 要約: 🇺🇸 ニューヨークで 11/17・11/20 開催のカンファレンス。React Query の作者や React Foundation の Executive Director が登壇する。

GitHub - Improving site performance by shipping more CSS

• URL: https://github.blog/engineering/architecture-optimization/improving-site-performance-by-shipping-more-css/
• 要約: パフォーマンス向上のため styled-components から CSS Modules へ数年がかりで移行した事例の紹介。

Rebuilding React Router’s Global Hooks in Next.js

• URL: https://aurorascharff.no/posts/rebuilding-react-routers-global-hooks-in-nextjs/
• 要約: フレームワーク間の状態管理の違いを掘り下げ、Next.js に不足する React Router 風のグローバルフックを再現する技術解説記事。

Props Are Not a Design System

• URL: https://vitonsky.net/blog/2026/09/18/design-system/
• 要約: 「style props や Tailwind の class の羅列は結局インラインスタイルにすぎない」とし、代わりに名前付きの variant を使うべきだと論じる。

How we made claude.ai 3x faster in two weeks

• URL: https://claude.dev/blog/how-we-made-claude-ai-faster/
• 要約: AI エージェントを活用した実際のパフォーマンス最適化事例。React 初期化前に静的な composer を事前レンダリングする手法などを含む。

AI, Open Source, and the Long Road to TanStack Charts

• URL: https://tannerlinsley.com/posts/ai-open-source-and-the-long-road-to-tanstack-charts
• 要約: 過去の経験を活かし、AI の支援で 1 週間未満でチャートライブラリを作り上げた経緯を振り返る記事。

How to Sync a Design System with Claude Design

• URL: https://nitayneeman.com/blog/how-to-sync-a-design-system-with-claude-design/
• 要約: デザインシステムを同期させるワークフローのガイド。

Preact 11.0 - ESM-only, TS 5.1+, Hydration 2.0 with streaming SSR, refs as props, Object.is hook deps, React compat improvements

• URL: https://preactjs.com/blog/preact-11/
• 要約: 6 年以上ぶりのメジャーバージョン。近代化とストリーミング SSR 対応のために必要な破壊的変更を含む。ESM-only、TS 5.1+、Hydration 2.0、props としての refs、React 互換の改善など。

React Resizable Panels 4.14 - Grid layout components

• URL: https://react-resizable-panels.vercel.app/examples/grid-basics
• 要約: グリッドレイアウト機能を追加したアップデート。

Redux Toolkit 2.13 - TypeScript 7 support, long list of bug fixes, new unified docs site

• URL: https://github.com/reduxjs/redux-toolkit/releases/tag/v2.13.0
• 要約: TypeScript 7 対応、多数のバグ修正、統合された新ドキュメントサイトを含むリリース。

Oxlint 1.86 - only-export-components now supports compound component, 2 React Compiler fixes

• URL: https://github.com/oxc-project/oxc/releases/tag/oxlint_v1.86.0
• 要約: only-export-components が compound component をサポートし、React Compiler 関連の修正 2 件を含む Linter の強化。

James Quick - Vinext 1.0 - A New Alternative to Next.js

• URL: https://www.youtube.com/watch?v=eFFH_4aD6Ig
• 要約: Vinext を Next.js の新たな代替として紹介する動画。

その他（JS / CSS / Web全般）

TC39 meeting live updates - Progress for Composites, Iterator methods, export defer, and more

• URL: https://x.com/search?q=from%3Arobpalmer2%20ECMAScript%20excitement&src=typed_query&f=live
• 要約: 「Composites は identity ではなく値で比較されるオブジェクト」で interning を利用し、Records & Tuples プロポーザルの後継にあたる。Iterator メソッドや export defer も進捗。

WebSkills

• URL: https://github.com/kevinmoch/web-skill
• 要約: ブラウザに保存されたエージェント用スキルの W3C インキュベーションプロジェクト。「Web Worker のサンドボックス内でスクリプトを実行する」。

Optimizing objects with null prototypes

• URL: https://adventures.nodeland.dev/archive/optimizing-objects-with-null-prototypes/
• 要約: ホットパスにおける null プロトタイプのオブジェクトがボトルネックになり得ることを示す V8 パフォーマンス分析。

CSS linked parameters - One SVG, nine posters

• URL: https://pepelsbey.dev/articles/svg-link-params/
• 要約: SVG 画像をページ側から直接スタイリングできるようにする、プログレッシブエンハンスメントとしての今後の CSS 機能。

Electron to PWA: There and Back Again

• URL: https://kettanaito.com/blog/electron-to-pwa-and-back-again
• 要約: PWA が依然として「デスクトップアプリに求められる基本的な期待」を満たせないことを示す分析。

Vite+ 1.0 - A single vp command to manage your Node.js runtime, package manager, and frontend toolchain

• URL: https://voidzero.dev/posts/announcing-vite-plus-1-0
• 要約: Node.js ランタイム・パッケージマネージャ・フロントエンドツールチェーンを単一の vp コマンドで管理する。

upm - A fast, tiny package manager for the npm registry

• URL: https://upm.sh/
• 要約: 「TypeScript で書かれているが Rust 製の代替と同等に高速」な npm レジストリ向けパッケージマネージャ。

Mock Service Worker 3.0 - Smaller, ESM-only, granular entrypoints, GraphQL subscriptions, Network API, socket-level Node.js interception

• URL: https://mswjs.io/blog/introducing-msw-3.0
• 要約: 新しい React Native 統合パッケージやネットワークレベルのインターセプト改善を含むメジャーバージョン。より軽量・ESM-only・粒度の細かい entrypoint・GraphQL subscriptions などに対応。

pnpm 12.7 - node shim follows .nvmrc, install --allow-build flag, wait for published packages to become available

• URL: https://pnpm.io/blog/releases/12.7
• 要約: node shim が .nvmrc に従うようになり、install の --allow-build フラグや、公開されたパッケージが利用可能になるまで待つ機能を追加したアップデート。