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

発行日: 2026-05-27 ソース: TanStack, RSC, Liquid DOM, Performance, i18n, docs, Apollo, shadcn

今週の注目ポイント

• TanStack Router と Query の統合パターン解説、TanStack Virtual 3.15/3.16 リリース
• GitHub Issues のナビゲーションパフォーマンス改善事例と Linear の高速化テクニック分析
• Liquid DOM: WebGPU と HTML-in-Canvas ベースの新しい UI レンダリングアプローチ
• TC39 第114回会議で Explicit Resource Management など多数の提案が進展
• npm/pnpm でサプライチェーンセキュリティ強化（Staged Publishing、install scripts opt-in）

React

Sentry - One engineer, 44 libraries, and a Node API nobody was using

• URL: https://blog.sentry.io/fixing-javascript-observability/
• 要約: JavaScriptの監視性が上流で修正される方法を解説。

Component Architecture for React Server Components

• URL: https://aurorascharff.no/posts/component-architecture-for-react-server-components/
• 要約: データフェッチング技術のトレードオフを深掘りし、RSCで明示的なローディング体験を設計する方法を説明。

TanStack Router and Query

• URL: https://tkdodo.eu/blog/tan-stack-router-and-query
• 要約: QueryをRouteローダーと統合し、データ取得を早期に開始、粒度の細かい制御を実現する方法を解説。

Modernizing GitHub Issues navigation performance

• URL: https://github.blog/engineering/architecture-optimization/from-latency-to-instant-modernizing-github-issues-navigation-performance/
• 要約: Rails from Reactへのマイグレーション中のGitHub Issues性能改善のテクニックを解説。

How’s Linear so fast?

• URL: https://performance.dev/how-is-linear-so-fast-a-technical-breakdown
• 要約: MobX observable、IndexedDB活用など深層的なパフォーマンス技法の研究。Linearの高速性を実現する技術的アーキテクチャを分析。

One core, six frameworks, zero runtime abstraction

• URL: https://formisch.dev/blog/one-core-six-frameworks/
• 要約: フレームワークに依存しないフォームライブラリがビルド時のリアクティビティスワップで複数フレームワークに対応する手法を解説。

Skybridge V1 - MCP Apps developers

• URL: https://www.skybridge.tech/
• 要約: ChatGPT、Claude、MCPクライアント対応のReactフレームワーク。

Spiceflow

• URL: https://getspiceflow.com/
• 要約: 型安全APIを備えたシンプル志向のフルスタックReact RSCフレームワーク。

Liquid DOM - Liquid Glass for the Web

• URL: https://github.com/AndrewPrifer/liquid-dom
• 要約: WebGPUとHTML-in-Canvasベースの新しいUIレンダリングライブラリ。React、React-Three-Fiber対応。

TanStack Virtual 3.15

• URL: https://tanstack.com/blog/tanstack-virtual-perf-and-ios
• 要約: パフォーマンス向上とiOS momentum scrollの修正。

TanStack Virtual 3.16

• URL: https://tanstack.com/blog/tanstack-virtual-chat
• 要約: チャット機能対応。エンドアンカリング、追記フォロー、安定した先頭追加、ストリーミングをサポート。

shadcn CLI 4.8

• URL: https://ui.shadcn.com/docs/changelog/2026-05-registry-include
• 要約: レジストリ作成者が大規模registry.jsonを分割可能に。

Ultracite 7.8

• URL: https://github.com/haydenbleasel/ultracite/releases/tag/ultracite%407.8.0
• 要約: ESLint/Biome/Oxlint向けゼロコンフィグライタープリセット。TanStackプリセット追加。

Apollo Client 4.2

• URL: https://www.apollographql.com/blog/whats-new-in-apollo-client-4-2
• 要約: 型安全なデフォルトオプション、イベントベースのrefetching。

Lingui 6.1

• URL: https://lingui.dev/blog/2026/05/22/lingui-context-directives
• 要約: i18nコンテキスト設定ディレクティブ、複数翻訳のネームスペース化。

fbtee 2.0

• URL: https://github.com/nkzw-tech/fbtee
• 要約: JS・React向けi18nフレームワーク。facebook/fbtの現代的継承版。

Fumapress

• URL: https://press.fumadocs.dev/blog/introducing-fumapress
• 要約: Fumadocs（非依存）、Vite、React、MDX、Wakuベースのドキュメントフレームワーク。

Jack Herrington - Is TanStack Starts Deferred Hydration Revolutionary?

• URL: https://www.youtube.com/watch?v=_PB9rHndhU8
• 要約: TanStack Start の deferred hydration 機能についての YouTube 解説動画。

Tobi Mey - I Tested Next.js Dev MCP

• URL: https://www.youtube.com/watch?v=OODK3KGUjDA
• 要約: Next.js の開発用 MCP ツールのテストレビュー動画。

Wiskey.fm - React Foundation, AI Agents, and the Future of Frameworks

• URL: https://www.youtube.com/watch?v=LZa3GIpX4l4
• 要約: Seth Websterとのポッドキャスト対談。React Foundation、AIエージェント、フレームワークの未来について議論。

Señors at Scale - TanStack Query at Scale with Dominik Dorfmeister

• URL: https://www.youtube.com/watch?v=anz2xw4FY9c
• 要約: TkDodoとのスケール時のTanStack Query運用についての解説動画。

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

TC39 - 114th meeting outcome

• URL: https://bsky.app/profile/tc39.es/post/3mmhlitpxrq2a
• 要約: Explicit Resource Management、Atomics.pause、Iterator API、Intl APIなど多数のES提案が進展。

npm PR - Phase 1 of making install scripts opt-in

• URL: https://github.com/npm/cli/pull/9360
• 要約: サプライチェーンセキュリティ機能実装。package.allowScriptsなどのAPIが導入予定。

WICG proposal - Persistent Iframes

• URL: https://github.com/WICG/persistent-iframes
• 要約: ナビゲーション間でチャット・音声動画を保持し、MPA vs SPAの差を縮小する構想。

CSS vs. JavaScript animations

• URL: https://www.joshwcomeau.com/animation/css-vs-javascript/
• 要約: JS vs CSS/WAAPIアニメーションのパフォーマンスと柔軟性トレードオフを解説。

npm CLI 11.15

• URL: https://github.blog/changelog/2026-05-22-staged-publishing-and-new-install-time-controls-for-npm/
• 要約: ステージドパブリッシング機能。–allow-*フラグでサプライチェーンセキュリティ向上。

pnpm 11.3

• URL: https://pnpm.io/blog/releases/11.3
• 要約: npm ステージドパブリッシング対応、trustLockfileオプション追加。

Deno 2.8

• URL: https://deno.com/blog/v2.8
• 要約: 新コマンド、npmデフォルト化、Node.js互換性向上、import defer対応。

Node 24.16

• URL: https://nodejs.org/en/blog/release/v24.16.0
• 要約: テストランナー改善、randomUUIDv7()、AbortSignal支援API拡大。

Firefox 151

• URL: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151
• 要約: @container queries広範サポート、Document Picture-in-Picture、Web Serial API。