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

フロントエンドの技術選定〜ピクシブ×Findyの事例に学ぶ〜
https://findy.connpass.com/event/379759/

Transcript

1. ファインディにおける フロントエンド技術選定の歴史 1 2026/01/13 フロントエンドの技術選定〜ピクシブ×ファインディの事例に学ぶ〜 ファインディ株式会社 フロントエンド テックリード 新福 宜侑    @puku0x
2. 2 今年で９歳！ 転職サービスの「Findy」
3. 3 Findyのフロントエンド • Next.js + TypeScript + GraphQL • Jest、Testing Library、Playwright • Prettier、ESLint、Stylelint、Commitlint • Storybook、Style Dictionary、Figma • Nx（モノレポ管理ツール）、pnpm • GitHub Actions • GitHub Copilot、Claude Code
4. 以前のフロントエンド構成 4
5. 5 以前（〜2020年）のフロントエンド構成 • Railsモノリス上のReact ◦ React 16 ◦ バージョンの古いツール‧ライブラリ多数 ◦ クラスコンポーネント ◦ 型（Flow）はある、テストは無い ◦ スケールし⾟い設計、ディレクトリ構成、etc. .. • モノリスのデメリット ◦ 軽微な修正でも⻑時間のCI待ちが発⽣ → 開発スピード低下
6. 6 1. 開発スピード
7. 7 モノリス解体
8. 8 解体後のフロントエンドはNext.jsを採⽤ https://nextjs.org/
9. 9 Next.jsの採⽤理由 • 既存のReactの資産を活かしたい • 複雑な部分をフレームワークに任せて開発スピードを上げる ◦ SSRの仕組み ◦ ビルド設定 ◦ パフォーマンス最適化
10. モノリス解体完了！ （〜2021年5⽉） 10
11. 11 GitHub上のアクティビティ数: 4倍 リリース回数: 9.1倍 PRクローズまでの速度: 35倍 Findyがモノリス環境をやめて得られたユーザへの爆速価値提供 https://note.com/ma3tk/n/na502374b6ad6 モノリス解体の成果
12. モノリス解体で フロントエンドが最⾼になっ... 12
13. ...てない！ 13
14. 14 モノリス解体後のフロントエンドの課題 • バージョンの古いツール‧ライブラリ多数 • 型（Flow）はあるが、うまく動いていない • テストが無い → 持続的な開発が困難
15. 15 2. 持続的な開発
16. 16 開発基盤の刷新
17. 17 持続的に開発できる仕組みを整える • 定期的なアップデートの⾃動化 • ⾃動テストの拡充 • 不要なパッケージの削除 ◦ styled-components + classnames → Emotionに統⼀ ◦ Redux関連 → @reduxjs/toolkit → に統⼀
18. 18 開発基盤にNxを採⽤ https://nx.dev/
19. 19 Nxの採⽤理由 • 持続的な開発基盤 ◦ ESLintやJestなどがすぐに使える ◦ nx migrate による⾃動更新 • 今後の⼤規模化に備える ◦ nx affected による変更検知 → CI⾼速化 ◦ リモートキャッシュの活⽤で更に⾼速化できる
20. 20 Flow → TypeScript に移⾏ Flowの型注釈を削除 ↓ TypeScript（allowJs: true） ↓ TypeScript（strict: true）
21. 21 TypeScriptの採⽤理由 • 型が欲しい • JavaScriptからの移⾏のしやすさ • エディタとの相性 • 情報の豊富さ • デファクトスタンダード
22. 開発基盤の刷新で フロントエンドが最⾼になっ... 22
23. ...てない！ 23
24. 24 REST API → GraphQL • パフォーマンスの課題を解決したい ◦ 当時のREST APIはページに使うデータが全てレスポンスに含まれていた • 型が欲しい ◦ データ構造が⼀定でない場合もあり、⼿動での型付けが困難だった 社内ツールに導⼊‧検証 ↓ プロダクトを⼀部GraphQL化 ↓ プロダクトを全GraphQL化 ↓ 他のプロダクトに展開 → GraphQLに移⾏
25. 25 Emotion → CSS Modules • App Router（React Server Components）の登場 ◦ 新しいコンポーネント設計の模索 ◦ ランタイム CSS-in-JS からの脱却が議論されるようになる • さまざまな⽅法を検討し、CSS Modulesを採⽤ ◦ チーム要件や将来的な他ライブラリへの移⾏も加味して ◦ 2026年1⽉時点で ほぼ移⾏完了 EmotionからCSS Modulesへの移⾏！React Server ComponentsのCSS対応 https://tech.findy.co.jp/entry/2024/09/09/090000
26. 26 3. 常に繰り返す
27. 27 現在のファインディのフロントエンド共通の技術スタック ※SSRの要件の有無により使い分けています ※
28. 28 まとめ • 技術選定のポイント 1. 開発スピード 2. 持続的な開発 3. 常に繰り返す • リスペクトを持つ →「当時はそれが正解だった」 • 新しく導⼊するもの →「⼩さくはじめる」
29. 技術選定って⼤変😂 29
30. リスペクトを忘れずに😉 30
31. 31 ツール選定といえば...
32. ツール選定のお供に 32 各種ツールの活⽤事例や、様々なサービスのインフラアーキテクチャなど実⽤的な情報を多数掲載 https://findy-tools.io/
33. We’re hiring! https://careers.findy.co.jp/ 33