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
1.1k
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
950
NestJS で 重たい処理と軽い処理が 干渉しないようにデプロイするには
whatasoda
1
660
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
340
GraphQL でネストしたクエリを書いたら Apollo Client が無限に計算し続けるようになった話
whatasoda
0
600
Other Decks in Technology
See All in Technology
AWSにおけるTrend Vision Oneの効果について
shimak
0
120
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
hypermkt
0
2.1k
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
20250929_QaaS_vol20
mura_shin
0
110
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
710
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
290
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
130
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
120
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
o11yで育てる、強い内製開発組織
_awache
3
110
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Six Lessons from altMBA
skipperchong
28
4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Raft: Consensus for Rubyists
vanstee
139
7.1k
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