ファインディにおけるフロントエンド技術選定の歴史

React×GraphQL特集 フロントエンド技術選定の裏側と、直面する技術的課題

Transcript

1. ファインディにおける フロントエンド技術選定の歴史 1 2024/10/08 React×GraphQL特集 フロントエンド技術選定の裏側と、直⾯する技術的課題 ファインディ株式会社 フロントエンド テックリード 新福 宜侑    @puku0x
2. 2 今年で７歳！
3. 3 Findyのフロントエンド • Next.js + TypeScript + GraphQL • Jest、Testing Library、Playwright（検証中） • Prettier、ESLint、Stylelint、Commitlint • Storybook、Style Dictionary、Figma • Nx（モノレポ管理ツール） • GitHub Actions
4. 以前のフロントエンド構成 4
5. 5 以前（〜2020年）のフロントエンド構成 • Railsモノリス上のReact ◦ React 16 ◦ バージョンの古いツール‧ライブラリ多数 ◦ クラスコンポーネント ◦ 型（Flow）はある、テストは無い ◦ 設計...？ • モノリスのデメリット ◦ 軽微な修正でも⻑時間のCI待ちが発⽣ → 開発スピード低下
6. 6 モノリス解体
7. 7 解体後のフロントエンドはNext.jsを採⽤
8. 8 Next.jsの採⽤理由 • 既存のReactの資産を活かしたい • SSRしたい • ビルド周りを任せたい • 最適化周りも任せたい
9. モノリス解体完了！ （〜2021年5⽉） 9
10. GitHub上のアクティビティ数: 4倍 リリース回数: 9.1倍 PRクローズまでの速度: 35倍 10 Findyがモノリス環境をやめて得られたユーザへの爆速価値提供 https://note.com/ma3tk/n/na502374b6ad6
11. 11 モノリス解体後のフロントエンドの課題 • バージョンの古いツール‧ライブラリ多数 • 型（Flow）はある、テストは無い
12. 12 依存を減らす • 不要なパッケージの削除 • styled-components + classnames → Emotionに統⼀ • Redux関連 → @reduxjs/toolkit → に統⼀
13. 13 開発基盤にNxを採⽤
14. 14 Nxの採⽤理由 • 他のツールの設定を任せたい ◦ ESLintやJestなどがすぐに使える ◦ nx migrate による⾃動更新 • 今後の⼤規模化に備えたい ◦ nx affected による変更検知 ◦ Nx Cloudのリモートキャッシュ
15. 15 Flow → TypeScript に移⾏ Flowの型注釈を削除 ↓ TypeScript（allowJs: true） ↓ TypeScript（strict: true）
16. 16 TypeScriptの採⽤理由 • 型が欲しい • 移⾏のしやすさ • エディタとの相性 • 情報の豊富さ
17. 開発基盤の刷新で フロントエンドが最⾼になっ... 17
18. ...てない！ 18
19. 19 モノリス解体後のREST APIの課題 • そのページに使うデータ全部盛り ◦ マスタデータ ◦ ユーザーデータ パフォーマンスの懸念 • レスポンスが⼀定でない ◦ 同じ名称で型が全く異なる場合も ◦ TypeScript導⼊時は⼿動で型付け → つらい
20. 20 REST API → GraphQLに移⾏ 社内ツールにGraphQL導⼊‧検証 ↓ プロダクトを⼀部GraphQL化 ↓ プロダクトを全GraphQL化 ↓ 他のプロダクトに展開
21. 21 GraphQLの採⽤理由 • 効率的なデータ通信 • スキーマ駆動 • graphql-codegenを含むエコシステム
22. 22 フロントエンド共通の技術スタックたち ※SSRの要件の有無により使い分けています ※
23. 23 今後のFindyフロントエンド • App Router（React Server Components） ◦ 新しいコンポーネント設計 ◦ ランタイム CSS-in-JS からの脱却 EmotionからCSS Modulesへの移⾏！React Server ComponentsのCSS対応 https://tech.findy.co.jp/entry/2024/09/09/090000
24. 24 技術選定を振り返る • ユーザーのため ◦ 最速で価値を届けられるか？ ◦ 良いユーザー体験が実現できるか？ • ⾃分達のため ◦ チームに受け⼊れられるか？ ◦ 良い開発者体験が期待できるか？ • プロダクトのため ◦ 持続的な開発ができるか？
25. 25 まとめ • 何のための技術選定か ◦ プロダクトとプロダクトに関わる⼈達のため • 重要なマインド ◦ 「当時はそれが正解だった」 • ⼩さくはじめる
26. 技術選定に歴史あり 26
27. リスペクトを忘れずに 27
28. 28 ツール選定といえば...
29. ツール選定のお供に 29 https://findy-tools.io/
30. We’re hiring! https://careers.findy.co.jp/ 30