---
title: 型パズルでページ内リンクのtypoを根絶してみた話
tags: 
author: [堀池浩輝](https://www.docswell.com/user/h_horiike)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/KJ4286VYE1.jpg?width=480
description: Shizuoka.js #7 登壇資料
published: October 21, 23
canonical: https://www.docswell.com/s/h_horiike/Z1J4N4-shizuokajs7
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/KJ4286VYE1.jpg)

型パズルで
typoを
ページ内リンクの
根絶してみた話
堀池 浩輝 @tender_ice


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LE1M2V3N7G.jpg)

自己紹介
SBS情報システム
堀池 浩輝
@tender_ice (リア垢)
静岡新聞SBSグループのIT企業、県内SIer
Webアプリケーションが主で TypeScript が好き
静岡県が設置したイノベーション施設 SHIP のコアメンバー
技術アカウントもあるけどネット転生予定なので今回は伏せます


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GEW3RLXME2.jpg)

ページ内リンクの
typoを
根絶したい！


# Page. 4

![Page Image](https://bcdn.docswell.com/page/47ZVRM6ME3.jpg)

たとえば React Router の場合
<BrowserRouter>
<Routes>
<Route index element={<TopPage />} />
<Route path="/signin" element={<SignIn />} />
<Route path="/items" element={<ItemListPage />} />
<Route path="/items/:itemId" element={<ItemDetailsPage />} />
<Route path="/options/:tabId" element={<Options/>} />
･
･
･
{/* Nested Routing は使わない想定 */}


# Page. 5

![Page Image](https://bcdn.docswell.com/page/YJ65RN257V.jpg)

typoがつらい
<Link to="/item">Products</Link>
あれ……「/item」だっけ？「/items」だっけ？
<Link to="/options">設定</Link>
あれ……「/options」だけじゃダメなんだっけ？
さらに、だんだん階層が深くなってくると悲惨
<Link to="/shop/sId123/items/iId123/comments/cId123">…</Link>


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GJ5Y852GJ4.jpg)

あれ…なんで俺…
定義済みの値を
手打ちしてんだ…？


# Page. 7

![Page Image](https://bcdn.docswell.com/page/9E2GKN4DER.jpg)

必須のIDに型推論が効く関数が欲しい
getItemListPagePath() // =>`/items`
getItemDetailsPagePath() // 引数が1つ必要です
getItemDetailsPagePath(itemId) // =>`/items/${itemId}`
つまり、
getItemListPagePath = () => `/items`
getItemDetailsPagePath = (itemId) => `/items/${itemId}`


# Page. 8

![Page Image](https://bcdn.docswell.com/page/D7YVNPMM7M.jpg)

二重管理もつらい
const pagePaths = {
signin: () => "/signin",
itemList: () => "/items",
itemDetails: (itemId:string)=>`/items/${itemId}`,
options: (tabId:string)=>`/items/${tabId}`,
}
画面を追加するたびに
こっちにも追加するのを忘れる
片方だけ変更してしまってバグった


# Page. 9

![Page Image](https://bcdn.docswell.com/page/VENMX5W3J8.jpg)

1つのオブジェクトから作ろう！
const pagePaths = {
signin: { value: "/signin", get: () => "/signin" },
itemList: { value: "/items", get: () => "/items" },
itemDetails: { value: "/items/:itemId", get: (itemId:string) => `/items/${itemId}` },
options: { value: "/options/:tabId", get: (tabId:string) => `/options/${tabId}` },
};
ルーティングを定義するときも、<Link>を使うときも
pagePathsオブジェクトから参照すればOKにしよう！


# Page. 10

![Page Image](https://bcdn.docswell.com/page/Y79N8YXP73.jpg)

プログラマの美徳「怠惰」発動
itemDetails: { value: "/items/:itemId", get: (itemId:string) => `/items/${itemId}`
Pathが items/:itemId って言ってるんだから
itemDetails.get が (itemId:string) => `items/${itemId}`
になるなのは自明じゃね…？
自明なことはコンピュータにやらせたい！書きたくない！めんどくさい！
その手作業でミスがあったらどうするんだ！


# Page. 11

![Page Image](https://bcdn.docswell.com/page/G78K862XJD.jpg)

“item/:itemId” を渡したら
(itemId:string) => `item/${itemId}`
自動で作って型推論も効く
も
createPagePath() 的な関数が欲しい！


# Page. 12

![Page Image](https://bcdn.docswell.com/page/L7LZR92NER.jpg)

みんな だいすき 型 パズル
type DynamicPaths<
T extends `/${string}`,
P extends string[] = []
> = T extends `/:${string}/${infer R}`
? DynamicPaths<`/${R}`, [...P, string]>
: T extends `/${string}/${infer R}`
? DynamicPaths<`/${R}`, [...P]>
: T extends `/:${string}`
? [...P, string]
: [...P];
/foo/bar ⇒ []
/foo/:bar ⇒ [string]
/:foo/:bar ⇒ [string, string]
DynamicPaths<T,P> は Tuple で表現される string の固定長配列であり、
その長さは T に含まれる /: の数に等しい。( P は再帰でのみ使用される)


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4EMVRZ8QEW.jpg)

完成した createPagePath()
const createPagePath = <T extends `/${string}`>(path: T) => {
return {
value: path,
get(...args: DynamicPaths<T>) {
const iter = args.entries();
return path
.split("/")
.map(seg => seg.match(/^:.+/) ? iter.next().value[1] : seg)
.join("/");
},
};
};


# Page. 14

![Page Image](https://bcdn.docswell.com/page/PER2R65K79.jpg)

使ってみる


# Page. 15

![Page Image](https://bcdn.docswell.com/page/P7XDRMK5JX.jpg)

教訓と感想
●
Variadic Tuple Types と再帰呼び出しの相性が良い
●
Template Literal Types と infer をうまく使うと文字列操作が捗る
●
今回の物だと Nested Routing に対応できないので、ライブラリ側でうまい
こと Route を定義したら getPagePaths() 関数を提供して欲しい…（切実）
●
こういうハックは楽しいが、やりすぎ注意（戒め）


# Page. 16

![Page Image](https://bcdn.docswell.com/page/37KXRG5RJD.jpg)

ごあんない
「私の作品が映画館で流れる！？」
あなたが AI で作った動画
あなたが 360°視点映像 で撮った動画
映画館で流しませんか？
【映像クリエイティブチャレンジ2023】開催！
興味のある方は、
SHIPの関連セミナーに是非ご参加ください！


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LJ358NKG75.jpg)

型パズルで
typoを
ページ内リンクの
根絶してみた話
ご清聴ありがとうございました