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

発行日: 2026-07-08 ソース: Base UI, shadcn, Vinext, Next.js WS, ChatGPT, Takumi, Shaders | RN cleanup, Navigation, Agents, Sniffler, Metro, Tapflow, ADK, Voltra, WebView, Iso, Audio | TypeScript, ES2026, HTTP QUERY, Node.js

今週の注目ポイント

• TypeScript 7.0 リリース: Go による書き直しでプロダクション対応に。型チェックが最大16倍高速化し、デフォルトで strict: true になる。既存プロジェクトの移行やCIのビルド時間に大きく影響するため要チェック。
• ES2026 が正式承認: Ecma International が新標準を承認。Array.fromAsync()、Error.isError()、Map.getOrInsert() などが標準化された。
• shadcn 4.13 で Base UI がデフォルトに: shadcn CLI とドキュメントのデフォルトの headless ライブラリが Radix から Base UI へ移行。既存の Radix サポートは維持される。UIコンポーネント基盤に関わる変化。
• Next.js に WebSocket 一級サポートの RFC: App Router の Route Handlers で NextResponse.upgrade() を提案。Vercel が WebSocket 対応を追加し、セルフホスト構成でも動作する見込み。
• サプライチェーンセキュリティの強化事例: TanStack 侵害後、nuqs が npm の staged publishing（draft→validate→finalize）でリリースパイプラインを堅牢化。依存パッケージ運用の参考になる。

React

Formity

• URL: https://formity.app/
• 要約: マルチステップフォームをプログラム可能なフローとして構築するライブラリ。分岐・ループ・ジャンプ・変数をサポートする。

Next.js RFC - First-class WebSocket support in App Router Route Handlers

• URL: https://github.com/vercel/next.js/discussions/95514
• 要約: Route Handlers での WebSocket サポートとして NextResponse.upgrade() を提案する RFC。CrossWS ベースで、Vercel が WebSocket 対応を追加。セルフホスト構成でも動作する見込み。

Reverse Engineering ChatGPT Web: How OpenAI Built for a Billion Users

• URL: https://performance.dev/chatgpt
• 要約: ChatGPT のスタックを独立分析した記事。Tailwind v4・Radix・TanStack Query を利用し、Next.js から React Router v7 へ移行。チャット入力のインタラクティビティ最適化の話も含む。

I let React Compiler handle memoization: Here’s what actually broke

• URL: https://blog.logrocket.com/react-compiler-memoization-what-actually-broke/
• 要約: React Compiler が React Hook Form の watch() や Chart.js の stale なハンドラでアプリを壊した事例。DevTools の memo バッジは最適化品質を正確に示さないことがある。

Hidden Cost of Hydration Mismatches

• URL: https://3perf.com/blog/hydration-mismatch/
• 要約: 1つの hydration mismatch で LCP が緑から赤へ悪化しうる。Suspense を使うことで mismatch の被害範囲を限定できる。

Using TanStack Start with Cloudflare Workers

• URL: https://master.dev/blog/cloudflare-workers-and-hyperdrive-with-tanstack-start/
• 要約: TanStack Start を Cloudflare Workers 上でホストする実践的な2部構成の入門。Hyperdrive によるDB接続プーリングも扱う。

Vinext 1.0 Beta - Next.js on Vite

• URL: https://github.com/cloudflare/vinext/releases/tag/vinext%401.0.0-beta.0
• 要約: Cloudflare による Next.js フォークがほぼプロダクション対応に。ビルド高速化、バンドル縮小、互換性向上、クロスプラットフォーム対応の改善を含む。

shadcn 4.13 - Base UI as the Default

• URL: https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default
• 要約: shadcn CLI とドキュメントのデフォルト headless ライブラリが Base UI に。Radix を置き換えつつ、既存の Radix サポートは維持される。

Takumi 2.0 - Renders JSX/HTML to images without browser

• URL: https://github.com/kane50613/takumi/releases/tag/takumi%402.0.0
• 要約: 単一の Rust バイナリで JSX ベースのソーシャルカード画像を生成するメジャーリリース。Satori や next/og の対抗馬。

Paper Shaders - Zero-dependency canvas shaders

• URL: https://shaders.paper.design/
• 要約: React とバニラ JS 向けの依存ゼロの canvas シェーダー。無料かつ完全オープンソースになった。

Unlayer Elements - React components for Emails, Web pages, and PDFs

• URL: https://github.com/unlayer/elements
• 要約: 同一のコンポーネントツリーからメール・Webページ・PDFの3プラットフォームを対象にできる React コンポーネント。

React Hook Form 7.81

• URL: https://github.com/react-hook-form/react-hook-form/releases#release-v7.81.0
• 要約: 新しい <FieldArray> コンポーネントとパフォーマンス改善を追加。

React Google Maps 1.9

• URL: https://github.com/visgl/react-google-maps/releases/tag/v1.9.0
• 要約: AdvancedMarker でのキーボードイベント対応と3Dマップのサンプルサポートを追加。

React Doctor 0.7

• URL: https://github.com/millionco/react-doctor/releases/tag/react-doctor%400.7.0
• 要約: キャッシュとウォーム再スキャンのパフォーマンス改善。

This Month in React 2026-06

• URL: https://www.reactiflux.com/transcripts/tmir-2026-06
• 要約: React Compiler の改善と、AI がエンジニアリング文化に与える影響についての議論。

Señors At Scale - URL State at Scale with François Best

• URL: https://www.youtube.com/watch?v=b3AYuuRdyf4
• 要約: nuqs ライブラリと React・TypeScript を使った URL 状態管理についての議論。

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

Ecma International approved ES2026

• URL: https://ecma-international.org/news/ecma-international-approves-new-standards-14/
• 要約: ES2026 が正式承認。Array.fromAsync()、Error.isError()、Map.getOrInsert() などが含まれる。

The HTTP QUERY Method is now an IETF Proposed Standard

• URL: https://www.rfc-editor.org/info/rfc10008/
• 要約: HTTP に公式の QUERY メソッドが追加。GET に似ているがボディ/ペイロードを許可する。

Staged publishing for supply-chain security

• URL: https://nuqs.dev/blog/staged-publishing-for-supply-chain-security
• 要約: TanStack 侵害を受け、nuqs が npm の staged publishing（draft→validate→finalize のワークフロー）でリリースパイプラインを堅牢化した事例。

Getting Started with CSS Anchor Positioning

• URL: https://www.joshwcomeau.com/css/anchor-positioning/
• 要約: 純粋な CSS で浮遊要素を別の要素の近くに配置する手法。オーバーフロー時のフリップも扱う。ブラウザ対応は81%。

TypeScript 7.0 - 10x faster native port

• URL: https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/
• 要約: プロダクション対応の Go 版が、並列化で最大16倍の型チェック高速化を達成。デフォルトで strict: true になる。

Node 26.5 - Import Text and streaming features

• URL: https://nodejs.org/en/blog/release/v26.5.0
• 要約: 実験的な Import Text サポート、blob.textStream、ReadableStreamTee を追加（Import Text はフラグ付き）。

Vite+ Beta - Unified tooling

• URL: https://voidzero.dev/posts/announcing-vite-plus-beta
• 要約: ランタイム・パッケージマネージャ・フロントエンドツールを統合する Vite+。安定しているが機能面は未完成。

ESLint Plugin TailwindCSS 4.0

• URL: https://github.com/francoismassart/eslint-plugin-tailwindcss/releases/tag/v4.0.3
• 要約: Tailwind v4 に対応。

Webpack Dev Server 6.0

• URL: https://github.com/webpack/webpack-dev-server/releases/tag/v6.0.0
• 要約: Express v5、Node.js 22.15+、ESM 専用（破壊的変更）。

pnpm 11.10

• URL: https://pnpm.io/blog/releases/11.10
• 要約: CI 向けの _auth 設定を追加。pnpm self-update が v12 の Rust 版へのアップグレードをサポート。