connect-go を利⽤したWeb開発

Tech Talk Together #2

Transcript

1. connect-go を利用した Web 開発 2025-06-29 Tech Talk Together #2 @hum_op_dev 1
2. 自己紹介 hum_op X: @hum_op_dev Blog: super-g.eek.jp GitHub: ophum 2
3. API を作るの面倒くさくないですか プロトコルは？ データの形式は? サーバー・クライアントの実装は? 3
4. connect-go とは gRPC 互換の HTTP API を作成するためのライブラリ。 Protocol Buffer の定義ファイルからコードを生成 gRPC, gRPC-Web, Connect の独自プロトコルに対応している Connect の独自プロトコルは HTTP1.1 でも動作する 4
5. Protocol Buffer の定義ファイルからコードを生成 message PostRequest { string title= 1; string content = 2; } message PostResponse { string id = 1; } service BlogService { rpc Post(PostRequest) returns (PostResponse) {} } 5
6. message PostRequest { string title= 1; string content = 2; } こんな感じの構造体になる type PostRequest struct { state protoimpl.MessageState sizeCache protoimpl.SizeCache unknownFields protoimpl.UnknownFields Title string `protobuf:"bytes,1,opt,name=title,proto3" json:"title,omitempty"` Content string `protobuf:"bytes,2,opt,name=content,proto3" json:"content,omitempty"` } 6
7. service BlogService { rpc Post(PostRequest) returns (PostResponse) {} } こんな感じの Interface が生成されるのでこれを満たす実装をする // BlogServiceHandler is an implementation of the blog.v1.BlogService service. type BlogServiceHandler interface { Post(context.Context, *connect.Request[v1.PostRequest]) (*connect.Response[v1.PostResponse], error) } 7
8. こんな感じ。 type blogService struct {} func (s *blogService) Post( ctx context.Context, req *connect.Request[v1.PostRequest], ) (*connect.Response[v1.PostResponse], error) { // ここに実装していく！ id := createPost(ctx, req.Title, req.Content) return &connect.Response[v1.PostResponse]{ Msg: &v1.PostResponse{ Id: id, }, }, nil } 8
9. いいところ 実装するときに HTTP や gRPC といったプロトコル周りやデータのシリアライズ・デ シリアライズを気にしなくてよい！ req *connect.Request[v1.PostRequest] のように型が決まった状態でコーディングでき る 9
10. クライアントも生成される // BlogServiceClient is a client for the blog.v1.BlogService service. type BlogServiceClient interface { Post(context.Context, *connect.Request[v1.PostRequest]) (*connect.Response[v1.PostResponse], error) } // blogServiceClient implements BlogServiceClient. type blogServiceClient struct { post *connect.Client[v1.PostRequest, v1.PostResponse] } // Post calls blog.v1.BlogService.Post. func (c *blogServiceClient) Post( ctx context.Context, req *connect.Request[v1.PostRequest], ) (*connect.Response[v1.PostResponse], error) { return c.post.CallUnary(ctx, req) } 10
11. Browser 用のクライアント実装を生成できる connect-web というので TypeScript のクライアントを生成できる import { BlogService } from "./gen/blog/v1/blog_pb"; import { createConnectTransport } from "@connectrpc/connect-web"; import { createClient } from "@connectrpc/connect"; const transport = createConnectTransport({ baseUrl: "http://localhost:8080", }); const client = createClient(BlogService, transport); const res = await client.post({ title: "connect-goを利用したWeb開発", content: "connect-go便利!", }); console.log(res.id); 11
12. 生成 12
13. 緑のところは proto ファイルから生成！ 13
14. まとめ connect-go を利用すると Client/Server の実装を生成できる 生成された型を利用するのでシリアライズ・デシリアライズを気にしなくてよい ブラウザから接続したい場合は connect-web を利用する proto-gen-* というプラグインを利用して各種実装を生成している protoc-gen-go は構造体 protoc-gen-connect-go は connect の Client/Server 実装 protoc-gen-es はブラウザで利用できる Client 実装 14