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

Slide 1

Slide 1 text

ファインディにおけるフロントエンド技術選定の歴史 1 2024/10/08 React×GraphQL特集フロントエンド技術選定の裏側と、直⾯する技術的課題ファインディ株式会社フロントエンドテックリード新福宜侑 @puku0x

Slide 2

Slide 2 text

2 今年で７歳！

Slide 3

Slide 3 text

3 Findyのフロントエンド ● Next.js + TypeScript + GraphQL ● Jest、Testing Library、Playwright（検証中） ● Prettier、ESLint、Stylelint、Commitlint ● Storybook、Style Dictionary、Figma ● Nx（モノレポ管理ツール） ● GitHub Actions

Slide 4

Slide 4 text

以前のフロントエンド構成 4

Slide 5

Slide 5 text

5 以前（〜2020年）のフロントエンド構成 ● Railsモノリス上のReact ○ React 16 ○ バージョンの古いツール‧ライブラリ多数 ○ クラスコンポーネント ○ 型（Flow）はある、テストは無い ○ 設計...？ ● モノリスのデメリット ○ 軽微な修正でも⻑時間のCI待ちが発⽣ → 開発スピード低下

Slide 6

Slide 6 text

6 モノリス解体

Slide 7

Slide 7 text

7 解体後のフロントエンドはNext.jsを採⽤

Slide 8

Slide 8 text

8 Next.jsの採⽤理由 ● 既存のReactの資産を活かしたい ● SSRしたい ● ビルド周りを任せたい ● 最適化周りも任せたい

Slide 9

Slide 9 text

モノリス解体完了！（〜2021年5⽉） 9

Slide 10

Slide 10 text

GitHub上のアクティビティ数: 4倍リリース回数: 9.1倍 PRクローズまでの速度: 35倍 10 Findyがモノリス環境をやめて得られたユーザへの爆速価値提供 https://note.com/ma3tk/n/na502374b6ad6

Slide 11

Slide 11 text

11 モノリス解体後のフロントエンドの課題 ● バージョンの古いツール‧ライブラリ多数 ● 型（Flow）はある、テストは無い

Slide 12

Slide 12 text

12 依存を減らす ● 不要なパッケージの削除 ● styled-components + classnames → Emotionに統⼀ ● Redux関連 → @reduxjs/toolkit → に統⼀

Slide 13

Slide 13 text

13 開発基盤にNxを採⽤

Slide 14

Slide 14 text

14 Nxの採⽤理由 ● 他のツールの設定を任せたい ○ ESLintやJestなどがすぐに使える ○ nx migrate による⾃動更新 ● 今後の⼤規模化に備えたい ○ nx aﬀected による変更検知 ○ Nx Cloudのリモートキャッシュ

Slide 15

Slide 15 text

15 Flow → TypeScript に移⾏ Flowの型注釈を削除 ↓ TypeScript（allowJs: true） ↓ TypeScript（strict: true）

Slide 16

Slide 16 text

16 TypeScriptの採⽤理由 ● 型が欲しい ● 移⾏のしやすさ ● エディタとの相性 ● 情報の豊富さ

Slide 17

Slide 17 text

開発基盤の刷新でフロントエンドが最⾼になっ... 17

Slide 18

Slide 18 text

...てない！ 18

Slide 19

Slide 19 text

19 モノリス解体後のREST APIの課題 ● そのページに使うデータ全部盛り ○ マスタデータ ○ ユーザーデータパフォーマンスの懸念 ● レスポンスが⼀定でない ○ 同じ名称で型が全く異なる場合も ○ TypeScript導⼊時は⼿動で型付け → つらい

Slide 20

Slide 20 text

20 REST API → GraphQLに移⾏社内ツールにGraphQL導⼊‧検証 ↓ プロダクトを⼀部GraphQL化 ↓ プロダクトを全GraphQL化 ↓ 他のプロダクトに展開

Slide 21

Slide 21 text

21 GraphQLの採⽤理由 ● 効率的なデータ通信 ● スキーマ駆動 ● graphql-codegenを含むエコシステム

Slide 22

Slide 22 text

22 フロントエンド共通の技術スタックたち ※SSRの要件の有無により使い分けています ※

Slide 23

Slide 23 text

23 今後のFindyフロントエンド ● App Router（React Server Components） ○ 新しいコンポーネント設計 ○ ランタイム CSS-in-JS からの脱却 EmotionからCSS Modulesへの移⾏！React Server ComponentsのCSS対応 https://tech.ﬁndy.co.jp/entry/2024/09/09/090000

Slide 24

Slide 24 text

24 技術選定を振り返る ● ユーザーのため ○ 最速で価値を届けられるか？ ○ 良いユーザー体験が実現できるか？ ● ⾃分達のため ○ チームに受け⼊れられるか？ ○ 良い開発者体験が期待できるか？ ● プロダクトのため ○ 持続的な開発ができるか？

Slide 25

Slide 25 text

25 まとめ ● 何のための技術選定か ○ プロダクトとプロダクトに関わる⼈達のため ● 重要なマインド ○ 「当時はそれが正解だった」 ● ⼩さくはじめる