React Routerで実現する型安全なSPAルーティング

■ イベント
TypeScriptを活用した型安全なチーム開発 2024
https://sansan.connpass.com/event/337268/

■ 発表者
技術本部 Eight Engineering Unit Platformグループ
鳥山 らいか

■ Eight 開発エンジニア 採用情報
https://media.sansan-engineering.com/eight-engineer

Transcript

1. Sansan株式会社 部署 名前 React Routerで実現する 型安全なSPAルーティング Sansan技術本部 TypeScriptを活⽤した型安全なチーム開発 2024 技術本部 Eight Engineering Unit ⿃⼭らいか @pvcresin
2. ⿃⼭ らいか / @pvcresin Sansan株式会社 技術本部 Eight Engineering Unit 2019年 Sansan株式会社に新卒⼊社。 Eightのフロントエンドの開発⽀援や技術的改善を⾏う。 その⼀環として、フロントエンドのフルTS化を主導。 直近では、開発者の⽣産性向上に向き合うDPEチームで Rubyに型をつけている。
3. - Eightの紹介 - 課題①: 不正なURLへの遷移 - 課題②: ルーティング変更時の修正の多さ - まとめ アジェンダ
5. Web版 Eight
6. 企業向けサービス Eightユーザーにスカウトが送れる採⽤サービス 個⼈の名刺をチーム単位で共有して管理できるサービス
7. 技術スタック フロントエンド TypeScript / React バックエンド Ruby / Ruby on Rails インフラ AWS CI / CD Circle CI / GitHub Actions
8. a
9. いろいろ⼤変な作業があった - レイアウトの修正 - ページの新規作成 - ページのURL変更 - ページの削除 これらはすべてルーティングに絡む ➜ 型安全性について今⼀度整理しよう
10. React Router
11. - 宣⾔的にルーティングをかける君 - ネストやレイアウト、データ取得など +α な部分も引き受けてくれる React Router
12. 課題① 不正なURLへの遷移
13. - ⽂字列を直接書く形式だと、不正なURLの指定に気付きづらい - 個別に対応すると、URL⽣成のロジックが点在してしまう 不正なURLへの遷移
14. URL⽣成ロジックをまとめる
15. - ルーティングの情報をまとめ、URL⽣成ロジックを集約 - とはいえ、もうちょっと楽に実現したい... URL⽣成ロジックをまとめる
16. generatePath関数の導⼊
17. - URLのパターンとパラメータを元に、URLを⽣成してくれる関数 - パラメータが⾜りない場合に型エラーを出す generatePath
18. - 少しだが、型安全な部分が増えた - URL内に複数のパラメータが存在する場合には、より恩恵が得られそう generatePathを組み込む
19. 課題② ルーティング変更時の修正の多さ
20. 出典: https://x.com/jacobmparis/status/1790904647630151889
21. - v7の準備としてRemixの概念（loader, action）が追加 - ページ内で⾏っていた処理をルーティングの⼀部として書けるように - loader, actionはclient / serverどちらにも共通する概念 React Router v6.4
22. ルーティング変更時の修正の多さ params.id loaderData
23. - Viteプラグインによりサーバやビルド周りの機能も⼊り、Remixと統合 - ページごとのCode Splitting - 専⽤のconfig、CLIの導⼊ - フレームワークとしても使えるように React Router v7
24. パスに応じた型の⾃動⽣成
25. - 準備としてフレームワークとしてのセットアップを⾏う - routes.tsにルーティングを書き、$ react-router typegen を実⾏ - .react-router/types下にルート毎の型を⽣成してくれる パスに応じた型の⾃動⽣成
26. - 使う側のルートファイルではcomponentやloaderに⽣成された型を使う - 開発モードの場合は裏側で typegen が⾛るため、型は⾃動更新される パスに応じた型の⾃動⽣成
27. - Info型が肝 - parentsでネストに対応 - Module型は今のファイル ちなみに中⾝は
28. まとめ
29. - ルーティングは少しの⼯夫で型安全性を⾼められる - React RouterはRemixから通信部分の機能を取り込んでフレームワークに - アップデートでできることが増えているので、頑張りましょう...！ まとめ