ひとりNavigation API Advent Calendarの紹介 / Mita.ts #9

Mita.ts #9の発表資料

ひとりNavigation API - Qiita Advent Calendar 2025

Transcript

1. ひとり Navigation API Advent Calendar
2. 2025年
3. まもなく 終わりますね
4. 今年は 何があったかな
5. フロントエンド エコシステムを 見渡してみる
6. • React Compiler v1リリース • Nuxt v4リリース • RemixのWeb標準による新アーキテクチャ • Vitest Browser Mode安定化 • Biome v2リリース • Base UI v1リリース、shadcn/uiへの登用 • TypeScript Goでのネイティブ実装 • Vite +(plus) 発表 • npmリポジトリへのサプライチェーン攻撃 • React2Shell 等
7. 私が注目した 2025年の出来事
8. Interop 2025
9. Interop？
10. Web APIの クロスブラウザ 相互運用性を 高めるプロジェクト
11. • CSS Anchor positioning • backdrop-filter • Core Web Vitals • <details> element • Layout • JavaScript Modules • Navigation API • Pointer and Mouse events • @scope • scrollend event • Storage Access API • text-decoration • URLPattern • View Transition API • WebAssembly • Web Compat • WebRTC • Writing modes • Mutation Event 削除
12. 私が 注目している Web API
13. Navigation API
14. これは何が できるの？
15. SPAの ユーザー体験を 向上させる Web API
16. もう少し 具体的に言うと
17. SPA開発に必要な History APIを 使いやすくしたもの
18. そもそも History APIって？
19. ブラウザの 閲覧履歴を 制御するもの
20. history.forward()
21. history.back()
22. history.go()
23. history.pushState() history.replaceState()
24. scrollRestoration
25. History APIは SPAのどの部分で 活用されてる？
26. クライアント ルーティング
27. History APIは SPAの構築に 必要なWeb API
28. しかしながら
29. History API には 問題があります
30. 履歴を残すのが 難しい
31. 履歴はふとした リンク操作で 書き換わってしまう
32. Safari iOSでの pushStateの 回数制限
33. 30秒間に100回の pushState呼び出しで SecurityError
34. 遷移処理を止めると 履歴が差し変わる ことがある
35. 履歴を復元する 処理を作らないと いけない
36. アクセシビリティ観点
37. 手続き的な フォーカス管理が やりづらい
38. たいへん
39. そこで登場
40. Navigation API
41. 履歴の管理を 永続的なものに
42. 遷移途中に 割り込み処理を 入れられるように
43. フォーカス管理も しやすくなった
44. いいね
45. ところで
47. 型情報は？
48. TypeScript 3.9では 一部型情報が 使えます
49. 2つ以上の ブラウザエンジンが 対応したら 正式に反映される
50. Chrome 102 Release date 2022-05-24 Edge 102 Release date 2022-05-31 Safari 26.2 Release date 2025-12-12 Firefox 147 Release date 2026-01-13
51. 来年には 全ブラウザで 安定して使える （予定）
52. つまり
53. 2026年は Navigation API 元年
54. 使うなら ちゃんと 理解したい
55. 予習しておこう
56. そういえば
57. 今って 12月ですね
58. 12月といえば
59. Advent Calendar
60. というわけで
61. ひとりNavigation API Advent Calendarをやっています！
62. • Navigation APIとは何？ • 一次情報源まとめ ◦ Navigation API、History API ◦ ルーティングライブラリ集 • History APIの問題点 • Navigation APIインターフェイス、メソッドを見る • interceptとは何？ • クライアントサイドルーティングを実装してみる • React Router、Vue RouterのHistory API実装を見る • uhyoさんが作ったルーティングライブラリの実装を見る 等
63. あと8日
64. 最後まで 走り切ります
65. #ひとりNavigation_API_Advent_Calendar
66. 発表者紹介
67. • 一児の父 • 会社員 • PodCast User ◦ お元気ですか .fm • @yamanoku ◦ X ◦ GitHub ◦ BlueSky やまのく
68. ご清聴 ありがとう ございました