Roconで実現する超型安全なルーティング / Super Type-safe routing with Rocon

Transcript

1. Roconで実現する 超型安全なルーティング UIT meetup vol.11『フロントエンド紅⽩LT合戦』 uhyo

2. About Speaker uhyo –LINEのフロントエンドエンジニア –TypeScriptとReactが主な武器 –登壇するといつも型安全性の話をする

3. ルーティングライブラリとは？ ブラウザのアドレスバー 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

4. 画⾯間のデータ受け渡し、どうしてますか？ 画⾯1 画⾯2 画⾯3 フォーム⼊⼒ 画像アップロード 確認画⾯ ※計測周りの要件で全画⾯のURLが違ったりする フォーム データ

   フォーム データ 画像 データ

5. 画⾯間のデータ受け渡し、どうしてますか？ 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ

   • グローバルなステートに⼊れる 型安全 ステート設計の悪化 再読み込みすると消える・戻る/進むに耐えられない 簡単

6. 画⾯間のデータ受け渡し、どうしてますか？ 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ

   • URLに⼊れる パーマネントなURLになる ⼩さいデータ向け 型で制限できない /:param/foo?hello=world

7. 画⾯間のデータ受け渡し、どうしてますか？ 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ

   • URLに⼊れる パーマネントなURLになる ⼩さいデータ向け 型で制限できない /:param/foo?hello=world ةݥ

8. 画⾯間のデータ受け渡し、どうしてますか？ 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ

   • History Stateに⼊れる 再読み込み・戻る/進む に耐える URLには⼊らない 型で制限できない

9. 画⾯間のデータ受け渡し、どうしてますか？ 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ

   • History Stateに⼊れる 再読み込み・戻る/進む に耐える URLには⼊らない 型で制限できない ةݥ

10. 画⾯遷移を発⽣させるコード • コンポーネント型 // 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” } });

11. 画⾯遷移を発⽣させるコード • コンポーネント型 // 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 誰？ 渡し⽅間違えた

12. 画⾯遷移を発⽣させるコード • コンポーネント型 // 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 誰？ 渡し⽅間違えた ةݥ

13. 遷移フローが複雑になるととてもつらい

14. 全ての危険性をRoconで克服する Rocon （ロゴ描いてくれる⽅募集中） – 安全第⼀に作られたルーティングライブラリ – ⽂字列ベースのルーティング定義を脱却、Builderパターンを採⽤ – params, query

    string, history stateを抽象化したインターフェース – Routeオブジェクトの導⼊によりページ遷移も型安全に わたしが 作りました

15. Roconでのルート定義 Rocon Routesオブジェクトを組み⽴てる 既存ライブラリ ⽂字列/ファイルシステムベースの 定義

16. Roconでのルート定義 Rocon ?hello=xxx や history stateも ルート定義の⼀部 既存ライブラリ ?hello=xxx や

    history stateは コンポーネント内で取得 ةݥ ▼ /bar?hello=xxx の定義

17. Roconでのページ遷移 Rocon 遷移先ルートのRouteオブジェクトを使⽤ searchやhistory stateは matchオブジェクトとして抽象化 既存ライブラリ search や history

    stateは⽂字列や ⽣データで指定

18. Roconでのページ遷移 Rocon 与えるデータを間違えると型エラー 既存ライブラリ 与えるデータを間違えても 怒られない ةݥ

19. Roconの安全性 –⽂字列ベースのルート定義をやめたことで 豊富な型情報を利⽤可能になった –ルート定義とルートへの遷移で同じ対象（Routeオブジェクト）に 依存することでページ遷移の安全性を実現した

20. 悩み –RoconによりReactユーザーは型安全な世界を⼿に⼊れた –Vue版は提供していないが多分作れる？ –しかしNext/Nuxtユーザーをٹࡁできない…… – ファイルシステムベースのルーティングをopt-outできない – ⽂字列ベースと同じくらい危険

21. まとめ –ルーティングがどれだけ危険か分かりましたか？ –Roconでルーティングも型安全なReactアプリ開発をしよう （複数の⼊⼒⼿段がmatch objectに抽象化されるのも良い点） Twemoji by Twitter, Inc and

    other contributors ‒ CC-BY 4.0