Cap'n Webについて

2025-12-09
Yusuke Wada

Transcript

1. Cap'n Webについて
2. Me Yusuke Wada Web Application Developer Developer Advocate at Cloudflare A founder of Bokete The Creator of Hono
3. Cap’n Web
4. Cap'n Webとは？ • JavaScriptネイティブな RPC • capnwebというnpmパッケージがある • 作者がKenton Varda ◦ Cloudflare Workersの作者 • https://github.com/cloudflare/capnweb https://blog.cloudflare.com/capnweb-javascript-rpc-library/
5. Cap'n Webの特徴 • サーバーとブラウザで動作 • JavaScriptのメソッド呼び出し、オブジェクト操作ができる • HTTP、WebSocket、postMessage() で動作 • メジャーなブラウザ、 Cloudflare Workers、Node.js、Denoで動作 ◦ Hono Adapterを使うと Bunでも • 依存なし、 10KB(minify+gzip) • TypeScriptによる型サポート
6. インストール
7. RPCであること • RESTやGraphQLを置き換えるかも • サーバサイド・クライアントを JavaScript/TypeScriptに統一したい時
8. RPCのイメージ - APIの定義 src/api.ts RpcTargetをextendsしたクラスをつくって関数を定義
9. RPCのイメージ - クライアントの呼び出し src/client.ts api.hello()で関数呼び出し
10. src/client.ts src/api.ts
11. TypeScriptの型サポート APIから型を取ってきてジェネリクスに渡す
12. サーバーサイドの実装 src/server.ts MyApiServerのインストールをnewWorkersRpcResponse()に渡す
13. 動かし方 サーバーサイド Cloudflare Workers / Wranglerで起動 クライアントサイド コマンドライン / tsxで起動
14. 2種類の呼び出し • バッチとWebSocket • API、サーバーの実装は変えなくてよい
15. バッチの基本 src/client-batch.ts newHttpBatchRpcSessionを使う
16. まとめてリクエストする src/client-batch.ts Promise.all()した時に初めてリクエストが飛ぶ
17. クライアント出力
18. サーバーログ 1度だけ！
19. おさらい
20. パイプライン - API src/api.ts getMyName()を追加
21. パイプライン - クライアント src/client-batch.ts await batch.hello()した時に初めてリクエストが飛ぶ Promise
22. クライアント出力
23. サーバーログ 1度だけ！
24. パイプライン • APIを変えずに Promiseをメソッドに渡せる • batch.hello()の時にawaitして初めてリクエストが飛ぶ • Cap’n WebのPromiseは「通常の Promise」ではない！ ◦ メソッドチェーンをよしなにしてくれる
25. Cap’n Webのバッチの面白いところ • JavaScriptのネイティブな関数呼び出し • パイプラインを作って 1度のラウンドトリップで実行
26. map() - API src/api.ts
27. map() - クライアント src/client-batch.ts リスト操作をmap()で行う
28. クライアント出力
29. サーバーログ 1度だけ！
30. map() を活用する • 友達のリストを処理する ◦ 1度だけのラウンドトリップ • RESTやGraphQLに大きなアドバンテージ • APIを変えずに 1つのリクエストにすることができる
31. WebSocket - クライアント src/client-websocket.ts 使い方はさほど変わらない
32. クライアント出力 1秒経って
33. サーバーログ WebSocketコネクション
34. WebSocket • コネクションをはりっぱなし • チャットなどリアルタイム共有系で便利
35. Durable Objectsと一緒に使う • ステート管理をしたい • Cloudflare Workersの場合Durable Objectsが使える • JSRPCで使うRpcTargetがCap’n WebのAPIに使える • Cap’n WebのWeb Socketクライアントからステート付きのオブジェクトに アクセスできる
37. 既存のRPCとの比較 • JavaScript/TypeScriptのRPCライブラリは他にもある • tRPC • Hono RPC
38. JSネイティブに書ける 独自の書き方 バリデーションしている
39. 冗長 Honoのアプリをそのままクライアントで利用できる TypeScriptの型 + fetchラッパー
40. 実例 • Workers SDK • TanStack AIのExample ◦ https://github.com/TanStack/ai/tree/main/examples/ts-group-chat
41. Hono Adapter - インストール
42. Hono Adapter - コード例 src/server.ts Cloudflare Workers用 他にも同じインターフェースで Node.js/Deno/Bunに対応
43. まとめ • Cap’n Webの紹介 • JavaScriptネイティブのパイプライン • 1ラウンドトリップで呼び出し • Hono Adapterもある