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
ReactNative アプリ同士の通信のために型情報をサクッと共有した話 #TSKaigi...
Search
whatasoda
August 06, 2024
Technology
1
950
ReactNative アプリ同士の通信のために型情報をサクッと共有した話 #TSKaigi サブイベント
https://typescript-jpc.connpass.com/event/325001/
whatasoda
August 06, 2024
Tweet
Share
More Decks by whatasoda
See All by whatasoda
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
410
NestJS で 重たい処理と軽い処理が 干渉しないようにデプロイするには
whatasoda
1
310
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
310
GraphQL でネストしたクエリを書いたら Apollo Client が無限に計算し続けるようになった話
whatasoda
0
540
Other Decks in Technology
See All in Technology
生成AI時代における人間の情熱とプロダクト志向 / 20250517 Takuya Oikawa
shift_evolve
2
510
変化に強いテーブル設計の勘所 / Table design that is resistant to changes
soudai
36
9.4k
2年かけてSONiCコミュニティにマージされた話
sonic
0
110
KubeCon EU 2025 Recap - Kubernetes CRD Design for the Long Haul: Tips, Tricks, and Lessons Learned / Kubernetes Meetup Tokyo #70 / k8sjp70-crd-long-haul-recap
everpeace
0
110
計装を見直してアプリケーションパフォーマンスを改善させた話
donkomura
2
230
若手中心の内製アジャイル開発で研究開発に挑戦 / 20250517 Nobuhiro Kawamura & Dami Lee & Tomohiko Tanikawa
shift_evolve
1
280
MagicPod MCPサーバー開発の裏側とAIエージェント活用の展望
magicpod
0
330
熱々🔥のUDN🍜を喰らえ❗マルチテナントもVM統合も思いのまま❗新機能で切り拓くk8sネットワークの未来
tsukaman
0
160
技術的負債を「戦略的投資」にするためのPdMとエンジニアの連携と実践
satomino
4
870
Type Challengesに新しい問題を追加して Type ChallengesのMaintainerになった話
ysknsid25
3
460
Platform Engineering for Private Cloud
cote
PRO
1
170
インフラからSREへ
mirakui
20
8k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
810
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
How GitHub (no longer) Works
holman
314
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Code Reviewing Like a Champion
maltzj
523
40k
Transcript
ReactNative アプリ同士の通信のために 型情報をサクッと共有した話 1 Shota Hatada / whatasoda 1
株式会社dinii Platform Team / Software Engineer ex. mercari / Frontend
Engineer • Google Cloud でのインフラの整備・メンテ • Backend(NestJS)や Client (React, React Native)の基盤実装 好きなこと・もの • TypeScript • スパラクーア(サウナ・岩盤浴) • アニメ Shota Hatada / whatasoda
アプリ同士で通信する理由 3 3
ダイニーが目指す世界 4 “飲⾷”をもっと 楽しくおもしろく Mission すべての⼈の “飲⾷”インフラになる Vision 全ての中心に ID-POS
がある
障害が起きても動いている必要がある 5
6 普段はインターネット経由で注文をサーバーに送信 (モバイルオーダー・ハンディ・レジ) インターネット経由でキッチンに注文を伝達
普段はインターネット経由で注文をサーバーに送信 (モバイルオーダー・ハンディ・レジ) インターネット経由でキッチンに注文を伝達 7 障害発生時には… 店舗内ネットワークだけでどうにかする必要がある • キッチンプリンター → SDK
で通信できる • ハンディ → 独自で通信方法が必要
HTTP vs TCP 8 8
HTTP vs TCP HTTP ☺ 慣れ親しんだ HTTP くん。雑に JSON を送って
JSON を受け取れる 😭 実用に足るライブラリがなかったので内製が必要 ☺ API の型情報を共有する方法は多い(OpenAPI, GraphQL, etc.) TCP 😭 データのチャンクをどのようにパースするかは自力での実装が必要 ☺ ライブラリがあったのでそのまま使える (Rapsssito/react-native-tcp-socket) 😭 API の型情報の共有も自力でどうにかする必要がある 9
同じ型、違う実装 10 10
無理やり同じインターフェイスにしてしまう 11 • ハンディがレジ内部の関数をそのまま呼び出すような体験にしたい(間の TCP 通信を感じさせない) • レジの実装のインターフェイスをハンディの実装に上から被せてしまう(Type Cast) •
Swatinem/rollup-plugin-dts でバンドルされた型ファイルを生成する
12
13 • 1つの関数として定義をまとめることで、 追加のアクションが実装されても基盤部分への変更が不要になる • DispatcherType を抽出してハンディ側に共有 • ハンディでも TCP
通信を利用してリクエストを送る実装を 似た形で記述して上から型を被せてしまう
14
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 などの他のプラグインと組み合わせることができ る
https://dinii.connpass.com/event/325689/
https://zenn.dev/dinii/articles/82681cabc82809