mini-router

大LT 2026 春 in Aizuでの発表ログ

Transcript

1. Grand Lightning Talk 2026 Spring in Aizu Mini React Router Navigation API・View Transitions・React Activityを使って、History API時代のSPA Routerを再実装してみた。 松本 天獅 The University of Aizu / 3rd year PROFILE 会津大学 3年 WHAT I DO Mainly Web FIND ME @tenplant1203
2. 自己紹介 HN 名前 学年 出身 趣味 Twitter / Github Tenplant 天獅 松本 学部3年 札幌 キャンプ, ゲーム, Web (@)tenplant1203 Chilling me in Lack Inawashiro Camp
3. 背景について React RouterやNext.js, Tanstack Router を普段使うことが多い URLが変わる 画面が変わる dataを読む 遷移を止める これらがどう繋がってるかを知りたかった。
4. 背景について また, 新しめの標準化されたWeb APIでRouterに活かせそうなものがあった https://developer.mozilla.org/ja/
5. 今回実装したもの React + Vite + TSで小さなrouter libraryを作った。 https://github.com/Tenplant1203/browser-native-router Route Matching Rendering Abort / Race Control 今回通常のrouterに加えて実装したもの Navigation API View Transition URLに対応するrouteを探す 連続navigation時に古いloaderを 中止する matchしたrouteのComponentを Outletで描画する route変更時の画面遷移を 滑らかにする (Web Baseline 2025) Data Loading routeごとのloaderを実行し、 Componentへdataを渡す browser navigationをnavigate eventから扱う (Web Baseline 2026)
6. そもそもRouterって何？ Routerは「URLに応じてpageを出すもの」だけではない。 URLとrouteを対応させる (Route Matching) routeに対応するComponentをrenderする (Rendering) 必要なdataをloaderで取得する (Data Loading) 連続navigation時に古い処理をabortする (Abort / Race Control) つまり, Routerはnavigation lifecycleを管理する仕組み
7. Route Matching URLとrouteを対応させる URL routes
8. Rendering routeに対応するComponentをrender(描画)する ItemDetail Component routes render→
9. Data Loading 必要なdataをloaderで取得する routes ItemDetail Component dataを取得
10. Abort / Race Control Navigationの競合を防ぐ Link 1をクリック Link 1のdataを取得 abort(中止) Link 1のdataの取得完了 abort(中止) Link 1を表示 id !== currentId abort signal Link 2をクリック Link 2のdataを取得 Link 2のdataの取得完了 Link 2を表示
11. 追加で実装したものについて ページ遷移のアニメーションの対応 (View Transition API -- Web Baseline 2025) Navigation Eventによるページ状態の更新 (Navigation API -- Web Base line 2026)
12. CSS / JS animationからView Transition APIへ ページ遷移のアニメーションの対応 (View Transition API -- Web Baseline 2025)
13. View Transition APIって何？ https://developer.mozilla.org/ja/docs/Web/API/ViewTransition 今回の実装では、route変更時の描画更新をView Transitionで包み、 ページ遷移をより自然に見せるようにした。 画面更新の「前」と「後」をブラウザがsnapshotし、 その差分をアニメーションできるAPI。
14. 従来: CSS, JS animation 以前までは CSS transition 従来のCSS transitionは、「同じDOM要素の変化」は得意。 CSS animation Javascript animation などで実装されていた クリック前 https://ja.react.dev/learn/lifecycle-of-reactive-effects クリック後
15. 従来: CSS, JS animation しかしpage遷移では、前のpageのComponentが画面から取り除かれ、
 次のpageのComponentが新しく画面に表示される。 ページ遷移 前のpageのDOMが消えるため、「前の画面から次の画面へ自然につなぐ」には 前の状態を手動で保持・測定する必要があった。
16. 今回のアプローチ: View Transition API View Transition API:
 ブラウザが更新前後の見た目をsnapshotする。 ページ遷移 snapshot!!! 結果:
 route変更のような大きなUI更新でも、
 前の画面 → 次の画面 のtransitionを作りやすくなる。
17. History APIからNavigation APIへ Navigation Eventによるページ状態の更新 (Navigation API -- Web Base line 2026)
18. 従来: History API中心 SPA Routerでは、主に以下の流れで遷移を扱っていた。 Linkのclick eventを拾う preventDefault()で通常のページ遷移を止める history.pushState()でURLを書き換える RouterStateを更新する ページを戻る / 進む はpopstateで監視する
19. Navigation APIって何？ ブラウザのnavigationをeventとして扱うAPI リンクのクリック, 戻る / 進む などのnavigationを navigate eventとして受け取り, intercept(本来のページ遷移を横取り)できる場合だけRouterで処理できる。
20. History APIからNavigation APIへ 従来:
 clickを拾う → preventDefault → pushState → popstate監視 Navigation API:
 browser navigationをnavigate eventとして受け取る よくなった点: navigationをの入口をブラウザ側に寄せることができる。 interceptできる遷移だけRouterで扱える リンクのクリック / ページを戻る / 進むを同じnavigation lifecycleとして見やすくなる History API fallbackと併用できる
21. 難しかったところ 難しかったのは、APIを使うこと自体より、
 Routerとして何をどこまで責務にするかを整理することだった。 React Routerのrepositoryが大きく, 要点を切り出すこと Routingの概念の理解 URL / Component / loader / transitionの繋がりのイメージ loader中に別routeへ移動した時の競合処理
22. 今回で何を学んだ？ Routerを見る目が変わった。 Before: URLに応じてComponentを出す仕組み After: URL・Data・UI・Transitionを繋ぐnavigation lifecycleの管理層 実装してわかったこと loader / abort / transitionは別々ではなく, 1つの遷移に関係している 古いnavigationを止めないと, dataの上書きが起きる Reactの更新タイミングとBrowser APIの接続は難しい Router libraryが隠している複雑さを理解できた
23. 今回で何を学んだ？ 以前までのイメージ 現在のイメージ URL URL Route Matching Loader / Abort Router State React Render Component View Transition Component
24. まとめ Routerを小さく自作することで普段使っているroutingの裏側を理解した。 Routerは単なるURL変更ではなく、

 URL
 Data
 UI
 Transition

 を一貫して扱うnavigation lifecycleの管理層だった。