通るURLだけ通す Monorepoで実現する型安全なリンク設計

Transcript

1. ௨Δ63-͚ͩ௨͢
   .POPSFQPͰ࣮ݱ͢Δܕ҆શͳϦϯΫઃܭ
2. © 2025 Reiwa Travel, Inc. 2 #BDLHSPVOE
   d
   
   -*/&Ϡϑʔגࣜձࣾ
   ɹɹɹɹ
   
   
   
   
   
   %FW0QTɺ10ɺ1BZ1BZϑϦϚͷϑϩϯτΤϯυ
   d
   
   גࣜձࣾྩ࿨τϥϕϧ
   ɹɹɹɹ
   
   
   
   
   
   ϑϩϯτΤϯυɺ&.
   /FYUKT
   3FBDU
   3FBDU/BUJWF
   &YQP
   5ZQFTDSJQU
   /PEFKT
   (SBQI2-
   /FPWJN
   👶
   ̎ࣇͷ෕ɹ🎲
   ϘʔυήʔϜ
   4/4
   ྩ࿨τϥϕϧ
   ϑϩϯτΤϯυΤϯδχΞ
   c
   &.
   ZBTTBO !ZBT@Y !ZBT
3. © 2025 Reiwa Travel, Inc. 3
4. © 2025 Reiwa Travel, Inc. 4
5. © 2025 Reiwa Travel, Inc. 5 TSKaigi Hokuriku 2025 参加者限定 特別クーポン
6. © 2025 Reiwa Travel, Inc. 今日お話しすること 社内におけるインシデントの恒久対応としてライブラリを開発してOSSに 課題はフロントエンド開発において遷移先のURLを型安全に扱いたい 6
7. © 2025 Reiwa Travel, Inc. 存在しないURLをリンク先にしてしまった <a href="/dasboard">Dashboard</a> // "dashboard" を typo
8. © 2025 Reiwa Travel, Inc. Next.js TypedRoutes <Link href="..."> や router.push("...") など「存在しないパス」を渡した時に コンパイル時に TypeScript エラーで検出する 8
9. © 2025 Reiwa Travel, Inc. Next.js TypedRoutesの限界 9 • Dynamic Routeに弱い（非リテラル化でstringに落ちがち） • Pathのみ。queryの型付けがない • Monorepo(MFE)横断では価値が薄い（アプリ内限定）
10. © 2025 Reiwa Travel, Inc. ya2s / next-typed-url 10 Next.js の Pages/App Router からルート情報をスキャンし ルートパラメータやクエリ型まで含めた型安全なURLビルダーを自動生成するCLI/ライブラリ 単一のNext.js.プロジェクトでも Monorepo(micro frontend)でも使える
11. © 2025 Reiwa Travel, Inc. ya2s / next-typed-url 11 プロジェクトルートで型付きURLの生成を実行 生成されたコードを使ってURLを組み立てる
12. © 2025 Reiwa Travel, Inc. <Link href={ urls.hotel.build({ route: “/tour/[tourId]", params: { tourId: “12345", }, searchParams: { country: "jpn", } }).href } ya2s / next-typed-url 12
13. © 2025 Reiwa Travel, Inc. <Link href={ urls.hotel.build({ route: “/tour/[tourId]", params: { tourId: “12345", }, searchParams: { country: "jpn", } }).href } ya2s / next-typed-url 13 ルート情報から候補を補完
14. © 2025 Reiwa Travel, Inc. <Link href={ urls.hotel.build({ route: “/tour/[tourId]", params: { tourId: “12345", }, searchParams: { country: "jpn", } }).href } ya2s / next-typed-url 14 動的なパラメータも補完・型安全
15. © 2025 Reiwa Travel, Inc. <Link href={ urls.hotel.build({ route: “/tour/[tourId]", params: { tourId: “12345", }, searchParams: { country: "jpn", } }).href } ya2s / next-typed-url 15 クエリパラメータも補完・型安全
16. © 2025 Reiwa Travel, Inc. ya2s / next-typed-url 16 Q. クエリパラメータはどこから取得しているの？ A. page.tsxにtype Queryを定義する（コロケーション）
17. © 2025 Reiwa Travel, Inc. <Link href={ urls.hotel.build({ route: “/tour/[tourId]", params: { tourId: “12345", }, searchParams: { country: "jpn", } }).href } Monorepoの場合は、アプリごとの名前空間を補完 ya2s / next-typed-url 17
18. CONFIDENTIAL © 2025 Reiwa Travel, Inc. 18 ·ͱΊ 型安全なURLの生成のためのライブラリ(next-typed-url)を作成 存在しないURLをリンク先に指定することがなくなる - Dynamic Routeやクエリパラメータにも対応 - MonoreopもアプリごとにURLを生成 OSSへのContributeお待ちしています！
19. Thank you! CONFIDENTIAL © 2025 Reiwa Travel, Inc. 19