Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React のルーター事情
Search
sadnessOjisan
February 20, 2025
Programming
1
400
React のルーター事情
sadnessOjisan
February 20, 2025
Tweet
Share
More Decks by sadnessOjisan
See All by sadnessOjisan
PHPこそ OpenTelemetry が嬉しい
sadnessojisan
2
320
TypeScript、上達の瞬間
sadnessojisan
51
18k
フロントエンド・オブザーバビリティを支える要素技術を学ぼう
sadnessojisan
2
780
疎通2024
sadnessojisan
5
1.6k
BasicBasic認証
sadnessojisan
5
4.4k
ISUCON入門以前_ISUNARABE_LT#1
sadnessojisan
20
5.9k
サーバーとは何かを理解して、コンテナ1つで実行しよう | PHPerKaigi2024
sadnessojisan
36
15k
Node.js v12 を使い続けていたのはなぁぜなぁぜ?
sadnessojisan
11
28k
かにさんタワーバトル
sadnessojisan
1
25k
Other Decks in Programming
See All in Programming
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
980
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
370
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
310
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
120
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
960
兎に角、コードレビュー
mitohato14
0
140
AWS Serverless Application Model入門_20250708
smatsuzaki
0
110
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
280
バイブコーディング × 設計思考
nogu66
0
120
Introduction to Git & GitHub
latte72
0
110
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
210
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
150
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Documentation Writing (for coders)
carmenintech
73
5k
How to Ace a Technical Interview
jacobian
279
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How GitHub (no longer) Works
holman
314
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Balancing Empowerment & Direction
lara
2
580
Facilitating Awesome Meetings
lara
55
6.5k
Faster Mobile Websites
deanohume
309
31k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Embracing the Ebb and Flow
colly
86
4.8k
Transcript
React のルーター事情 @sadnessOjisan 1
自己紹介 • ID: sadnessOjisan • 近況: 生活が破壊されるレベルで、ポケカ と ポケ モンにハマった。今日持ってきています。
• ゆるぼ: 地面師が飲んでいたウイスキーを飲みにい きませんか(6人くらいで30mlを割り勘すれば飲め そう) 2
今日のお題: React とルーティング • React のルーティングの常識が変わりつつある(n回目) のでおさらいしよう ◦ react-router v3
◦ react-router v4 ◦ tanstack router ◦ react-router v6 ◦ react-router v7 ◦ Next.js app router • SSR もする時代なので HTTP サーバーにおけるルーティングから見ていこう 3
ルーティングとは • ネットワーク: 経路の制御 • Web: URI とクライアントリクエストにおけるそれらのレスポンスの定義 4
Webサーバーの例 chatGPT に書かせた 5
HTTP のリクエストを見る • HTTP リクエスト = リクエストライン<改行>ヘッダー<改行><改行>ボディ • リクエストライン =
メソッド<スペース>URI<スペース>バージョン ◦ GET https://example.com/piyo HTTP/1.1 6
文字列とルーターのマッチング • リクエストラインをパースするとメソッド、パスを取り出せる • それらに応じたハンドラーを実行すると、URLに応じた処理の切り替えを実 現できる • どのパスがどのハンドラーかというマッチングをさせなければいけず、一致 ・正規表現・Trie木など色々な戦略が考えられる 7
補足: なぜ Ruby で例を書いたか • HTTP を教えるための題材として一番良い言語だと思っている • ライブラリなしで、サーバーを自作するための必要な機能が一通り揃ってい る。(socket,
erb(template engine)) • JS だと body parser が必要、Go だと最初から組み込みの HTTP が含まれて しまっている • それでいてRubyは Mac であれば環境構築が不要 サーバーを教える研修をする時はRubyを使うようにしている 8
HTTPのルーターとSPAのルーター • HTTPサーバーのルーティングはナビゲーションリクエストに対するルー ティング • 一方で SPA における画面遷移ではナビゲーションリクエストは発生しない • アプリケーション内の状態遷移でルーティングを実現する
サーバー /piyo.html /hoge.html /fuga.html サーバー /index.html 返ってくるHTMLは1つだけ パスごとにHTMLが返ってくる 9
SPAの状態は揮発するのでURLに保持したい • 画面をリロードすると状態がリセットされる • ローカルストレージやクッキーに状態を保存してもいいが、それだと誰かに 画面を共有するということができない • どのページを開いているかという状態はURLに保持したい。例えば、パスや ハッシュ(#)によって保持する •
JS上での状態遷移をURLに反映させられるのか ◦ -> 反対にURLに状態を保持することで useState を使わない開発が react-rotuer v6 から可 能になっている 10
URLを操作できるhistoryオブジェクト • SPAのHTMLは1つなので、/hoge のようなページでリロードしても hoge.html は手に入らない • history オブジェクトを使った初期化が肝 •
history を使うことでJSの世界からURLを変えられる • push で状態を積んでいけるので、ブラウザバックもできるようになる 11
SPAルーターを自作しよう 12
SPAルーターを自作しよう history に path を積む 13
SPAルーターを自作しよう 「戻る」のようなイベントを監視し、 URLが変わった時に 同期するようにする 14
react-router のミニマムな使い方 • 自分で作るのはめんどくさい + 事故の元 なので、ライブラリを使おう。 https://reactrouter.com/6.29.0/route rs/create-browser-router 15
react-router のミニマムな使い方 • 自分で作るのはめんどくさい + 事故の元 なので、ライブラリを使おう。 https://reactrouter.com/6.29.0/route rs/create-browser-router 楽
16
tanstack-router は何が嬉しいのか • react-rotuer は型がつかない(=遷移先などに型がついて欲しい) • とはいえ型がつくルーターなんて少数派ではある • react-router と比べて破壊的変更がない(という信仰がある)
17
ルーティングエコシステムの整理 • ルーティングの王道: react-router • デメリットに向き合った後発: tanstack-router • 圧倒的シェア率によるちゃぶ台返し: Next.js
18
react-router 以外の台頭 • react router v4 あたりは上記の世界観のルーターだった。競合は reach-router • react-router
v4 は破壊的変更がすごくて(onEnterなど)警戒される( IMO: ここで痛い目を見ると remix に対する目が...) • その後に tanstack router が台頭してくる • また routing library ではないが VS next.js という構図でも見られるように なってきた(Nextなくてもvite+react-routerでいいよね?という言説 19
react-router のフレームワークとしての進化 • Nextの流行りはじめの時期に Remix が react-router の作者によって作られ ていた •
react-router と remix が統合されつつあり、react-router がフレームワー クとしての能力を獲得する 20
action: フォームのサポート https://reactrouter.com/how-to/form-validation 21
action: フォームのサポート https://reactrouter.com/how-to/form-validation form イベントを action で抽象化 22
action: フォームのサポート https://reactrouter.com/how-to/form-validation 送信データを取得し操作する 23
action: フォームのサポート https://reactrouter.com/how-to/form-validation validation は error を返すことで実現。 この error は
hooks 経由で取得可能。 24
loader: データフェッチのサポート https://reactrouter.com/6.29.0/hooks/use-loader-data 25
loader: データフェッチのサポート https://reactrouter.com/6.29.0/hooks/use-loader-data loader 関数で data fetch して return hooks
で loader から data を取得 26
loader: データフェッチのサポート https://reactrouter.com/6.29.0/hooks/use-loader-data loader 関数で data fetch して return hooks
で loader から data を取得 データ取得おける状態管理が 不要となっている。 27
loader: データフェッチのサポート https://reactrouter.com/6.29.0/hooks/use-loader-data loader 関数で data fetch して return hooks
で loader から data を取得 Suspenseのおかげで ローディング管理も楽になる 28
フレームワークの機能は概ね開発効率がよい • ルーターを使わないといけないようなアプリケーションは、ほぼほぼ data fetch や form submit の機能を実装しなければいけない •
ルーターを入れるだけでそれらの機能が使え、react-router と統合されて使 えるのが嬉しい • 例: ページ切り替え時に勝手にデータを取得・ページ遷移におけるデータの ローディングの状態管理がフレームワークでサポートされる 29
loader と awaited による useEffect 除去 • AwaitedコンポーネントがError Boundaryの機能を持っている •
Promise を await しなくてよい https://reactrouter.com/6.29.0/components/await 30
outlet による nesting layout の最適化と可読性向上 • 一覧ページと詳細ページが同居してい て、一覧から一つ選択したら詳細ペー ジが切り替わるUIに便利 •
詳細ページは一覧ページにNestされて いるという定義をすれば、Outletで子 供として表示できる 31
outlet による nesting layout の最適化と可読性向上 • タブUIなども Nested Route で表現す
れば、URL で表示を切り替えられ、状 態管理を不要にできる。 32
react router v6 は我々が求めていた答えだ!!!!! 33
34
react-router v7 による大きな変更 • 破壊的変更はないとされている。実際にない。 • フレームワーク機能とライブラリ機能に分割 • ライブラリ機能を使い続ければ、破壊的変更がない •
フレームワーク機能においてはルーティングの方法が大きく変わった。 Convention over Configuration が導入され、全てが変わった 35
ルーティング方法の before / after https://reactrouter.com/start/framework/routing https://reactrouter.com/6.29.0/routers/create-browser-router 36
37
ついに型が付く 38
SSR が可能となる(実は vi(t|k)e 経由で昔からできていた) • ビルド時にサーバーが生成される 39
冷静に考えると 謎技術では? 40
ビルド時に型やサーバーが存在する理由 • ビルド時にパスから型を作った り、サーバーの実装が生えるのは TypeScriptができるわけがない • 【悲報】react-router さん、ビ ルドプロセスに介入していた wwwwww
• vite プラグインが必要だったり、 CLI が必要になっている 41
導入や移行は少し大変 • Manually Install のためには@react-router/dev/vite, @react-router/node などといったライブラリが必要 • ファイルの配置位置や命名をフレームワークの規約に従わないといけない •
そもそも記法が大幅に変わる • その上でまだ安定もしていないかつドキュメントも不足している • vite を前提としているので制約があり、将来の技術選定にも制約が生まれる 技術選定にはなる ◦ ツールがバンドラに依存する辛さについて、Zero-runtime CSS in JS のこと、ときどきで良 いから.....思い出してください。 42
react-router を採用すべきか • 答えは... 43
知らんがな 44
react-router を採用すべきか • 知らんがな • react-rotuer は破壊的変更の常習犯なので採用すべきでない...と言われる が、どの有名ライブラリも破壊的変更だらけじゃないですか? app router
を見よ! • 何を選んでも辛いので何選んでもいいと思っている 45
In My Opinion • Next を使うことが多め • react-router は自分で準備する部分が多く、自分の好みは Simple
よりも Easy(果たしてNextがEasyなのかは議論の余地がありますが...) • とはいえ、なにかと人口の多さが正しさなところを感じている。人口が多い と何とかなることが結構ある。なんとかなれ〜〜〜〜〜〜 • 実際には 「SSR 必須か?」 「要件的に useEffect が必要か?」 「Outlet があると綺麗になるか?」 などの星取表思考を元に選定しているので、気に なる方は懇親会などで聞いてください〜 46