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
Roconで実現する超型安全なルーティング / Super Type-safe routing...
Search
LINE Developers
December 18, 2020
Technology
4
3.3k
Roconで実現する超型安全なルーティング / Super Type-safe routing with Rocon
uhyo (LINE株式会社)
UIT meetup vol.11『フロントエンド紅白LT合戦』での発表資料です
https://uit.connpass.com/event/197740/
LINE Developers
December 18, 2020
Tweet
Share
More Decks by LINE Developers
See All by LINE Developers
LINEスタンプのSREing事例集:大きなスパイクアクセスを捌くためのSREing
line_developers
1
2.2k
Java 21 Overview
line_developers
6
1.1k
Code Review Challenge: An example of a solution
line_developers
1
1.2k
KARTEのAPIサーバ化
line_developers
1
500
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
5
2.1k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
3
2k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
9
3.3k
A/B Testing at LINE NEWS
line_developers
3
930
LINEのサポートバージョンの考え方
line_developers
2
1.2k
Other Decks in Technology
See All in Technology
GitHub MCP Serverを使って Pull Requestを作る、レビューする
hiyokose
2
620
30 代子育て SRE が考える SRE ナレッジマネジメントの現在と将来
kworkdev
PRO
0
190
Tokyo dbt Meetup #13 dbtと連携するBI製品&機能ざっくり紹介
sagara
0
370
試験は暗記より理解 〜効果的な試験勉強とその後への活かし方〜
fukazawashun
0
200
Startups On Rails 2025 @ Tropical on Rails
irinanazarova
0
200
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
340
AIエージェント開発における「攻めの品質改善」と「守りの品質保証」 / 2024.04.09 GPU UNITE 新年会 2025
smiyawaki0820
0
310
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
20k
SREが実現する開発者体験の革新
sansantech
PRO
0
140
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.4k
「ラベルにとらわれない」エンジニアでいること/Be an engineer beyond labels
kaonavi
0
230
やさしいMCP入門
minorun365
PRO
141
85k
Featured
See All Featured
Faster Mobile Websites
deanohume
306
31k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Done Done
chrislema
183
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
KATA
mclloyd
29
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
GitHub's CSS Performance
jonrohan
1030
460k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Transcript
Roconで実現する 超型安全なルーティング UIT meetup vol.11『フロントエンド紅⽩LT合戦』 uhyo
About Speaker uhyo LINEのフロントエンドエンジニア TypeScriptとReactが主な武器 登壇するといつも型安全性の話をする
ルーティングライブラリとは? ブラウザのアドレスバー https://uit-inside.linecorp.com/ HTML5 History API history + react-router vue-router
Next.js next/router <Route path=“/foo”> <FooPage /> </Route> <Route path=“/bar”> <BarPage /> </Route> VueRouter({ routes: [{ path: “/foo”, component: FooPage }, …] }) pages/foo.tsx pages/bar.tsx HTML5 History API
画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム⼊⼒ 画像アップロード 確認画⾯ ※計測周りの要件で全画⾯のURLが違ったりする フォーム データ
フォーム データ 画像 データ
画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ
• グローバルなステートに⼊れる 型安全 ステート設計の悪化 再読み込みすると消える・戻る/進むに耐えられない 簡単
画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ
• URLに⼊れる パーマネントなURLになる ⼩さいデータ向け 型で制限できない /:param/foo?hello=world
画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ
• URLに⼊れる パーマネントなURLになる ⼩さいデータ向け 型で制限できない /:param/foo?hello=world ةݥ
画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ
• History Stateに⼊れる 再読み込み・戻る/進む に耐える URLには⼊らない 型で制限できない
画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ
• History Stateに⼊れる 再読み込み・戻る/進む に耐える URLには⼊らない 型で制限できない ةݥ
画⾯遷移を発⽣させるコード • コンポーネント型 // react-router・Next.js <Link href=“/uhyo/?hell=world”> Pika! </Link> //
vue-router <router-link to=“/masao?hello=world”> Pika! </router-link> • API型 // react-router history.push({ pathname: “/uhyo”, state: { hello: “world” } });
画⾯遷移を発⽣させるコード • コンポーネント型 // react-router・Next.js <Link href=“/uhyo/?hell=world”> Pika! </Link> //
vue-router <router-link to=“/masao?hello=world”> Pika! </router-link> • API型 // react-router history.push({ pathname: “/uhyo”, state: { hello: “world” } }); typo 誰? 渡し⽅間違えた
画⾯遷移を発⽣させるコード • コンポーネント型 // react-router・Next.js <Link href=“/uhyo/?hell=world”> Pika! </Link> //
vue-router <router-link to=“/masao?hello=world”> Pika! </router-link> • API型 // react-router history.push({ pathname: “/uhyo”, state: { hello: “world” } }); typo 誰? 渡し⽅間違えた ةݥ
遷移フローが複雑になるととてもつらい
全ての危険性をRoconで克服する Rocon (ロゴ描いてくれる⽅募集中) 安全第⼀に作られたルーティングライブラリ ⽂字列ベースのルーティング定義を脱却、Builderパターンを採⽤ params, query
string, history stateを抽象化したインターフェース Routeオブジェクトの導⼊によりページ遷移も型安全に わたしが 作りました
Roconでのルート定義 Rocon Routesオブジェクトを組み⽴てる 既存ライブラリ ⽂字列/ファイルシステムベースの 定義
Roconでのルート定義 Rocon ?hello=xxx や history stateも ルート定義の⼀部 既存ライブラリ ?hello=xxx や
history stateは コンポーネント内で取得 ةݥ ▼ /bar?hello=xxx の定義
Roconでのページ遷移 Rocon 遷移先ルートのRouteオブジェクトを使⽤ searchやhistory stateは matchオブジェクトとして抽象化 既存ライブラリ search や history
stateは⽂字列や ⽣データで指定
Roconでのページ遷移 Rocon 与えるデータを間違えると型エラー 既存ライブラリ 与えるデータを間違えても 怒られない ةݥ
Roconの安全性 ⽂字列ベースのルート定義をやめたことで 豊富な型情報を利⽤可能になった ルート定義とルートへの遷移で同じ対象(Routeオブジェクト)に 依存することでページ遷移の安全性を実現した
悩み RoconによりReactユーザーは型安全な世界を⼿に⼊れた Vue版は提供していないが多分作れる? しかしNext/Nuxtユーザーをٹࡁできない…… ファイルシステムベースのルーティングをopt-outできない ⽂字列ベースと同じくらい危険
まとめ ルーティングがどれだけ危険か分かりましたか? Roconでルーティングも型安全なReactアプリ開発をしよう (複数の⼊⼒⼿段がmatch objectに抽象化されるのも良い点) Twemoji by Twitter, Inc and
other contributors ‒ CC-BY 4.0