カオナビに Suspenseを導入するまで / The Road to Suspense at kaonavi

2026年5月9日開催の「フロントエンドカンファレンス名古屋 2026」で登壇した際の発表資料です。
https://fec-nagoya-org.github.io/2026/
#fec_nagoya

Transcript

1. カオナビに Suspenseを導入するまで 2026.05.09 | フロントエンドカンファレンス名古屋 2026 © kaonavi, inc.
2. 鈴木 僚太 (uhyo) 株式会社カオナビ CTO室 エキスパート（フロントエンド） 自己紹介 © kaonavi, inc. 2
3. タレントマネジメントシステム ⼈事業務の効率化から戦略⼈事の実現まで、 幅広い⽬的で利⽤できるタレントマネジメントシステムです。 https://www.kaonavi.jp/
4. 「カオナビ」とは 個の⼒を最⼤化し 組織をもっと強くする カオナビは、⼈事業務の効率化から戦略⼈事の実現まで、 幅広い⽬的で利⽤できるタレントマネジメントシステムです。 ⼈材データプラットフォームに蓄積された 個のデータをAIと掛け合わせ、 「個の⼒の最⼤化」による強い組織を実現します。
5. これまでのあらすじ © kaonavi, inc. 5 カオナビではフロントエンド開発にReactを使用。 （古い機能では例外あり） 1年半くらいかけてReact 16 → 18にバージョンアップ！ 次の課題はReact 18の機能を活用すること。
6. Suspense © kaonavi, inc. 6 React 18の目玉機能といえばSuspense。 ✅ データ取得を宣言的に書いて設計改善 ✅ トランジションと組み合わせてUX改善 ✅ Async Reactの中核であり、将来性◎
7. 問題: どのように Suspenseを導入する？ © kaonavi, inc. 7
8. Suspense導入計画 © kaonavi, inc. 8 導入前の状況 : TanStack Query (v4) を利用 選択肢: 🤔 TanStack Queryをv5に上げる（useSuspenseQuery）
9. Suspense導入計画 © kaonavi, inc. 9 導入前の状況 : TanStack Query (v4) を利用 選択肢: 🤔 TanStack Queryをv5に上げる（useSuspenseQuery）
10. TanStack Query v5に上げられない問題 © kaonavi, inc. 10 v5の破壊的変更の中でも、 isLoadingの意味が変わってisPendingが追加された のがやばかった。 ✅ 静的解析による対応が困難 ✅ カオナビコードベースに腐敗防止層なし
11. Suspense導入計画 © kaonavi, inc. 11 導入前の状況 : TanStack Query (v4) を利用 選択肢: 🤔 TanStack Queryをv5に上げる 🤔 SWRとか別のライブラリを入れる 🤔 ライブラリに頼らず自作する
12. 実際に採った選択肢 © kaonavi, inc. 12
13. 実際に採った選択肢 © kaonavi, inc. 13 自前実装のフック useSuspenseGetRequest を実装。 ただし、コア部分にjotaiを利用。 ✅ jotaiによるSuspense対応 ✅ 見た目は従来のフックっぽい感じ （useSuspenseGetRequestに行き着くまで紆余曲折あったが省略）
14. useSuspenseGetRequest使い方 © kaonavi, inc. 14 // コンポーネント外 const requestStore = createGetRequestStore< Data, Params >(); // コンポーネント内 const { data } = useSuspenseGetRequest({ requestFn, variables, enabled, requestStore, });
15. useSuspenseGetRequest使い方 © kaonavi, inc. 15 // コンポーネント外 const requestStore = createGetRequestStore< Data, Params >(); // コンポーネント内 const { data } = useSuspenseGetRequest({ requestFn, variables, enabled, requestStore, }); よくあるデータ取得 フック感のある API
16. useSuspenseGetRequest使い方 © kaonavi, inc. 16 // コンポーネント外 const requestStore = createGetRequestStore< Data, Params >(); // コンポーネント内 const { data } = useSuspenseGetRequest({ requestFn, variables, enabled, requestStore, }); よくあるデータ取得 フック感のある API コンポーネント外でストアを定義 jotaiのatomがこの中にある。 他のライブラリで言う　 query keyと同等の概念。
17. useSuspenseGetRequestの効果 © kaonavi, inc. 17 ✅ 従来の習慣に近いAPI ✅ 独自実装によるコントローラブルな腐敗防止層
18. 普及活動 © kaonavi, inc. 18 新フックを利用した機能開発例を用意し普及活動。 useTransitionとの組み合わせも推奨。 今では新機能は基本的にSuspense対応実装に！
19. 42 ご覧いただき、ありがとうございました！ https://recruit.kaonavi.jp/careers/ 選考を希望する⽅ https://hrmos.co/pages/kaonavi/jobs/casual21 まずは話を聞いてみたいという⽅