Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Roconで実現する超型安全なルーティング / Super Type-safe routing with Rocon
LINE Developers
PRO
December 18, 2020
Technology
4
2.6k
Roconで実現する超型安全なルーティング / Super Type-safe routing with Rocon
uhyo (LINE株式会社)
UIT meetup vol.11『フロントエンド紅白LT合戦』での発表資料です
https://uit.connpass.com/event/197740/
LINE Developers
PRO
December 18, 2020
Tweet
Share
More Decks by LINE Developers
See All by LINE Developers
テクニカルライティングの検定を受けてみた話 / "My Story About Taking the Technical Writing Exam
line_developers
PRO
1
180
ぼくらが選んだ次のMySQL 8.0 / MySQL80 Which We Choose
line_developers
PRO
7
2.7k
バッファープールが大きいMySQL v5.7でDROP DATABASEが詰まった原因と対策 / Causes and Remedies for DROP DATABASE Stuck in MySQL v5.7 with Large Buffer Pool
line_developers
PRO
4
690
LINEをdual stack環境に変更した話
line_developers
PRO
0
80
日本人が英語でやりがちな失敗 / Common mistakes in English that Japanese people tend to make
line_developers
PRO
4
500
”Change”our private cloud infrastructures from single-AZ to Multi-AZs
line_developers
PRO
0
96
"Change" our private cloud infrastructures from single-AZ to multi-AZs Backbone Network part
line_developers
PRO
1
58
How to Support Multi-AZs in NFV Services
line_developers
PRO
0
42
プライベートクラウドのMulti-AZsサポートとキャパシティ管理
line_developers
PRO
0
49
Other Decks in Technology
See All in Technology
モノリシックサービスのレガシーインフラをEKSに移行するにあたり、他マイクロサービスと共通化した部分としなかった部分
andpad
0
170
EC/CRMの自社サービス開発をマネジメントするようになって1年でやってきたこととこれから / devio2022-takano-sho-road-to-good-development-team-management
masaru_b_cl
0
370
What for, Where and How to Adopt MIDI 2.0
atsushieno
0
150
データ分析のためのAWS Well-Architected -Data Analytics Lens-
maru1981
0
220
年90回以上のアップデートを実現する、Backlogを使ったスクラム開発
yoshiteruiwasaki
0
380
フィンテック養成勉強会#24
finengine
0
320
ロボットの実行すらメンドクサイ!?
kou12092
0
100
AWSを始める人に向けた7つの大切なこと / 7 tips for AWS beginners
hiranofumio
1
620
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
19k
Backlog × RPAでいろいろ捗った話
z_tetsu
0
370
eBPF-based Container Networking
johnlin
2
1.1k
インフラのテストに VPC Reachability Analyzer は外せないという話
nulabinc
PRO
2
670
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Practical Orchestrator
shlominoach
178
8.7k
Atom: Resistance is Futile
akmur
255
20k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Bash Introduction
62gerente
598
210k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Raft: Consensus for Rubyists
vanstee
127
5.5k
The Language of Interfaces
destraynor
148
21k
Robots, Beer and Maslow
schacon
152
7.1k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.7k
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