Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

More Decks by LINE Developers

Other Decks in Technology

Transcript

  1. ルーティングライブラリとは? ブラウザのアドレスバー 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
  2. 画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ

    • グローバルなステートに⼊れる 型安全 ステート設計の悪化 再読み込みすると消える・戻る/進むに耐えられない 簡単
  3. 画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ

    • URLに⼊れる パーマネントなURLになる ⼩さいデータ向け 型で制限できない /:param/foo?hello=world
  4. 画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ

    • URLに⼊れる パーマネントなURLになる ⼩さいデータ向け 型で制限できない /:param/foo?hello=world ةݥ
  5. 画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ

    • History Stateに⼊れる 再読み込み・戻る/進む に耐える URLには⼊らない 型で制限できない
  6. 画⾯間のデータ受け渡し、どうしてますか? 画⾯1 画⾯2 画⾯3 フォーム データ フォーム データ 画像 データ

    • History Stateに⼊れる 再読み込み・戻る/進む に耐える URLには⼊らない 型で制限できない ةݥ
  7. 画⾯遷移を発⽣させるコード • コンポーネント型 // 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” } });
  8. 画⾯遷移を発⽣させるコード • コンポーネント型 // 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 誰? 渡し⽅間違えた
  9. 画⾯遷移を発⽣させるコード • コンポーネント型 // 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 誰? 渡し⽅間違えた ةݥ
  10. Roconでのルート定義 Rocon ?hello=xxx や history stateも ルート定義の⼀部 既存ライブラリ ?hello=xxx や

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