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

Slide 1

Slide 1 text

Sansan株式会社部署名前 React Routerで実現する型安全なSPAルーティング Sansan技術本部 TypeScriptを活⽤した型安全なチーム開発 2024 技術本部 Eight Engineering Unit ⿃⼭らいか @pvcresin

Slide 2

Slide 2 text

⿃⼭らいか / @pvcresin Sansan株式会社技術本部 Eight Engineering Unit 2019年 Sansan株式会社に新卒⼊社。 Eightのフロントエンドの開発⽀援や技術的改善を⾏う。その⼀環として、フロントエンドのフルTS化を主導。直近では、開発者の⽣産性向上に向き合うDPEチームで Rubyに型をつけている。

Slide 3

Slide 3 text

- Eightの紹介 - 課題①: 不正なURLへの遷移 - 課題②: ルーティング変更時の修正の多さ - まとめアジェンダ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Web版 Eight

Slide 6

Slide 6 text

企業向けサービス Eightユーザーにスカウトが送れる採⽤サービス個⼈の名刺をチーム単位で共有して管理できるサービス

Slide 7

Slide 7 text

技術スタックフロントエンド TypeScript / React バックエンド Ruby / Ruby on Rails インフラ AWS CI / CD Circle CI / GitHub Actions

Slide 8

Slide 8 text

Slide 9

Slide 9 text

いろいろ⼤変な作業があった - レイアウトの修正 - ページの新規作成 - ページのURL変更 - ページの削除これらはすべてルーティングに絡む ➜ 型安全性について今⼀度整理しよう

Slide 10

Slide 10 text

React Router

Slide 11

Slide 11 text

- 宣⾔的にルーティングをかける君 - ネストやレイアウト、データ取得など +α な部分も引き受けてくれる React Router

Slide 12

Slide 12 text

課題① 不正なURLへの遷移

Slide 13

Slide 13 text

- ⽂字列を直接書く形式だと、不正なURLの指定に気付きづらい - 個別に対応すると、URL⽣成のロジックが点在してしまう不正なURLへの遷移

Slide 14

Slide 14 text

URL⽣成ロジックをまとめる

Slide 15

Slide 15 text

- ルーティングの情報をまとめ、URL⽣成ロジックを集約 - とはいえ、もうちょっと楽に実現したい... URL⽣成ロジックをまとめる

Slide 16

Slide 16 text

generatePath関数の導⼊

Slide 17

Slide 17 text

- URLのパターンとパラメータを元に、URLを⽣成してくれる関数 - パラメータが⾜りない場合に型エラーを出す generatePath

Slide 18

Slide 18 text

- 少しだが、型安全な部分が増えた - URL内に複数のパラメータが存在する場合には、より恩恵が得られそう generatePathを組み込む

Slide 19

Slide 19 text

課題② ルーティング変更時の修正の多さ

Slide 20

Slide 20 text

出典: https://x.com/jacobmparis/status/1790904647630151889

Slide 21

Slide 21 text

- v7の準備としてRemixの概念（loader, action）が追加 - ページ内で⾏っていた処理をルーティングの⼀部として書けるように - loader, actionはclient / serverどちらにも共通する概念 React Router v6.4

Slide 22

Slide 22 text

ルーティング変更時の修正の多さ params.id loaderData

Slide 23

Slide 23 text

- Viteプラグインによりサーバやビルド周りの機能も⼊り、Remixと統合 - ページごとのCode Splitting - 専⽤のconfig、CLIの導⼊ - フレームワークとしても使えるように React Router v7

Slide 24

Slide 24 text

パスに応じた型の⾃動⽣成

Slide 25

Slide 25 text

- 準備としてフレームワークとしてのセットアップを⾏う - routes.tsにルーティングを書き、$ react-router typegen を実⾏ - .react-router/types下にルート毎の型を⽣成してくれるパスに応じた型の⾃動⽣成

Slide 26

Slide 26 text

- 使う側のルートファイルではcomponentやloaderに⽣成された型を使う - 開発モードの場合は裏側で typegen が⾛るため、型は⾃動更新されるパスに応じた型の⾃動⽣成

Slide 27

Slide 27 text

- Info型が肝 - parentsでネストに対応 - Module型は今のファイルちなみに中⾝は

Slide 28

Slide 28 text

まとめ

Slide 29

Slide 29 text

- ルーティングは少しの⼯夫で型安全性を⾼められる - React RouterはRemixから通信部分の機能を取り込んでフレームワークに - アップデートでできることが増えているので、頑張りましょう...！まとめ

Slide 30

Slide 30 text

No content