Navigation APIと見るSvelteKitのWeb標準志向 / Navigation API SvelteKit Web Standards

Svelte Japan Offline Meetup #7 登壇資料

Transcript

1. Svelte Japan Offline Meetup #7 2026/03/23 yamanoku Navigation APIと見る SvelteKitのWeb標準志向
2. yamanoku 一児の父・会社員 「お元気ですか.fm」パーソナリティ • My favorite things ◦ Web Standard ◦ アクセシビリティ ◦ 大型犬 ◦ 超かぐや姫！ X (旧Twitter) | BlueSky | GitHub
3. SvelteKitのWeb標準志向
4. 2025年のSvelteアドベントカレンダーに寄稿 https://zenn.dev/yamanoku/articles/svelte-advent-calender-2025
5. • React Router • Vue Router • SvelteKit • Astro • FUNSTACK Router (uhyoさん作) ライブラリ・フレームワークの処理を調査
6. • 他のライブラリと違ってルーター用のコンポーネントがない • <Link>, <router-link>, <NuxtLink> などが存在しない • Web標準の<a>だけでルーティング処理を実現している より詳細な処理の内容はZenn記事を参照ください。 ちなみに、Astroも同様に<a>でルーティング処理を実現している。 SvelteKitでのSPA遷移を実現する要素
7. • 左クリック時やキー操作の場合は除外する • <a>での属性値やhrefでの値を元に処理の除外判定 • 同一ページにアンカーリンクがある場合のみスクロールさせる • すべてがページ遷移させる処理が発火する • 一部挙動はPage.jsを参考にしている 通常のリンク挙動を中断する処理
8. • Web標準志向なもので構築されていることを改めて知れた • Fetch APIs, FormData, Stream APIs, URL APIs, Web Crypto… • 「車輪の再発明をするのではなくプラットフォームを扱う」 • Svelteでは新しいHTML要素のサポートも入っている SvelteKitのWeb標準志向
9. 事例：Nuxtの場合における<a>と<NuxtLink>での扱い • <NuxtLink>にexternal propsを付与して外部リンクとして扱う • これは<a>でも同様に実現できるため判断に迷いがち SvelteKitでは<a>から書くことを起点にしているので迷わない。 実装の迷いを減らせることは有利
10. Conversely, time spent learning SvelteKit will help you be a better web developer elsewhere. https://svelte.jp/docs/kit/web-standards
11. Navigation APIについて
12. • History APIに替わるページ遷移にまつわるWeb API • かつては「App History API」と呼ばれていた • Chrome 102よりフラグなしで使用可能（2022/5～） • Interop 2025にて対象に選出・標準化への取り組みが加速 Navigation APIとは何か
13. そもそもHistory APIでSPAを実装するには問題点が多かった • ユーザー操作でページの履歴が差し変わる • ブラウザによって一部動作の制約やバグがある • iframeがあることで履歴スタックを破壊してしまう 加えて、SPA特有のユーザー体験の問題もいくつか改善できないかも 検討されていた（スクロールの調整・アクセシビリティの問題） なぜHistory APIに替わるものが出た？
14. History APIをハック的に扱わず、求めていた処理に近づく • 遷移処理をinterceptにて中断できるようになった • 履歴についても一意の状態を持てるようになった • SPAの画面遷移でスクリーンリーダーへの通知ができる • 画面遷移後のスクロールの位置調整がより容易になった Navigation APIは何を解決してくれるの？
15. • ブラウザ制約の影響を受けずに実装できるようになった • これまでの処理自体をより軽量にできる ◦ ルーティングライブラリへの採用が期待できる これまでのルーティング処理も簡潔にできる
16. • TypeScript 6.0からWeb API等の型定義ファイルの見直し • その流れで型定義も最新の状態に追従している • Navigation APIは6.0より型が使用できるようになった ◦ 5.9以前はDefinitelyTypedを使用しなければならなかった TypeScript 6.0から型が使用可能
17. • Navigation APIは2026年1月をもってBaseline Newly Availableへ • 最新のモダンブラウザであれば扱えるAPIになった • ただしSafari、Firefoxの2025年以前のブラウザでは使えない • そのためプロダクションで使用するにしてもまだ Polyfillは必要 • Baseline Widely Availableとなるのは2028/07/13予定 じゃあNavigation APIは使ってもいい？
18. 現時点では対応しないのをRich本人が明言している。 https://github.com/sveltejs/kit/issues/5277#issuecomment-4055076601 SvelteKitはNavigation APIに置き換えるか
19. 🌶 IMHO 🌶
20. Navigation APIはHistory APIを代替しうる期待の存在。 ただ単体でこれが流行るかは正直怪しい。 • マイクロフロントエンドの共通ルーター部分 • 独自のクライアントサイドルーティングライブラリ それよりかは各ライブラリやフレームワークに 取り入れる方向が望ましいと考えている。 Navigation APIは流行るのか 🌶
21. 再掲：Baseline Widely Availableになるのは2028/07/13 2年後まで待つのは遅すぎるのではないか？ 【提案】実験的機能として提供していくのはどうだろうか • Angular 21.1からNavigation APIを実験的機能で扱える • Vue Routerもモード切替できるように実装を進行中 安全に使えるまで待つのは遅い 🌶🌶
22. ここ数年フロントエンドはユーザー体験に関する新しい発明や どのようなものが良いかについて見かけなくなってきている。 Navigation APIやView TransitionsといったWeb APIや HTML・CSSの進化と共にMPA, SPAとは違った見せ方を考えたい。 Web標準志向のフレームワークだからこそ、 それが追求していけるのではないかと信じている。 単なるSPAからの脱却 🌶🌶🌶
23. • SvelteKitのSPAの仕組みはWeb標準技術を活用している • Navigation APIはSPAの挙動を改善しうるAPI • Navigation APIの本番投入が徐々に始まっている • SvelteKitは反映について静観の状態 • Web標準志向だからこそ導入して、より良い体験を考えたい まとめ
24. ひとりNavigation API Advent Calendar - yamaScrapbox