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
66
Unknownのことをちゃんと知りたい_関西フロントエンド忘年会2024@HACK.BAR × KINTOテクノロジーズ
is_ryo
0
27
TypeScriptでWebAssemblyに入門しよう
is_ryo
0
270
Honoが良さそう🔥
is_ryo
1
1.1k
LambdaのNodejsをアップデートしたら困った話
is_ryo
2
1.3k
頑張らないオレオレVuex規約を作った話
is_ryo
4
2.8k
AppSyncで始めるGraphQL
is_ryo
1
620
Other Decks in Technology
See All in Technology
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
170
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
750
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
210
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
0
250
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.1k
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
270
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
190
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
150
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
390
PdM業務における使い分け
shinshiro
0
660
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.8k
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
160
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Practical Orchestrator
shlominoach
189
11k
Speed Design
sergeychernyshev
32
1k
Six Lessons from altMBA
skipperchong
28
3.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
How to Ace a Technical Interview
jacobian
278
23k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Adopting Sorbet at Scale
ufuk
77
9.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
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!!!