ReactNative アプリ同士の通信のために型情報をサクッと共有した話 #TSKaigi サブイベント

https://typescript-jpc.connpass.com/event/325001/

Transcript

1. ReactNative アプリ同士の通信のために 型情報をサクッと共有した話 1 Shota Hatada / whatasoda 1
2. 株式会社dinii Platform Team / Software Engineer ex. mercari / Frontend Engineer • Google Cloud でのインフラの整備・メンテ • Backend（NestJS）や Client （React, React Native）の基盤実装 好きなこと・もの • TypeScript • スパラクーア（サウナ・岩盤浴） • アニメ Shota Hatada / whatasoda
3. アプリ同士で通信する理由 3 3
4. ダイニーが目指す世界 4 “飲⾷”をもっと 楽しくおもしろく Mission すべての⼈の “飲⾷”インフラになる Vision 全ての中心に ID-POS がある
5. 障害が起きても動いている必要がある 5
6. 6 普段はインターネット経由で注文をサーバーに送信 （モバイルオーダー・ハンディ・レジ） インターネット経由でキッチンに注文を伝達
7. 普段はインターネット経由で注文をサーバーに送信 （モバイルオーダー・ハンディ・レジ） インターネット経由でキッチンに注文を伝達 7 障害発生時には… 店舗内ネットワークだけでどうにかする必要がある • キッチンプリンター → SDK で通信できる • ハンディ → 独自で通信方法が必要
8. HTTP vs TCP 8 8
9. HTTP vs TCP HTTP ☺ 慣れ親しんだ HTTP くん。雑に JSON を送って JSON を受け取れる 😭 実用に足るライブラリがなかったので内製が必要 ☺ API の型情報を共有する方法は多い（OpenAPI, GraphQL, etc.） TCP 😭 データのチャンクをどのようにパースするかは自力での実装が必要 ☺ ライブラリがあったのでそのまま使える (Rapsssito/react-native-tcp-socket) 😭 API の型情報の共有も自力でどうにかする必要がある 9
10. 同じ型、違う実装 10 10
11. 無理やり同じインターフェイスにしてしまう 11 • ハンディがレジ内部の関数をそのまま呼び出すような体験にしたい（間の TCP 通信を感じさせない） • レジの実装のインターフェイスをハンディの実装に上から被せてしまう（Type Cast） • Swatinem/rollup-plugin-dts でバンドルされた型ファイルを生成する
13. 13 • 1つの関数として定義をまとめることで、 追加のアクションが実装されても基盤部分への変更が不要になる • DispatcherType を抽出してハンディ側に共有 • ハンディでも TCP 通信を利用してリクエストを送る実装を 似た形で記述して上から型を被せてしまう
15. rollup-plugin-dts vs dts-bundle-generator 15 他の類似ツールはこちらでも紹介されています https://github.com/Swatinem/rollup-plugin-dts#alternatives timocov/dts-bundle-generator • 完全に単体で動作するため簡単にセットアップできてスッキリ • rollup-plugin-dts とほぼ同じことができるが、他のツールとの組み合わせはコマンドの組み合わせになる • ダイニーでは hono client にサーバー側の型情報を伝えるとき、クライアント側で余計な依存をインストール しないで済むように型だけ抽出していた（PoC 的な開発で使っていました） Swatinem/rollup-plugin-dts • 複数ファイルに定義されたものを1つの .d.ts ファイルに • rollup のインストールや config ファイルの作成が必要 • prettier などの他のプラグインと組み合わせることができ る
16. https://dinii.connpass.com/event/325689/
17. https://zenn.dev/dinii/articles/82681cabc82809