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
3
2k
gRPCとフロントエンド_Connectを添えて
sugar-cat
October 17, 2023
Tweet
Share
More Decks by sugar-cat
See All by sugar-cat
ErrorTrackingとOrchestrion
sugarcat7
0
27
DiscordとCloudflare
sugarcat7
1
150
Cloudflare Workflowsを使いたい倒したい
sugarcat7
6
1.1k
tslogで実現するセキュアなメタデータ管理とロギング
sugarcat7
4
960
最近個人開発が熱い ~モニタリング強化編v0.1.0~
sugarcat7
3
350
Honoで実現するバックエンド開発のイマ
sugarcat7
22
4.6k
GoとWASI~超入門~
sugarcat7
2
220
最近個人開発が熱い ~多言語対応編~
sugarcat7
2
250
ボイラープレート自動生成ツールを使わなくなった話.pdf
sugarcat7
4
560
Other Decks in Technology
See All in Technology
全文検索+セマンティックランカー+LLMの自然文検索サ−ビスで得られた知見
segavvy
2
130
Goで作って学ぶWebSocket
ryuichi1208
3
2.3k
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
430
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
130
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
1
290
深層学習と古典的画像アルゴリズムを組み合わせた類似画像検索内製化
shutotakahashi
1
270
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
430
Two Blades, One Journey: Engineering While Managing
ohbarye
1
190
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
290
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
510
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
510
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
220
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
The Invisible Side of Design
smashingmag
299
50k
Speed Design
sergeychernyshev
27
800
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Practical Orchestrator
shlominoach
186
10k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
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もアリかも?