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
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
210
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
200
ビギナーであり続ける/beginning
ikuodanaka
3
760
LLM時代の検索
shibuiwilliam
2
180
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
240
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
260
Featured
See All Featured
A better future with KSS
kneath
238
17k
Fireside Chat
paigeccino
37
3.5k
Automating Front-end Workflow
addyosmani
1370
200k
Bash Introduction
62gerente
613
210k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Six Lessons from altMBA
skipperchong
28
3.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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!!!