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
tRPC入門
Search
is_ryo
May 09, 2024
Technology
1
260
tRPC入門
is_ryo
May 09, 2024
Tweet
Share
More Decks by is_ryo
See All by is_ryo
生成AIとエンジニアの仕事と私~実践知を添えて~
is_ryo
0
63
Unknownのことをちゃんと知りたい_関西フロントエンド忘年会
[email protected]
× KINTOテクノロジーズ
is_ryo
0
24
TypeScriptでWebAssemblyに入門しよう
is_ryo
0
270
Honoが良さそう🔥
is_ryo
1
1.1k
LambdaのNodejsをアップデートしたら困った話
is_ryo
2
1.3k
頑張らないオレオレVuex規約を作った話
is_ryo
4
2.7k
AppSyncで始めるGraphQL
is_ryo
1
620
Other Decks in Technology
See All in Technology
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
200
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
360
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
ビギナーであり続ける/beginning
ikuodanaka
3
760
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
22k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
150
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
16k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Done Done
chrislema
184
16k
Building Applications with DynamoDB
mza
95
6.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
4 Signs Your Business is Dying
shpigford
184
22k
Six Lessons from altMBA
skipperchong
28
3.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
GitHub's CSS Performance
jonrohan
1031
460k
Facilitating Awesome Meetings
lara
54
6.4k
What's in a price? How to price your products and services
michaelherold
246
12k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Transcript
tRPC入門 フロントもバックもTypeScriptならtRPCでスキーマ定義して最高の開発体験を 手に入れよう 2024/05/09 kansai.ts#6
いづりょー #EngineeringManager #SoftwareEngineer #React #TypeScript #Rust入門中 #Sprocket #Web接客 X →
@is_ryo bsky → @is-ryo.bsky.social
今日は tRPC について話します
※tRPC@11-RCのバージョンでのお話に なります
tRPCとは? • tRPCとは、TypeScript Remote Procedure Callの略 • REST APIやGraphQLの代替として注目されている •
ただし、フロントエンドとバックエンドともにTypeScriptを採用する必要がある ◦ 実装言語、フレームワークの自由度が無い • サーバサイドで定義した関数の引数と戻り値がクライアントサイドに自動で共有さ れる ◦ クライアントの実装で型エラーを吐いてくれるので、型安全な実装ができる • バックエンドで関数を定義して、クライアントで呼ぶだけで良い
なぜtRPCなのか? • APIのスキーマ定義としてよく利用されるOpenAPIやGraphQLは何かし らの定義ファイルを間に用意して、フロントとバックでそれぞれ定義ファイ ルを読み込んで、そこから型情報などを生成する • ただこの定義ファイルの取り扱いに難儀することがあると思う(個人的にか なり難儀している) • tRPCではこの定義ファイルを持つ必要がなく、バックエンドのコードそのも
のが定義ファイルの役割をしてくれるという代物
始め方はとても簡 単 • npm init • npm i @trpc/server zod
• touch index.ts • npx ts-node index.ts
フロントで型をどう 扱うか① ※Reactで使う例 バックエンド側のAppRouter をimportして createTRPCReactの GenericsにAppRouterの typeを入れてClientを作る trpc.ts
フロントで型をどう 扱うか② App.tsxでProviderの設定を する。 App.tsx
フロントで型をどう 扱うか③ 作成したClientを使ってQuery したりMutateしたりする。 型補完が効くので、レスポンス の方やリクエストボディの型な どがすぐにわかる。嬉しい。 Index.tsx
フロントで型をどう 扱うか④ レスポンスの型を知りたい時は レスポンスの型を知りたい時は trpc.tsで宣言した RouterOutputsを使うことで、 レスポンスの型を取れる。 PropsにtRPCのレスポンスを 渡したいときに役立つ。嬉し い。
Child.tsx
これでtRPCを利用できる状態になった
なったけど……
認証の仕組みは必須だよね? だから調べてみた
Tokenで認証した い① middlewareを使って認証す ることができる。 こんな風にContextHandler を作って→ context.ts
Tokenで認証した い② middlewareを使って認証す ることができる。 Router起動するところで middlewareに指定する→ ※このときExpressのアダプ ターを使わないといけないので 注意。 index.ts
Tokenで認証した い③ 個別に認証を走らせたい場合 は、procedureを別で用意す ることもできる。 Contextでheaderの値を procedureに渡すようにして→ context.ts
Tokenで認証した い④ 認証をするためのprocedure を作成して、Routerでこの authProcedureを使うことで、 そのエンドポイントでは認証を することができる trpc.ts
Tokenで認証した い⑤ フロントからのリクエストヘッ ダーにTokenを入れたい場合 は、trpcClientを作るところで headersにTokenを入れるよう にできる。 App.tsx
まとめ • tRPCを使うとスキーマファイルの管理から解放される • ただフロントもバックもTSであることという制約がある • 最近フロントもバックもTSでいいのでは?という派閥があるので、その派 閥の方々には特におすすめしたい • React用のエコシステムが整備されているので、とても導入しやすい
• tRPCを動かす環境ごとにアダプターが用意されている ◦ ExpressとかNextとかとか
Thanks!!!