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

発行日: 2026-04-08 ソース: #276: Boneyard, Ink, MUI, React Router, Next.js, shadcn, Docusaurus, Comark, Forms, Shaders | RN 0.85, ViewTransition, Skia, Windows, CRNL, Maestro, True Sheet, Nitro Player, JSIR, Security, esbuild, Ky, Intl

今週の注目ポイント

Railway が Next.js から TanStack Start に移行 — 200以上のルートを持つ Page Router アプリを2つのPRでゼロダウンタイム移行。ビルド速度やレイアウト合成の改善が報告されており、Next.js 以外の選択肢としての TanStack Start の実用性が示された。
MDN のフロントエンド刷新 — React CRA ベースの旧フロントエンドを廃止し、Lit + Custom Elements 上に独自の Server Components システムを実装。Declarative Shadow DOM によるプログレッシブエンハンスメントという興味深いアプローチ。
Axios サプライチェーン攻撃の影響範囲 — 週間1億DLを超える axios がソーシャルエンジニアリング攻撃で侵害された。直接依存していなくても推移的依存やCI上のnpxで影響を受ける可能性がある。npm セキュリティベストプラクティスの見直しが推奨されている。
Material UI 9.0 / Mantine 9.0 同時リリース — 主要UIライブラリの2つがメジャーバージョンを同時にリリース。MUIはアクセシビリティ改善とsx propパフォーマンス向上、Mantineは新コンポーネント多数追加。
JSIR — GoogleによるJavaScript中間表現のRFC — Hermes バイトコードの逆コンパイルなど静的解析に使われるIR。Google内部で既に活用されており、JavaScript ツールチェーンの将来に影響を与える可能性がある。

React

Boneyard - Auto-generated skeleton screens

URL: https://boneyard.vercel.app/
要約: ローディング状態のスケルトンスクリーンを手動で作る代わりに、実際のUIをスナップショットして各ブレークポイントでの骨格を自動キャプチャするライブラリ。React、React Native、その他のフレームワークに対応。

The Precompute Pattern: Encoding Dynamic Data into URLs in Next.js

URL: https://aurorascharff.no/posts/the-precompute-pattern-encoding-dynamic-data-into-urls-in-nextjs/
要約: Next.js のプリレンダリング能力を最大化するための高度なテクニック。フィーチャーフラグや認証ステータスなど、カーディナリティの低いバリアントに特に効果的。

Under the hood of MDN’s new frontend

URL: https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/
要約: MDN が旧 React CRA アプリを刷新し、Lit + Custom Elements 上に独自の Server Components システムを実装。Declarative Shadow DOM をプログレッシブエンハンスメントとして活用している。

Moving Railway’s Frontend Off Next.js

URL: https://blog.railway.com/p/moving-railways-frontend-off-nextjs
要約: 200以上のルートを持つ Page Router アプリを TanStack Start へ2つのPRでゼロダウンタイム移行したフィードバック。ビルド高速化、より明示的なモデル、レイアウト合成の容易さが改善点。

You really, really, really don’t need an effect! I swear!

URL: https://neciudan.dev/you-really-really-dont-need-an-effect
要約: useEffect を本当に必要とするケース（データフェッチ）でさえ、React Query のような既存ライブラリがより良い実装を提供しているという主張。

How to implement spring physics buttons with Framer Motion

URL: https://tigerabrodi.blog/how-to-implement-spring-physics-buttons-with-framer-motion
要約: Framer Motion を使ったスプリング物理演算ベースのボタン実装チュートリアル。

Ink 7.0 - React renderer for CLIs

URL: https://github.com/vadimdemedes/ink/releases/tag/v7.0.0
要約: AI やターミナルアプリの台頭でますます人気が高まっている CLI 向け React レンダラー。メジャーバージョンでは Node 22、React 19.2 へのアップグレードに加え、多数の新フック・機能・プロップが追加。

Comark - Fast, streaming-ready Markdown parser with support for React and more

URL: https://comark.dev/
要約: Nuxt チームから登場した、Streamdown や MDX の代替となるストリーミング対応の高速 Markdown パーサー。React サポートあり。

Docusaurus 3.10

URL: https://docusaurus.io/blog/releases/3.10
要約: セキュリティ改善、Docusaurus Faster の安定版化、VCS API、Strict MDX、Site Storage の安定版化など。Docusaurus v4 に向けたマイルストーンリリース。

Shaders beta - The component library for creative WebGPU effects in the browser

URL: https://shaders.com/
要約: ブラウザ上のクリエイティブな WebGPU エフェクトのためのコンポーネントライブラリ。React コンポーネントがファーストクラスで提供されており、React コンポーネントの商用利用は無料。

React Hook Form 7.72 - Built-in form-level validation

URL: https://github.com/react-hook-form/react-hook-form/releases/tag/v7.72.0
要約: フォームレベルのバリデーションが組み込みで追加。クロスフィールドバリデーションに便利な機能。

Conform 1.18 - Progressively enhance HTML forms with React

URL: https://github.com/edmundhung/conform/releases/tag/v1.18.0
要約: React で HTML フォームをプログレッシブに強化するライブラリの新バージョン。

React Router 7.14

URL: https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v7140
要約: Vite 8 サポート、不安定版 RSC Framework Mode の改善。

shadcn CLI 4.2

URL: https://ui.shadcn.com/docs/changelog/2026-04-shadcn-apply
要約: 新しい shadcn apply コマンドでプリセットの切り替えが容易に。

Material UI 9.0

URL: https://github.com/mui/material-ui/releases/tag/v9.0.0
要約: アクセシビリティ改善、sx prop のパフォーマンス向上、非推奨 API のクリーンアップ。

Mantine 9.0

URL: https://mantine.dev/changelog/9-0-0/
要約: Scheduling、FloatingWindow、OverflowList、Marquee など多数の新コンポーネントが追加。

Next-Intl 4.9

URL: https://github.com/amannn/next-intl/releases/tag/v4.9.0
要約: <Link transitionTypes> のサポートを追加。

Web Dev Simplified - You Need To Start Using This Underrated React Hook - useSyncExternalStore

URL: https://www.youtube.com/watch?v=NBjycPpPHQQ
要約: 過小評価されている useSyncExternalStore フックの活用法を解説する動画。

React Paris 2026 - YouTube Playlist

URL: https://www.youtube.com/playlist?list=PL53Z0yyYnpWhsizNWtlnyM7XWFUSw437J
要約: React Paris 2026 カンファレンスの講演動画プレイリスト。

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

JSIR - A High-Level IR for JavaScript (RFC)

URL: https://discourse.llvm.org/t/rfc-jsir-a-high-level-ir-for-javascript/90456
要約: Google が提案する JavaScript 向け高レベル中間表現（IR）。静的解析やコード分析、Hermes バイトコードの逆コンパイルなどに内部で既に使用されている。

The Hidden Blast Radius of the Axios Compromise

URL: https://socket.dev/blog/hidden-blast-radius-of-the-axios-compromise
要約: 先週 axios がソーシャルエンジニアリング攻撃で侵害された件の影響範囲分析。直接依存していなくても、推移的依存や CI の npx ワークフロー経由で影響を受ける可能性がある。

What To Know in JavaScript (2026 Edition)

URL: https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
要約: ES2025/2026 の新機能、フレームワークアップデート、ランタイムの動向、ビルドツールの状況を包括的にまとめた記事。

The Intl API: The best browser API you’re not using

URL: https://polypane.app/blog/the-intl-api-the-best-browser-api-youre-not-using/
要約: あまり活用されていない Intl API の活用法を紹介。日付・数値・リストのフォーマットなど、ブラウザ標準で多くのことが可能。

View Transitions Toolkit - Utility functions for View Transitions

URL: https://www.bram.us/2026/04/02/view-transitions-toolkit/
要約: View Transitions の高度なパターンを埋めるユーティリティ関数群。機能検出、アニメーション最適化、再生制御、自動ナビゲーションタイプなどを提供。

ESLint 10.2

URL: https://eslint.org/blog/2026/04/eslint-v10.2.0-released/
要約: 言語対応ルール、Temporal サポートが追加。

esbuild 0.28

URL: https://github.com/evanw/esbuild/releases/tag/v0.28.0
要約: Import Text proposal のサポート、整合性チェック機能が追加。

Ky 2.0 - JavaScript HTTP client based on the Fetch API

URL: https://github.com/sindresorhus/ky/releases/tag/v2.0.0
要約: Fetch API ベースの JavaScript HTTP クライアントのメジャーアップデート。