カイポケコネクトのフロントエンドコミュニティとGraphQLスタックの更新/advancing-the-graphql-stack-update-in-the-frontend-community

フロントエンドでの技術選定 —— 「みんなで」語り尽くそう！https://codmon.connpass.com/event/379236/

Transcript

1. 1 © SMS Co., Ltd. 2026.02.05 株式会社エス・エム・エス プロダクト推進本部 カイポケ開発部 田所 育真 カイポケコネクトのフロントエンドコミュニティ とGraphQLスタックの更新
2. 2 © SMS Co., Ltd. 自己紹介 • 名前 ◦ 田所育真（たどころ いくま） • 所属 ◦ 株式会社エス・エム・エス • プロダクト ◦ 介護・看護・障害福祉事業者向け経営支援「カイポケ」（リニューアル） ◦ 特徴 ▪ 介護サービスの記録・保険請求を含むバーティカルSaas ▪ 介護サービスの種類に応じた機能の提供
3. 3 © SMS Co., Ltd. https://2025.stateofjs.com/ja-JP/libraries/ 

4. 4 © SMS Co., Ltd. https://2025.stateofjs.com/ja-JP/libraries/ 
 カイポケコネクトで 使っている技術
5. 5 © SMS Co., Ltd. https://2025.stateofjs.com/ja-JP/libraries/ 
 初期から使っている技術 新しく取り入れている技術
6. 6 © SMS Co., Ltd. 必要なものを 継続的に選んでいくための コミュニティ テーマ 例：GraphQL関連の技術選定
7. 7 © SMS Co., Ltd. 前提：カイポケコネクトのアーキテクチャ https://careers.bm-sms.co.jp/engineer/kaipoke-renewal 
 FEは複数のミニアプリで構成（モノレポ）、GraphQLでサーバとやり取り 
 バックエンド
 複数のサービス
 フロントエンド
 複数のミニアプリ
 Gateway

8. 8 © SMS Co., Ltd. クライアントにApollo Client、型生成にGraphQL Codegenを採用 前提：現状のGraphQL関連の技術選定
9. 9 © SMS Co., Ltd. 課題：GraphQL周りの課題 • Apollo Client が現状にFitしていない ◦ 立ち上げ当初想定していたApollo固有の機能やキャッシュを使っていない ◦ refetchQueries の API が扱いづらい … etc • GraphQL Codegenの開発体験がよくない / バンドルサイズが大きい ◦ コードを変更するたびに pnpm codegen が必要 ◦ 生成された型を反映するために、Language Serverの再起動が必要
10. 10 © SMS Co., Ltd. 今すぐ動かないと困るわけでもないが 課題やペインはある 誰がいつ取り組むか？→フロントエンドコミュニティ
11. 11 © SMS Co., Ltd. カイポケのフロントエンドコミュニティ • フロントエンドコミュニティ ◦ カイポケコネクト内の各アプリチームのFE + 開発推進チームで構成 ◦ FE全般についてチーム間で相談したり、横断の改善を行う • 分科会？タスクフォース？（正式名称なし） ◦ フロントエンドコミュニティの特定トピックについて、意思のある有志が 集まって組成されるもの ◦ 設計について話す会、Chakra UI v2をなんとかする会 … etc ◦ FE全体の取捨選択は設計について話す会で最初に検討されることが多い ※1
 ※1: https://speakerdeck.com/sms_tech/restructuring-a-development-promotion-team-after-failure 

12. 12 © SMS Co., Ltd. 1. 設計について考える会で課題を整理 ◦ 課題をイシューアップ & 優先度付け 2. フロントエンドコミュニティでGraphQL周りの改善を合意 3. GraphQL周りを考えるタスクフォースが立ち上がり、検討を推進 ◦ 関心の高い人の自主性を尊重 4. フロントエンドコミュニティ内で関心のある人が適宜レビューを実施 ◦ ADR、基盤となる設定、ユーティリティの実装 5. 現在GraphQL Codegen→gql.tadaに乗り換え中（クライアントは継続検討） GraphQL関連の課題検討でのフロントエンドコミュニティの動き
13. 13 © SMS Co., Ltd. GraphQL Codegen： gql.tadaを選択して移行中（1） gql.tadaはコードを生成せず、TypeScriptの世界でGraphQLを解釈する gql.tada 🪄 as TS Language Service Plugin 
 graphql(...) 内の文字列リテラルを 
 解釈して戻り値の型を推論 
 推論された 
 TypedDocumentNodeを
 各所で利用
14. 14 © SMS Co., Ltd. • GraphQL Codegen client-presetと比較の上、決定 ◦ すべてがTypeScript内で完結し、コード生成が不要に ◦ 専用Hookが不要になりバンドルサイズ削減（client-presetでも同じ） • 一括で書き換えるのは難しいため、GraphQL Codegenと並行運用 ◦ 新規実装ではgql.tadaを使用し、既存箇所はスクリプトを使って置換 ◦ /codegen-to-tada で ts-morph によるディレクトリ単位の置換が可能 GraphQL Codegen： gql.tadaを選択して移行中（2）
15. 15 © SMS Co., Ltd. おわり • フロントエンドコミュニティで必要なものを継続的に検討・導入しています ◦ 今回のGraphQLしかり、デザインシステムの裏側のChakra UIしかり • このあとのアンカンファレンスでぜひお話ししましょう！ ◦ フロントエンドコミュニティのもっと詳しい話 ◦ ライブラリのアップデート ◦ GraphQL周りの話 …etc