ConnectRPCで始まるContract-first開発 Protocol Buffersを契約としたAPI開発手法 

自己紹介 Han Insik 𝕏 : @inshiku_han 🏢 所属 株式会社Gaudiy 💻 専門分野 JS Frameworkエコシステム全般 React / Next.js / TypeScript 📱 最近の取り組み React Native開発 🇰🇷 韓国出身、でも辛いのは苦手です 

API開発、こんな課題ありませんか？ 🤔 よくある悩み APIのレスポンスと型が合わない 実装とドキュメントが乖離する バックエンド待ちで開発が進まない ✨ ConnectRPCなら解決できます .protoファイルから型・サーバー・クライアント を自動生成 型安全なモックが組み込まれており、MSW不要 gRPCとの相互運用性が高く、導入しやすい 💡 結論: ConnectRPCは、契約(proto)を元に全てを自動生成し、フロントとバックの並行開発を加速させ るツールです 

Contract-first開発とは？ 📝 開発フロー 1. Contract定義 (.proto) API仕様を契約として定義 2. コード生成 型定義・クライアント・サーバー自動 生成 3. 並行開発 フロント・バックエンド同時進行 🚀 ConnectRPCの役割 Protocol Buffersをサポート 3つのプロトコル対応 Connect / gRPC / gRPC-Web ブラウザから直接通信可能 契約（Contract）を起点とした開発手法 

なぜConnectRPC？ ConnectRPC OpenAPI (REST) GraphQL スキーマ定義 Protocol Buffers OpenAPI Spec (YAML) GraphQL SDL 強み パフォーマンス 厳格な型 サーバー/クライアント生成 エコシステムの成熟 REST準拠 柔軟なデータ取得 開発体験 サーバー/クライアント実装に集中できる ドキュメントが豊富 フロント主動で開発しやすい ConnectRPCは、gRPCのパフォーマンスと型安全性を持ちながら、Webブラウザでも特別な設定なしに利用できる手軽さが魅力です。 

Contract定義の例 🎯 Contractの特徴 API仕様の一元管理 フロント・バック共通の仕様 書 言語非依存 TypeScript/Go/Rust等どの言語でも利 用可能 型安全性 型情報が含まれ、コンパイル時にチェッ ク 変更に強い 後方互換性を保ちながら進化可能 📍 ポイント: Buf CLIの buf generate コマンド 一つで、このファイルからTypeScriptとGoの型 すべての起点となる.protoファイル syntax = "proto3"; package greet.v1; // 挨拶サービス service GreetService { rpc Greet(GreetRequest) returns (GreetResponse); } message GreetRequest { string name = 1; } message GreetResponse { string greeting = 1; } 

コード生成と型安全性 🎯 TypeScript (Frontend) 🌐 Go (Backend) .protoから自動生成される型定義とクライアント // 自動生成される型定義 export interface GreetRequest { name: string; } export interface GreetResponse { greeting: string; } // 型安全なクライアントも生成 const client = createPromiseClient( GreetService, transport ); // 自動生成される型定義 type GreetRequest struct { Name string } type GreetResponse struct { Greeting string } // インターフェースも自動生成 type GreetServiceHandler interface { Greet(context.Context, *Request[*GreetRequest]) (*Respon } 

強み①: MSW不要のモックで即時開発 1. 本番 / 2. 開発(モック) 3. 環境切り替え / 4. 型安全な呼び出し ✨ MSW不要！ createRouterTransportで型安全なモックを即 座に作成。バックエンド完成前から並行開発可能。 createRouterTransport で、バックエンドを待たずに開発開始 // 1. 本番: 実際のAPI へ接続 const transport = createConnectTransport({ baseUrl: "https://api.example.com", }); // 2. 開発: MSW 不要！組み込みモック import { createRouterTransport } from "@connectrpc/connect const mockTransport = createRouterTransport(({ service }) service(GreetService, { greet: (req) => ({ greeting: ` こんにちは、${req.name} さん`, }), }); }); // 3. 環境に応じて切り替え const client = createPromiseClient( GreetService, process.env.NODE_ENV === 'development' ? mockTransport : transport ); // 4. 型安全な呼び出し // （モックでも本番でも同じコード！） const response = await client.greet({ name: " 田中", }); console.log(response.greeting); 

実装例: バックエンド (Go) 同じContractから並行実装 // 1. サービス実装（.proto から生成されたインターフェース） type GreetServer struct{} func (s *GreetServer) Greet(ctx context.Context, req *connect.Request[greetv1.GreetRequest]) (*connect.Response[greetv1. return connect.NewResponse(&greetv1.GreetResponse{ Greeting: fmt.Sprintf(" こんにちは、%s さん", req.Msg.Name), }), nil } // 2. ハンドラー作成（Connect/gRPC/gRPC-Web 全対応） mux := http.NewServeMux() path, handler := greetv1connect.NewGreetServiceHandler(&GreetServer{}) mux.Handle(path, handler) // 3. サーバー起動 http.ListenAndServe(":8080", mux) ✨ ポイント: フロントエンドと同じ.protoから生 成、型の不一致は起こりません 

ユースケース Webアプリケーション開発 ブラウザからプロキシなしで型安全なRPC通信を実現 REST APIからの移行で開発効率を向上 マイクロサービスアーキテクチャ 既存のgRPC環境と共存しつつ段階的に導入可能 Web, モバイル, バックエンドなど多様なクライアントに対応 その他 curl コマンドでAPIを直接テストでき、デバッグが容易 ConnectRPCが活きる場面 

まとめ 📝 契約は .proto に集約 🚀 buf generate でコードを自動生成 💡 型安全な並行開発で効率UP Contract-first開発で、開発体験を次のレベルへ 📚 ConnectRPC 🛠️ Buf