Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 今年で7歳!

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 affected による変更検知 ○ 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.findy.co.jp/entry/2024/09/09/090000

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

技術選定に歴史あり 26

Slide 27

Slide 27 text

リスペクトを忘れずに 27

Slide 28

Slide 28 text

28 ツール選定といえば...

Slide 29

Slide 29 text

ツール選定のお供に 29 https://findy-tools.io/

Slide 30

Slide 30 text

We’re hiring! https://careers.findy.co.jp/ 30