複雑すぎる経費精算のフロントを1から作り直してみた freee技術の日

freee 技術の日 https://freee-tech-day.freee.co.jp/2025/ の発表スライドです。
YouTube のアーカイブもあります https://www.youtube.com/live/uc-gj78YYHY?t=4870s

一緒に Hack Everything して経費精算と戦いたい方は
https://jobs.freee.co.jp/ からエントリーするか、 https://x.com/ktpi2000 まで DM お願いします💪

Transcript

1. 複雑すぎる経費精算のフロントを 1から作り直してみた ⽚岡 優也 (e-moha) 2025年11⽉30⽇
2. 片岡 優也 (e-moha)
 2023年4月に入社。
 経費精算や購買申請の開発に従事しています。
 
 鉄道のきっぷが好きです。
 GitHub: ktpi2000
 Webアプリケーションエンジニア
3. 　 freeeの経費精算について 申請者も承認者も経理担当者も全員が使いやすいシステム 
 「申請・承認・決裁」という業務フローを「完全ペーパーレス」で実現 

4. 01 複雑さを覗いてみよう 02 複雑さの正体とは？ 03 解決へのアプローチ 04 まとめ agenda
5. 　 経費精算は「魔改造」を繰り返し ついに「ラスボス」となった
6. 　 複雑さを覗いてみよう👀
7. 　 複雑さを覗いてみよう👀 ① ② ③
8. 　 便利の裏側、実は⼤変で複雑
10. 　 95
 経費精算で使われている useEffect の数

11. 　 useEffect とは? コンポーネントを外部システムと同期させるための React フック • API からのデータ取得 • DOM の操作 • タイマー (setTimeout, setInterval) • イベントリスナーの登録‧解除 React のレンダリングとは直接関係ない処理を実⾏
12. 　 便利にuseEffectが使われている例 1. OCR処理のいろいろ 2. ⾦額計算とか 3. チェック表⽰ …etc 右の箇所では 45箇所使⽤されている!
13. 　 複雑な処理をしている例 領収書アップロード→解析→⾃動補完→重複チェック useEffect 1 • 領収書が添付されたときに polling useEffect 2 • ⾦額、⽇付、取引先を⾃動補完 useEffect 3 • 同じ領収書が使われていないかのチェック 互いに依存関係にあるものがたくさんある
14. 　 複雑な処理をしている例 領収書アップロード→解析→⾃動補完→重複チェック useEffect 1 • 領収書が添付されたときに polling useEffect 2 • ⾦額、⽇付、取引先を⾃動補完 useEffect 3 • 同じ領収書が使われていないかのチェック 互いに依存関係にあるものがたくさんある 一歩間違えれば
 大きな事故(バグ)につながる

15. 　 だからこそ1から作り直す必要がありました
16. 　 作り直したときに意識したこと • AI を⽤いたロジックの⽂章化 • useEffect を増やさない取り組み
17. 　 AI を⽤いたロジックの⽂章化 • 背景 ◦ 95箇所の useEffect でどんな処理をしているのかが不明瞭 • 実際にしたこと ◦ AI を⽤いた調査を実施 ◦ UI コンポーネントごとにどんな機能があるかをまとめている • ⽂章化して分かったこと ◦ 似たような処理が複数箇所にある ◦ 状態管理が⼆重化、データフロー不透明 ◦ 巨⼤な依存配列（最⼤11個）
18. 　 useEffect を増やさない取り組み • 実際にしたこと ◦ API 通信は TanStack Query を使⽤ ▪ loading, polling 管理の簡略化 ◦ store は zustand で⼀元管理 ▪ action 関数はユースケースごとに書いている ▪ どのようにデータが変わったかが分かるようにしている ◦ なるべく純粋な関数にしてテストを書くことを徹底
19. 　 useEffect を増やさない取り組み • 実際にしたこと ◦ API 通信は TanStack Query を使⽤ ▪ loading, polling 管理の簡略化 ◦ store は zustand で⼀元管理 ▪ action 関数はユースケースごとに書いている ▪ どのようにデータが変わったかが分かるようにしている ◦ なるべく純粋な関数にしてテストを書くことを徹底 95 → 9個まで useEffect を減らすことに成功💪
20. 　 まとめ • プロダクトの「便利」を追求していくためには ◦ 開発者の便利も意識することが重要 • 便利の裏側には複雑はつきもの、⻑期的に便利な機能を提供するには改 善が必要 • 今あるベストな構成が数年後には複雑を⽣み出しているかもしれない。 だからこそ、⼈の⼿でより新しくシンプルにしていく必要がある きっとまだまだ未知の課題があるはず💡 ⼀緒にHack Everything☆してくれる⼈を募集中です!