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.4k
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.3k
Java 21 Overview
line_developers
6
1.2k
Code Review Challenge: An example of a solution
line_developers
1
1.3k
KARTEのAPIサーバ化
line_developers
1
540
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
5
2.2k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
3
2.1k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
9
3.5k
A/B Testing at LINE NEWS
line_developers
3
980
LINEのサポートバージョンの考え方
line_developers
2
1.3k
Other Decks in Technology
See All in Technology
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
48
19k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.2k
OPENLOGI Company Profile for engineer
hr01
1
34k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.6k
Connect 100+を支える技術
kanyamaguc
0
200
Claude Code に プロジェクト管理やらせたみた
unson
6
4k
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
AWS認定を取る中で感じたこと
siromi
1
190
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
140
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Speed Design
sergeychernyshev
32
1k
Unsuck your backbone
ammeep
671
58k
YesSQL, Process and Tooling at Scale
rocio
173
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Gamification - CAS2011
davidbonilla
81
5.4k
A Tale of Four Properties
chriscoyier
160
23k
Making Projects Easy
brettharned
116
6.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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