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
gRPCとフロントエンド_Connectを添えて
Search
sugar-cat
October 17, 2023
Technology
4
2.3k
gRPCとフロントエンド_Connectを添えて
sugar-cat
October 17, 2023
Tweet
Share
More Decks by sugar-cat
See All by sugar-cat
ErrorTrackingとOrchestrion
sugarcat7
0
260
DiscordとCloudflare
sugarcat7
1
280
Cloudflare Workflowsを使いたい倒したい
sugarcat7
6
1.5k
tslogで実現するセキュアなメタデータ管理とロギング
sugarcat7
4
1.3k
最近個人開発が熱い ~モニタリング強化編v0.1.0~
sugarcat7
3
420
Honoで実現するバックエンド開発のイマ
sugarcat7
23
5.5k
GoとWASI~超入門~
sugarcat7
2
240
最近個人開発が熱い ~多言語対応編~
sugarcat7
2
330
ボイラープレート自動生成ツールを使わなくなった話.pdf
sugarcat7
4
650
Other Decks in Technology
See All in Technology
ビギナーであり続ける/beginning
ikuodanaka
3
750
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
190
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7k
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
360
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
gRPCとフロントエンド ~Connectを添えて~ 2023/10/17 UV Study : フロントエンド LT会 @sugar235711
2 Sugar(@sugar235711) 株式会社AI Shift サーバーサイドエンジニア 普段はGoを書いてます。 フロントエンドはAngularが好きです。 登壇者紹介
3 Agenda 1. スキーマ駆動開発 1.1. スキーマ駆動開発とは 1.2. IDL 2. gRPC
on Web 2.1. gRPCとは 2.2. gRPCをWebブラウザで使う 3. Connect 3.1. 概要 4. Connect-Web 4.1. コード生成 4.2. React/Next.jsにおけるデータフェッチ(Client) 4.3. React/Next.jsにおけるデータフェッチ(Server)
4 スキーマ(仕様書)を最初に定義し、その定義をもとに開発を同時に進めるという開発手法 • クライアントとサーバーを非同期で開発可能 • 型やインターフェースの自動生成が可能 1.1 スキーマ駆動開発とは 1.スキーマ駆動開発 1.
スキーマの定義/認識合わせ 2. スタブの生成 3. 実装・単体テスト 4. 結合テスト 5. リリース
5 2023年現在使用される代表的なIDL 1.2 IDL(インターフェース記述言語) 1.スキーマ駆動開発 設計指針 RPC Protocol Buffers REST
OpenAPI 記述形式 Protobuf JSON/Yaml コード生成 Protoc Compoler Connect OpenAPI Generator Swagger Codegen - GraphQL クエリ言語(環境による) Graphql Code Generator
6 2023年現在使用される代表的なIDL 1.2 IDL(インターフェース記述言語) 1.スキーマ駆動開発 設計指針 RPC Protocol Buffers REST
OpenAPI 記述形式 Protobuf JSON/Yaml コード生成 Protoc Compoler Connect OpenAPI Generator Swagger Codegen - GraphQL クエリ言語(環境による) Graphql Code Generator ➢ クライアント - サーバ間通信は大部分が REST
7 2023年現在使用される代表的なIDL 1.2 IDL(インターフェース記述言語) 1.スキーマ駆動開発 設計指針 RPC Protocol Buffers REST
OpenAPI 記述形式 Protobuf JSON/Yaml コード生成 Protoc Compoler Connect OpenAPI Generator Swagger Codegen - GraphQL クエリ言語(環境による) Graphql Code Generator ➢ クライアント - サーバ間通信は大部分が REST ◦ REST✖スキーマ駆動で開発を進めると YAMLを書くことになる。 ▪ 単純に読みづらい。肥大化しやすい。つらい。
8 2023年現在使用される代表的なIDL 1.2 IDL(インターフェース記述言語) 1.スキーマ駆動開発 設計指針 RPC Protocol Buffers REST
OpenAPI 記述形式 Protobuf JSON/Yaml コード生成 Protoc Compoler Connect OpenAPI Generator Swagger Codegen - GraphQL クエリ言語(環境による) Graphql Code Generator ➢ クライアント - サーバ間通信は大部分が REST ◦ REST✖スキーマ駆動で開発を進めると Yamlを書くことになる。 ▪ 単純に読みづらい。肥大化しやすい。つらい。 →シンプルにスキーマを定義できる ProtobufでgRPCを定義したい
9 2.1 gRPCとは 2.gRPC on Web • HTTP/2, バイナリベースのRPCフレームワーク(Google産) •
シリアライズによってサーバー間の通信量を削減可能 • 幅広な言語のサポート(Go, Java, Node…) • IDLの定義に沿って言語ごとのコード生成ができる ◦ 生成されたコードは型安全 • 4つの通信方式が利用可能 ◦ Unary RPC ◦ Server streaming RPC ◦ Client streaming RPC ◦ Bidirectional streaming RPC https://grpc.io/
10 2.1 gRPCとは 2.gRPC on Web • HTTP/2, バイナリベースのRPCフレームワーク(Google産) •
シリアライズによってサーバー間の通信量を削減可能 • 幅広な言語のサポート(Go, Java, Node…) • IDLの定義に沿って言語ごとのコード生成ができる ◦ 生成されたコードは型安全 • 4つの通信方式が利用可能 ◦ Unary RPC ◦ Server streaming RPC ◦ Client streaming RPC ◦ Bidirectional streaming RPC ➢ Webブラウザでも使えるの?🧐
11 2.1 gRPCとは 2.gRPC on Web • HTTP/2, バイナリベースのRPCフレームワーク(Google産) •
シリアライズによってサーバー間の通信量を削減可能 • 幅広な言語のサポート(Go, Java, Node…) • IDLの定義に沿って言語ごとのコード生成ができる ◦ 生成されたコードは型安全 • 4つの通信方式が利用可能 ◦ Unary RPC ◦ Server streaming RPC ◦ Client streaming RPC ◦ Bidirectional streaming RPC ➢ Webブラウザでも使えるの?🧐 機能を制限すれば使える
12 2.2 gRPCをWebブラウザで使う 2.gRPC on Web 代表的なライブラリの実装方針 : 1. gRPC
Webに対応させる 2. 何らかの手段で、HTTP APIにマッピングする
13 2.2 gRPCをWebブラウザで使う 2.gRPC on Web 代表的なライブラリの実装方針 : 1. gRPC
Webに対応させる ◦ プロキシ(Envoy等)経由でgRPCが使える様になる → gRPC-Web 2. 何らかの手段で、HTTP APIにマッピングする
14 2.2 gRPCをWebブラウザで使う 2.gRPC on Web 代表的なライブラリの実装方針 : 1. gRPC
Webに対応させる ◦ プロキシ(Envoy等)経由でgRPCが使える様になる → gRPC-Web 2. 何らかの手段で、HTTP APIにマッピングする ◦ RPC定義から自動マッピングする → Connect ◦ 自力でマッピングする →gRPC-Gateway
15 2.2 gRPCをWebブラウザで使う 2.gRPC on Web 代表的なライブラリの実装方針 : 1. gRPC
Webに対応させる ◦ プロキシ(Envoy等)経由でgRPCが使える様になる → gRPC-Web 2. 何らかの手段で、HTTP APIにマッピングする ◦ RPC定義から自動マッピングする → Connect ◦ 自力でマッピングする →gRPC-Gateway
16 3.1 概要 3.Connect ブラウザとgRPC互換のAPIを構築するためのライブラリ群 HTTP/1.1 または HTTP/2 で動作するシンプルな POST
プロトコルをサポート https://connectrpc.com/
17 3.1 概要 3.Connect 各言語のプラグインが用意されており、 Protoベースでコードを生成できる
18 3.1 概要 3.Connect • gRPC, Connect, gRPC-Webの3つのプロトコルをサポート • Webから使用する場合にProxyが不必要
• オリジナルgRPCに比べてコードベースが小さい 詳しくは https://connectrpc.com/docs/introduction/
19 4.1 コード生成 4.Connect-Web スキーマを定義し、各種プラグインを組み合わせることで、リクエストやレスポンスの型やAPI Clientを生 成できる。(ProtoからFE/BE共にコードを自動生成し型安全な開発が可能)
20 4.2 React/Next.jsにおけるデータフェッチ(Client) 4.Connect React等を利用したClientSide fetchの環境では、 API ClientをfethcerとしてTanStack QueryやSWRと組み合わせることで、データのキャッシュも簡単 に行える(公式にTanStack
Queryに対するPluginが開発されている) • Connect WebではAPI Clientの扱いや各種Optionなども詳細にDocumentに記載されている ◦ Ex) API Clientを生成する際は再定義を防ぐために useMemoを使うことが推奨されている
21 4.2 React/Next.jsにおけるデータフェッチ(Client) 4.Connect TanStack Queryの場合: Connect-Query hookを使用することでシンプルに実装可能 (Connect-Query v.1.0までに変更がある可能性あり
) SWRの場合: 生成されたservice名をキーとしてfethcerにAPI Clientをセットする
22 4.3 React/Next.jsにおけるデータフェッチ(Server) 4.Connect RSCの利用を前提としたAppRouter環境ではデータフェッチの戦略が大きく変わった • 標準のfetch APIの利用が前提となっている
23 4.3 React/Next.jsにおけるデータフェッチ(Server) 4.Connect RSCの利用を前提としたAppRouter環境ではデータフェッチの戦略が大きく変わった • 標準のfetch APIの利用が前提となっている • NativeのfetchAPIをサポートしていないサードパティ製の
APIクライアントはAppRouter環境の ServerComponent内で扱いづらくなった ◦ キャッシュと再検証のタイミングの制御が難しい
24 4.3 React/Next.jsにおけるデータフェッチ(Server) 4.Connect RSCの利用を前提としたAppRouter環境ではデータフェッチの戦略が大きく変わった • 標準のfetch APIの利用が前提となっている • NativeのfetchAPIをサポートしていないサードパティ製の
APIクライアントはAppRouter環境の ServerComponent内で扱いづらくなった ◦ キャッシュと再検証のタイミングの制御が難しい ➔ fetch経由でConnect エンドポイントをURLベースのRESTっぽく叩きたい
25 4.3 React/Next.jsにおけるデータフェッチ(Server) 4.Connect fetch を使用しConnect エンドポイントを叩く • methodをPOSTとすることでパスベースのRESTと同じ形式でfetchが可能※ ※nextで拡張されたrevalidate
option等を利用可能 POSTにおける制約を受ける場合がある ▪ fetchリクエストはPOSTメソッドを使用する場合でも自動的にキャッシュされる ▪ RouteHandler内に対して実装した場合はキャッシュされない
26 まとめ • ConnectはgRPCをHTTP APIにマッピングしてくれるライブラリ • 対応言語と主要ライブラリのプラグインが充実しておりお手軽に試せる • AppRouter環境でもRESTfulなAPIとして一応使える •
フロントエンドのスキーマ駆動開発の一つの選択肢としてgRPCもアリかも?