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
connect-webの恩恵
Search
Keitaro Miyano
November 24, 2023
Programming
0
120
connect-webの恩恵
11月24日に開催された「Wantedly x Qiita Meetup #1 フロントエンドのあれこれ」のLT枠登壇資料になります!
Keitaro Miyano
November 24, 2023
Tweet
Share
More Decks by Keitaro Miyano
See All by Keitaro Miyano
Amebaブログにおけるbobの活用術
miyakei1225
0
3
React × Tailwind × v0で始める コンポーネント開発をしてみよう!
miyakei1225
0
75
全部お見せします!現役エンジニアが開発現場で実際に使っているツールと便利設定集
miyakei1225
0
36
【初学者向け】Honoを使ったREST APIを構築してみよう!
miyakei1225
0
320
React勉強会
miyakei1225
0
260
初学者歓迎!Go言語でWebサーバー構築ハンズオン!
miyakei1225
0
36
お手軽環境構築!はじめてのDocker講座
miyakei1225
1
390
Expo SDK 50について&早速アップデートしてみた
miyakei1225
0
100
Webエンジニアが スマホアプリを個人開発した話📱
miyakei1225
0
61
Other Decks in Programming
See All in Programming
CSC509 Lecture 03
javiergs
PRO
0
330
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
180
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
200
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.6k
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
130
クラシルを支える技術と組織
rakutek
0
190
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
240
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
360
XP, Testing and ninja testing ZOZ5
m_seki
3
350
Serena MCPのすすめ
wadakatu
4
910
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
500
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Writing Fast Ruby
sferik
629
62k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Typedesign – Prime Four
hannesfritz
42
2.8k
Transcript
connect-webを使った開発の恩恵🤝
【所属】株式会社サイバー・バズ 【氏名】宮野 奎太朗(みやの けいたろう) 【経歴】 2016年〜 浅草のお寿司屋さんで板前修行🍣 2018年〜 大学入学 2020年〜
マレーシアでコードを書く日々 2021年〜 自転車で日本一周🚲 2022年〜 サイバー・バズ入社 自己紹介 2
はじめに 3 1. connect-webの概要と通信方式 2. 導入したプロダクトでの活用例 3. メリットについて(http通信との違い) 4. 導入時につまづいたポイント
5. まとめ 6. 質疑応答
connect-webの概要 4 まずはざっくり3行で解説! ・ブラウザで利用可能なgRPC互換のHTTP通信ライブラリ ・Protocol Buffersを使ったインターフェースの定義をして使う ・サービスごとのリクエスト・レスポンスの型生成が可能
connect-webの概要 5 gRPCはHTTP/2の仕様に則った形で 4種類の通信方式を用意しています。
connect-webの概要 6 4種類の通信方式の特徴
Unary RPC 7 クライアント サーバー リクエスト レスポンス TCP Connection
Unary RPC 8 クライアント サーバー リクエスト レスポンス TCP Connection よく見る「1リクエスト1レスポンス」の形式
Server streaming RPC 9 クライアント サーバー TCP Connection レスポンス レスポンス
リクエスト
Server streaming RPC 10 クライアント サーバー TCP Connection レスポンス レスポンス
リクエスト 【メリット】サーバーの負担⤵ 初期表示スピード⤴
Client streaming RPC 11 クライアント サーバー TCP Connection レスポンス リクエスト
リクエスト
Client streaming RPC 12 クライアント サーバー TCP Connection レスポンス リクエスト
リクエスト 容量の大きなデータを分割してリクエス
Bidirectional streaming RPC 13 クライアント サーバー TCP Connection レスポンス リクエスト
リクエスト レスポンス
Bidirectional streaming RPC 14 クライアント サーバー TCP Connection レスポンス リクエスト
リクエスト レスポンス WebSocketのような双方向通信が可能
導入したプロダクトでの活用例 15 フロント側→Next.js(connect-web) サーバー側→Go(connect-go)
導入したプロダクトでの活用例 16 Cytoscape.jsでのグラフ構築 →Server streaming RPCを使用
導入したプロダクトでの活用例 17 1.protoファイル定義
導入したプロダクトでの活用例 18 2.Makefileに定義した内容を実
導入したプロダクトでの活用例 19 3.protoファイルをもとに型ファイルを クライアント&サーバーに生成
導入時につまづいたポイント 20 ドキュメント→target=tsからtarget=js+dtsにする! (おまじない的なものとして覚えて帰ってください🙆)
まとめ 21 connectを利用したスキーマ駆動の開発体験は良かったです 🙆 ぜひ今後の選択肢の一つとして覚えてください!
22 弊社カジュアル面談お待ちしております🙇 DMでもお気軽にご連絡ください! カジュアル 面談調整URL
23 弊社カジュアル面談お待ちしております🙇 DMでもお気軽にご連絡ください! Xアカウント (@38ke1)