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
140
tRPC入門
is_ryo
May 09, 2024
Tweet
Share
More Decks by is_ryo
See All by is_ryo
TypeScriptでWebAssemblyに入門しよう
is_ryo
0
120
Honoが良さそう🔥
is_ryo
1
840
LambdaのNodejsをアップデートしたら困った話
is_ryo
2
1.2k
頑張らないオレオレVuex規約を作った話
is_ryo
4
2.5k
AppSyncで始めるGraphQL
is_ryo
1
570
Other Decks in Technology
See All in Technology
開発者体験を意識した開発チームの生産性向上の取り組み
ham0215
3
650
FastlyとfalcoでNode.jsレスな Webサーバー構築 : IPTV版 ABEMAアプリインフラ刷新 / Building web server using Fastly and falco without Node.js for IPTV ABEMA app
nodaguti
0
240
エンジニア採用ノウハウ0から継続的な採用に至るまで / Try recruiting engineers
ohageeq
0
130
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4k
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
180
APIのドキュメント化何使ってますか?
miu_crescent
2
160
AWS版GitHub?Amazon CodeCatalystの全体像をまとめてみた
oshanqq
1
3.2k
【Λ(らむだ)最近のアプデ情報 / RPALT20240904
lambda
0
160
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
280
React Aria で実現する次世代のアクセシビリティ
ryo_manba
3
290
FastConnect の冗長性
ocise
0
7.1k
夏休みの(最後の)宿題 for JuliaTokyo #12
antimon2
0
130
Featured
See All Featured
Designing for humans not robots
tammielis
248
25k
The World Runs on Bad Software
bkeepers
PRO
64
11k
The Cult of Friendly URLs
andyhume
76
5.9k
Writing Fast Ruby
sferik
623
60k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
Making Projects Easy
brettharned
113
5.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
46
48k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
25
1.3k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
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!!!