Reactで作った会社サイトや会員ページに、一覧から詳細へ移るときの動きを付けたい。これまでは、ブラウザの document.startViewTransition を自前で呼ぶか、アニメーション用のライブラリを入れるしかありませんでした。2026年9月9日に公開されたReact 19.3で、この役割を担う <ViewTransition> コンポーネントが正式版になっています。
2026年10月5日に、Reactの公式ブログ（react.devの「React 19.3」の記事）と <ViewTransition> のリファレンス、facebook/reactのCHANGELOG.md、npmの公開記録を直接開いて確認しました。あわせて、編集部の検証環境で react@19.3.0 を入れ、Chromiumで呼び出しの有無を確かめています。本記事は資料調査と小規模な実機検証、編集部の提案です。
React 19.3で正式版になったもの
公式ブログは、昨年実験的なAPIとして紹介した「View Transitions」と「Fragment Refs」が、19.3で正式版（stable）になったと書いています。主な変更は次のとおりです。
| 機能 | 何ができるか | 使う場面の例 |
|---|---|---|
<ViewTransition> と addTransitionType | 要素の出現・消滅・移動・大きさの変化をアニメーションにする | 一覧→詳細、タブ切り替え、カルーセル |
| Fragment Refs | ラッパーの div を足さずに、複数の子要素へイベントやフォーカスを扱う | 外部ライブラリの部品を包む |
react-dom の browser() | ブラウザでしか描けない部分を、サーバー側の描画から外す | タイムゾーンや localStorage を読む部分 |
| Trusted Types への対応 | CSPで require-trusted-types-for 'script' を強制したサイトで、型付きの値を文字列に戻さず渡す | XSS対策を強めたサイト |
このほか、サーバーコンポーネントから <Context> を直接描画できるようになり、遅いTransitionが無関係な別のTransitionを待たせないよう、それぞれ独立して描画されるようになりました。
ViewTransitionが動くのは「Transitionとして扱われた更新」だけ
公式ブログは、<ViewTransition> でアニメーションが起きる更新を次の3つに限っています。
startTransitionの中で行った状態の更新<Suspense>の中身が表示に切り替わるときuseDeferredValueによる更新
それ以外の更新は「急ぎの更新」として、アニメーションなしで即座に反映されます。アニメーションの種類は、要素が加わる（enter）、消える（exit）、中身や見た目が変わる（update）、名前を付けた要素が別の場所へ移る（share）の4つです。
import { ViewTransition, startTransition, addTransitionType } from 'react';
function openDetail() {
startTransition(() => {
addTransitionType('open'); // アニメーションの種類を区別する
setShowDetail(true);
});
}
{showDetail && (
<ViewTransition>
<DetailCard />
</ViewTransition>
)}
検証：呼ばれる条件と、非対応ブラウザでの動き
公式の説明どおりに動くかを、小さなページで確かめました。条件は次のとおりです。
- Linux、Node.js v22.22.0、react@19.3.0・react-dom@19.3.0（本番ビルド、esbuild 0.28.2でバンドル）
- Chromium 141（Playwright 1.63.0で操作）。
document.startViewTransitionを包んで、呼ばれた回数と引数を記録 - 2つ目の条件として、
startViewTransitionを削除し、対応していないブラウザを模した状態でも実行
結果は図のとおりです。
startTransitionの中で表示を切り替えると、Reactがdocument.startViewTransitionを1回呼び、引数のオブジェクトのtypesにaddTransitionTypeで付けたopenが入っていたstartTransitionを使わない更新では呼ばれず、そのまま表示が切り替わったstartViewTransitionがない条件では、どちらの更新もエラーなしで表示が切り替わった（アニメーションはなし）
あわせて、サーバー側の描画（renderToString）で <ViewTransition> が余計な要素を出さず、子の <div> だけを出力することも確認しました。1回ずつの確認で、Safari・Firefoxの実機、表示の滑らかさは測っていません。
導入前に確かめること（編集部の提案）
リファレンスの注意書きと検証の結果から、Web制作の現場で先に確かめたい点をまとめます。
- 自前の
document.startViewTransitionを探して止める。 リファレンスには、Reactは内部でstartViewTransitionを呼ぶため自分で呼ばないこと、ページ上で別のView Transitionが動いているとReactがそれを中断することが書かれています。既存サイトにブラウザ標準のView Transitionsを入れている場合は、どちらに寄せるかを先に決めます - 「戻る」ボタンでは動かない前提で設計する。 リファレンスによると、古い
popstateイベントから始まった更新では、スクロール位置とフォームの復元を優先してアニメーションを飛ばします。戻る操作でも動かすには、ルーターがNavigation APIに対応している必要があります。Navigation APIの状況はNavigation APIの記事で整理しています prefers-reduced-motionを必ず入れる。 リファレンスは「Always checkprefers-reduced-motion」として、動きを減らす設定の利用者向けにアニメーションを止めるか弱めることを勧めています- 名前（
name）は共有アニメーションだけに使い、重複させない。 同じ名前の<ViewTransition>が同時に2つあるとエラーになります。一覧の各行に付けるなら、IDを含めた名前にします - フレームワーク側の対応を確認する。 Next.js 16.3.8と
@astrojs/react7.0.0は、npmのpeerDependenciesでReact 19系を受け入れています。ただし、ページ遷移でのアニメーションはルーターの対応にも左右されるため、使っているフレームワークの文書で確認してから入れます
見落としやすい点
- 開発時だけ挙動が変わる。 19.3では、Strict Modeで水和（hydration）するときもEffectを2回実行するようになりました。開発環境でだけ処理が2回走るように見えたら、この変更を疑います
- TypeScriptの型。
@types/reactは19.3.0でViewTransitionの型を含んでいました。古い型定義のままだと、importの段階でエラーになります - モバイルSafariでの不具合修正。 CHANGELOGには、モバイルSafariで
<ViewTransition>が落ちる不具合の修正が入っています。実験版の時期に試して見送った場合は、19.3で改めて確認します
動きの付け方は、サイトの印象と使いやすさの両方に効きます。まずは、既存のコードに document.startViewTransition が残っていないかを検索し、1画面だけ <ViewTransition> に置き換えて、戻る操作と動きを減らす設定での表示を確かめてください。
2026年10月5日に、reactjs/react.dev リポジトリの「React 19.3」の記事（
src/content/blog/2026/09/09/react-19-3.md）と<ViewTransition>のリファレンス、facebook/react の CHANGELOG.md、npmレジストリの react・next・@astrojs/react・@types/react の公開記録を直接開いて照合しました（資料調査）。検証は上記の条件で1回ずつ行ったもので、Safari・Firefox、実際のサイトへの組み込み、表示性能は確認していません。導入前の確認点は編集部の提案です。react.dev のWebサイトでも、同じ記述が公開されていることを確認しました。
Reactで作ったサイトやWebアプリの改修、表示の改善の進め方は、グリームハブの開発・AI・自動化のご相談で承っています。使っているフレームワークや対応ブラウザによって進め方が変わるため、お問い合わせからご相談ください。
